Ripple Effect on Android Button

19 Feb, 2021
The touch feedback in Android is a must whenever the user clicks on the item or button ripple effect when clicking on the same, gives confidence to the user that the button has been clicked so that they can wait for the next interaction of the app. So in this article, we are going to discuss what type of ripples can be implemented and where it can be used. Have a look at the following image to get an idea about the discussion.
Step 1: Create an empty activity project
Create an empty activity Android Studio project. Refer to Android | How to Create/Start a New Project in Android Studio? to know how to create an empty activity Android Studio project.
Step 2: Working with the activity_main.xml file
In the main layout of the application, there are 4 TextViews that have been implemented. one for the default touch feedback with border, the second is for default touch feedback without border, the third is for custom touch feedback with border, fourth is for the custom touch feedback without border.
Invoke the following code to implement the UI.
XML
<?xml version="1.0" encoding="utf-8"?><LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context=".MainActivity"    tools:ignore="HardcodedText">      <!--default touch feedback with border-->    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="64dp"        android:clickable="true"        android:focusable="true"        android:gravity="center|start"        android:padding="24dp"        android:text="Ripple With Border"        android:textColor="@android:color/black"        android:textSize="18sp" />      <!--default touch feedback without border-->    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:clickable="true"        android:focusable="true"        android:gravity="center|start"        android:padding="24dp"        android:text="Ripple Without Border"        android:textColor="@android:color/black"        android:textSize="18sp" />      <!--custom touch feedback with border-->    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:clickable="true"        android:focusable="true"        android:foregroundGravity="bottom"        android:gravity="center|start"        android:padding="24dp"        android:text="Custom Ripple With Border"        android:textColor="@android:color/black"        android:textSize="18sp" />      <!--custom touch feedback without border-->    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:clickable="true"        android:focusable="true"        android:gravity="center|start"        android:padding="24dp"        android:text="Custom Ripple Without Border"        android:textColor="@android:color/black"        android:textSize="18sp" />  </LinearLayout>
Output UI: 
Step 3: Default Ripples in Android
The default ripple in the android for the buttons or the text buttons can be achieved with the tags:
android:background=”?android:attr/selectableItemBackground”: this creates ripple effect with border.
android:background=”?android:attr/selectableItemBackgroundBorderless”: this creates ripple effect without border.
Note: These tags are need to be set under the TextView.
To implement both of the default ripple effects in android invoke the following code inside the activity_main.xml file.
XML
<?xml version="1.0" encoding="utf-8"?><LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context=".MainActivity"    tools:ignore="HardcodedText">      <!--default touch feedback with border-->    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="64dp"        android:background="?android:attr/selectableItemBackground"        android:clickable="true"        android:focusable="true"        android:gravity="center|start"        android:padding="24dp"        android:text="Ripple With Border"        android:textColor="@android:color/black"        android:textSize="18sp" />      <!--default touch feedback without border-->    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="?android:attr/selectableItemBackgroundBorderless"        android:clickable="true"        android:focusable="true"        android:gravity="center|start"        android:padding="24dp"        android:text="Ripple Without Border"        android:textColor="@android:color/black"        android:textSize="18sp" />      <!--custom touch feedback with border-->    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:clickable="true"        android:focusable="true"        android:foregroundGravity="bottom"        android:gravity="center|start"        android:padding="24dp"        android:text="Custom Ripple With Border"        android:textColor="@android:color/black"        android:textSize="18sp" />      <!--custom touch feedback without border-->    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:clickable="true"        android:focusable="true"        android:gravity="center|start"        android:padding="24dp"        android:text="Custom Ripple Without Border"        android:textColor="@android:color/black"        android:textSize="18sp" />  </LinearLayout>
Step 4: Adding custom layouts
These are needed to be implemented under the drawable folder. After implementing they need to set as the background for these text buttons.
To add the layouts right click on the drawable folder > new > Drawable Resource File.
The first layout is custom_bordered_ripple.xml and invoke the following code inside it.
XML
<?xml version="1.0" encoding="utf-8"?><ripple xmlns:android="http://schemas.android.com/apk/res/android"    android:color="@color/colorAccent">      <!--this creates the mask with the ripple effect-->    <item        android:id="@+id/mask"        android:drawable="@android:color/white" />  </ripple>
The second layout is custom_borderless_ripple.xml and invoke the following code.
XML
<?xml version="1.0" encoding="utf-8"?><ripple xmlns:android="http://schemas.android.com/apk/res/android"    android:color="@color/colorAccent"></ripple>
The next step is to invoke these custom layouts as the background for the Custom Ripple With Border and Custom Ripple Without Border buttons inside the activity_main.xml file.
XML
<?xml version="1.0" encoding="utf-8"?><LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context=".MainActivity"    tools:ignore="HardcodedText">      <!--default touch feedback with border-->    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="64dp"        android:background="?android:attr/selectableItemBackground"        android:clickable="true"        android:focusable="true"        android:gravity="center|start"        android:padding="24dp"        android:text="Ripple With Border"        android:textColor="@android:color/black"        android:textSize="18sp" />      <!--default touch feedback without border-->    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="?android:attr/selectableItemBackgroundBorderless"        android:clickable="true"        android:focusable="true"        android:gravity="center|start"        android:padding="24dp"        android:text="Ripple Without Border"        android:textColor="@android:color/black"        android:textSize="18sp" />      <!--custom touch feedback with border-->    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@drawable/custom_bordered_ripple"        android:clickable="true"        android:focusable="true"        android:foregroundGravity="bottom"        android:gravity="center|start"        android:padding="24dp"        android:text="Custom Ripple With Border"        android:textColor="@android:color/black"        android:textSize="18sp" />      <!--custom touch feedback without border-->    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@drawable/custom_borderless_ripple"        android:clickable="true"        android:focusable="true"        android:gravity="center|start"        android:padding="24dp"        android:text="Custom Ripple Without Border"        android:textColor="@android:color/black"        android:textSize="18sp" />  </LinearLayout>
Android-Button
Technical Scripter 2020
Android
Technical Scripter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android RecyclerView in Kotlin
Broadcast Receiver in Android With Example
Android SDK and it's Components
Navigation Drawer in Android
How to Communicate Between Fragments in Android?
How to Create and Add Data to SQLite Database in Android?
Flutter - Custom Bottom Navigation Bar
Content Providers in Android with Example
Android Projects - From Basic to Advanced Level