How to get the ripple effect, for example, in the play store tab, with the color change of the toolbar and notification bar?

Question

I'm new to android.i trying to achieve a ripple effect when I click on the tab with the color steps of the toolbar and notification bar, for example, in the play.how store for this? Please, help

Answer 1

Create res/drawable/ripple_effect.xml

 <?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:color="#af0c0e" tools:targetApi="lollipop"> <item android:id="@android:id/mask"> <shape android:shape="rectangle"> <solid android:color="#af0c0e" /> </shape> </item> </ripple> 

Then create res/layout/ripple_animation.xml

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#fff" android:elevation="6dp"> <TextView android:layout_width="match_parent" android:layout_height="100dp" android:background="?attr/selectableItemBackground" android:clickable="true" android:gravity="center" android:padding="10dp" android:text="Ripple Animation/Effect in Android" /> </FrameLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:background="#fff" android:elevation="6dp"> <TextView android:layout_width="match_parent" android:layout_height="100dp" android:background="@drawable/ripple_effect" android:clickable="true" android:gravity="center" android:padding="10dp" android:text="Ripple Animation/Effect in Android" /> </FrameLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:background="#fff" android:elevation="6dp"> <TextView android:layout_width="match_parent" android:layout_height="100dp" android:background="?attr/selectableItemBackground" android:clickable="true" android:gravity="center" android:padding="10dp" android:text="Ripple Animation/Effect in TextView" /> </FrameLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:background="#fff" android:elevation="6dp"> <TextView android:layout_width="match_parent" android:layout_height="100dp" android:background="@drawable/ripple_effect" android:clickable="true" android:gravity="center" android:padding="10dp" android:text="Ripple Animation/Effect in TextView" /> </FrameLayout> </LinearLayout> 

Try this example. For a given ripple effect, use android:background="@drawable/ripple_effect" .

Answer 2

If you just want to get a ripple effect on Android 5.0 devices, the new drawable ripple_bg_drawable :

 <?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:color="#d10c1d" <!--ripple color--> tools:targetApi="LOLLIPOP"> <item> <shape android:shape="rectangle"> <solid android:color="#8cc476" /> </shape> </item> </ripple> 

then add android:background="@drawable/ripple_bg_drawable" to your widget

or like this:

 android:background="?attr/selectableItemBackgroundBorderless" 

you must add this code to your layout file !, but this way you cannot adjust the ripple color!

but if you want to be compatible with devices running Android 5.0, the only way is to do it yourself by customizing! Here is the open source RippleView project

Answer 3

There is a library that helps you achieve this: https://github.com/armcha/PlayTabLayout

 <io.armcha.playtablayout.core.PlayTabLayout android:id="@+id/playTabLayout" android:layout_width="match_parent" android:layout_height="some_dp" /> 

Answer 4

set the properties below to the view in which you need the ripple effect.

 android:background="?attr/selectableItemBackground" android:clickable="true"