Android Ripple Effect + Elevation on non-Button Views

Question

I am trying to add touch feedback to a LinearLayout that is similar to a regular Button's feedback in API level 21, much like in this example, and have been so far unsuccessful.

I have defined a standard ripple drawable like this:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">

<item android:id="@android:id/mask">
    <shape android:shape="rectangle">
        <solid android:color="?android:colorAccent" />
    </shape>
</item>

and used the StateListAnimator that Google provides here:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:state_pressed="true">
    <objectAnimator
        android:duration="@android:integer/config_shortAnimTime"
        android:propertyName="translationZ"
        android:valueTo="@dimen/touch_raise"
        android:valueType="floatType" />
</item>
<item>
    <objectAnimator
        android:duration="@android:integer/config_shortAnimTime"
        android:propertyName="translationZ"
        android:valueTo="0dp"
        android:valueType="floatType" />
</item>

After defining the animator and ripple drawable, i've added them to my LinearLayout like so:

<LinearLayout
    android:id="@+id/linearLayout"        
    android:clickable="true"
    android:focusable="true"
    android:orientation="horizontal"
    android:background="@drawable/ripple"
    android:stateListAnimator="@anim/touch_elevation">

The idea is to use this LinearLayout as a button, as it is much simpler for me to insert various types of text and handle ImageView positioning inside it (as opposed to button drawables).

Adding the ripple effect or the animation separately works, so long as the background of the view has no transparency as per this question.

I am not sure if this is an issue related to the above mentioned question, but seeing as the standard button manages to employ both ripple and elevation animation feedback, I figure that achieving this effect is possible on other views as well.

Any insight into this problem would be greatly appreciated.

Answer 1

Use ForegroundLinearLayout. It allows to put ripple or any another drawable in foreground of view. The same way you can create ForegroundRelativeLayout etc. (just make this class extend from RelativeLayout).

Here is example with your stateListAnimator and ripple drawable:

<your.package.ForegroundLinearLayout
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:layout_centerInParent="true"
    android:gravity="center"
    android:foreground="@drawable/bg_ripple"
    android:background="#fff"
    android:clickable="true"
    android:stateListAnimator="@animator/animator_elevation">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello world!"/>

</your.package.ForegroundLinearLayout>

Result:

EDIT: ForegroundLinearLayout exists in support design library. So you can just use android.support.design.internal.ForegroundLinearLayout