Ripple Effect on Android Button

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.

Steps to Implement the button ripples (touch feedbacks) in Android

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>

Output: Run on Emulator

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>

Output: Run on Emulator