Open In App

Ripple Effect on Android Button

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Ripple Effect on Android Button

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

Step 1: Create an empty activity 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: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: 

Ripple Effect on Android Button

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: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"?>
    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"?>
    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: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



Last Updated : 19 Feb, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads