Android Ripple Effect + Elevation for non-buttons

Question

I am trying to add touch feedback to LinearLayout, which is similar to the usual Button feedback at API level 21, as in this for example, and still have not been successful.

I defined a standard ripple 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 ripples, I added them to LinearLayout like this:

 <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, since it’s much easier for me to insert various types of text and handle the positioning of the ImageView inside it (as opposed to button calls).

Adding a ripple effect or animation separately works if the background of the view does not have transparency on this .

I'm not sure if this is a problem related to the above question, but, seeing that the standard button allows you to use feedback with the excitement and height of the animation, I believe that achieving this effect is possible for other views as well.

Any understanding of this problem would be greatly appreciated.

Answer 1

Both effects work togheter without the android:id="@android:id/mask" attribute in the ripple element element (perhaps this attribute adds some transparency).

Answer 2

Use ForegroundLinearLayout . This allows you to place ripples or any other, highlighted in the foreground. Similarly, you can create a ForegroundRelativeLayout , etc. (Just make this class extended from RelativeLayout ).

Here is an example with your stateListAnimator and circulation:

 <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 the design support library. This way you can just use android.support.design.internal.ForegroundLinearLayout