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));
}

 

Subscribe to stay updated
You'll be first to know about new articles and more. They're sent straight to your inbox!

No Spam, no BS. Promise. You can unsubscribe anytime.

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

Suleiman

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

Subscribe to stay updated
You'll be first to know about new articles and more. They're sent straight to your inbox!
No Spam, no BS. Promise. You can unsubscribe anytime.
Gradle setup, ProGuard rules, Material Design palette, metrics and much more

FREE Material Design Starter Project

For more details, click on the below link.
GET IT NOW FOR ANDROID STUDIO!
Download FREE
STARTER PROJECT
Material Design Template Project for Android Studio
DOWNLOAD STARTER PROJECT
95% OFF on Machine Learning with Python Course

Use Coupon Code: CODESTARS