Material Design Android Ripple Effect

Here’s on how to add a neat Ripple effect for your UI components. I’ll take a button for this.

Create new folder res/drawable-v21 and create a new XML ripple.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/primary_700">
    <item android:drawable="@color/primary_500" />
</ripple>

Add this to your button layout:  android:background="@drawable/ripple"

Note that the Android ripple effect only works on Lollipop versions and above. So you might want to use a normal color selector for previous versions as a fallback.

So set your background to be a regular color selector, and for Lollipop handle it like this in your Activity.java

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
             button.setBackground(getDrawable(R.drawable.ripple));
}

 

Enjoyed this article? Please spread the word.

Subscribe to Newsletter
Be the first to get latest updates and exclusive content
straight to your email inbox.
STAY UPDATED
Chill, I hate spam too. You can unsubscribe anytime.

Suleiman

An App developer with an eye for design. Loves to create apps with good UI/ UX that people appreciate. In his spare time, he likes to draw and paint.

Enjoyed this article? Please spread the word.

Subscribe to Newsletter
Be the first to get latest updates and exclusive content
straight to your email inbox.
STAY UPDATED
Chill, I hate spam too. You can unsubscribe anytime.

Develop faster with an all-in-one, customizable Material Design App
GET THE APP CODE
Don't miss this App Template!