Ripple Effect On Button Using Android

Hello Guys,

The touch feedback in Android Whenever User Click on button ripple effect when click on button , user realizes button has been clicked so that they can wait for the next page of the app. So in this tutorial , we are going to discuss how to ripple effect implemented and where it can be used. 

Ripple Effect Button App Screen looking like below picture:

Let's implemented ripple effect button.

Step 1:  Create an Empty Activity in Project.

Step 2:   Create Custom layouts

• These layouts are create for ripple effect on button.
• These are needed to be implemented under the drawable folder. After Implementing they need to set in textviews.
• The First layout is custom_border_ripple.xml and follow below code:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/teal_200">

    <!-- this create for ripple effect -->
    <item
        android:id="@+id/mask"
        android:drawable="@color/white"/>


</ripple>

• The Second layout is custom_borderless_ripple.xml and follow below code:    

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/teal_200">

    
</ripple>

• The next step is to invoke these custom layouts as the background for the custom_border_ripple.xml and custom_borderless_ripple.xml buttons inside the activity_main.xml file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!-- Custom touch with border -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="75dp"
        android:background="@drawable/custom_broder_ripple"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center|start"
        android:padding="25dp"
        android:text="Ripple Effect With Border"
        android:textAlignment="center"
        android:textColor="@android:color/background_dark"
        android:textSize="18sp"/>

    <!-- Custom touch without border -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@drawable/custom_broderless_ripple"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center|start"
        android:padding="25dp"
        android:text="Ripple Effect Without Border"
        android:textAlignment="center"
        android:textColor="@android:color/background_dark"
        android:textSize="18sp"/>

</LinearLayout>

Output:

If you liked this post do share and promote the post 🙏 . Please stay with us and support.  🙏