It is a good user experience if we provide ripple effect whenever a user clicks on a button. It plays a wave color animation on the button and provides instant feedback to the user.
Default Ripple Effect
Setting a ripple effect on button is simple. All that you have to do is set two available default ripples on button in your app.
|
1 2 3 4 5 |
// this creates ripple effect with border. android:background=“?android:attr/selectableItemBackground” // this creates ripple effect without border. android:background=“?android:attr/selectableItemBackgroundBorderless” |
Creating Custom Ripple Effects
To change the color of ripple, we can create a custom ripple drawable for our project. We need to create different drawable xml files for bordered ripple and borderless ripple. This is how it can be done.
Bordered Ripple
|
1 2 3 4 5 6 7 |
<?xml version=“1.0” encoding=“utf-8”?> <ripple xmlns:android=“http://schemas.android.com/apk/res/android” android:color=“@color/colorWhite”> <item android:id=“@+id/mask” android:drawable=“@color/colorPrimary” /> </ripple> |
Borderless Ripple
Borderless ripple has only ripple element inside drawable file. No mask is provided.
|
1 2 3 4 |
<?xml version=“1.0” encoding=“utf-8”?> <ripple xmlns:android=“http://schemas.android.com/apk/res/android” android:color=“@color/colorAccent”> </ripple> |
In following example layout file, two buttons are provided, one with bordered ripple and one with borderless ripple.
|
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 29 30 31 32 33 34 |
<?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=“wrap_content” xmlns:app=“http://schemas.android.com/apk/res-auto” android:orientation=“horizontal”> <Button android:layout_marginEnd=“1dp” app:iconGravity=“textStart” app:icon=“@drawable/feedback_button_icon” app:iconSize=“36dp” android:layout_width=“0dp” android:layout_height=“wrap_content” android:textColor=“#ffffff” android:background=“@drawable/fc_bordered_ripple” android:layout_weight=“1” android:gravity=“center” android:text=“Comment” /> <Button app:icon=“@drawable/share_button_icon” app:iconSize=“36dp” app:iconGravity=“textStart” android:layout_width=“0dp” android:layout_height=“wrap_content” android:layout_marginStart=“1dp” android:background=“@drawable/fc_bordered_ripple” android:layout_weight=“1” android:textColor=“#ffffff” android:gravity=“center” android:text=“Share” /> </LinearLayout> |
