Android Ripple Effect Example Code

Please follow and like us:

Android Ripple Effect Example Code Tutorial

Android Ripple Effect Example Code – In this tutorial, I’m going to show you to implement ripple effect in your android buttons and all other components with the custom colors. Let’s explore Android Ripple Effect Example step by step.

Android Ripple Effect Example Code

 

Download: Android Ripple Effect Example Code

Simple way to add Android Ripple Effect

You can add simple Android Ripple effect by replace your view’s background attribute with “android:background=”?attr/selectableItemBackground“.

    <TextView android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:gravity="center"
        android:padding="16dp"
        android:text="Android Ripple Effect Simple"
        android:textSize="18sp" />

Custom color in Android Ripple Effect

Create button.xml in drawable folder

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@color/colorPrimaryDark"/>
    <item android:drawable="@color/colorPrimary"/>
</selector>

Create button.xml in drawable-v21 folder

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item android:drawable="@color/colorPrimary" />
</ripple>

Now you can set button.xml as background of your view.

    <TextView android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:background="@drawable/button"
        android:clickable="true"
        android:gravity="center"
        android:padding="16dp"
        android:text="Android Ripple Effect Custom"
        android:textColor="#fff"
        android:textSize="18sp" />

if you want custom color for ripple effect instead of default gray, then you can archive it by adding colorControlHighlight in your style.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="colorControlHighlight">@color/colorPrimaryDark</item>
    </style>

</resources>

Download: Android Ripple Effect Example Code

Output of Android Ripple Effect

Android Ripple Effect Example Code Tutorial

Hope you like our simple example of setting ripple effects.
Note: This ripple effects will only works in Lollipop+ devices. for backward compatibility there is not any official solution. To support older devices we have to use third party libraries.

nirav kalola