In this tips, I’m going to show you to implement ripple effect/animation in your android buttons. Now, you can easily add ripple effect/animation in your buttons, layouts, textviews, etc. and you can also change its color. Note that, this ripple effect/animation will only show on device running lollipop and above.
Here, I have mentioned two method to implement ripple effect in your android button and you can apply in view and view group by the same way.
Method 1: To Add Ripple Effect/Animation to a Android Button
Just replace your button background attribute with android:background=”?attr/selectableItemBackground” and your code looks like this.
1 2 3 4 5 |
<Button android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/selectableItemBackground" android:text="Click Me" /> |
Method 2: To Add Ripple Effect/Animation to a Android Button
Using this method, you can customize ripple effect color. First, you have to create a xml file in your drawable resource directory. Create a ripple_effect.xml file and add following code.
res/drawable/ripple_effect.xml
1 2 3 4 5 6 7 8 9 10 11 |
<?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="#f816a463" tools:targetApi="lollipop"> <item android:id="@android:id/mask"> <shape android:shape="rectangle"> <solid android:color="#f816a463" /> </shape> </item> </ripple> |
And set background of button to above drawable resource file. Final code of xml layout activity looks like this.
res/layout/ button_ripple_effect.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?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:background="#fff" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:text="Click the below buttons to see ripple effect" /> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/ripple_effect" android:padding="16dp" android:text="Click Me" /> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:background="@drawable/ripple_effect" android:padding="16dp" android:text="Click Me" /> </LinearLayout> |
Recent Comments