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

Android Material UI Template 8 in 1 CodeCanyon
<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));
}

 

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.

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
Android O is finally here!
Ready your Apps to get an advantage on Play Store.