Android Ripple Drawable

By | December 18, 2015

With the Android Lollipop a new touch feedback mechanism was introduced called Ripple Drawable based on the concept of ripples .A Ripple is a new kind of Drawable object as a RippleDrawable that shows a ripple effect in response to state changes.Ripple drawable is set on to a view which is click-able , In this tutorial we will see an example how to set ripple for button view.

Android Material Design Ripple

Drawable

Ripple effect works on Android Device with level 21 and above , Unfortunately It Won’t Work below API level 21(Pre-Lollipop) , so we will create custom_bg.xml file in drawable-v21 and also in drawable.

The Below Drawable XML Specifies a Blue Ripple effect on white background .
file : drawable-v21/custom_bg.xml

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

    <item 
       android:id="@android:id/mask" 
       android:drawable="@color/colorWhite" />
</ripple>

As Ripple Effect wont’t work below API 5 Level 21 So We will have Selector Drawable for back port.
file : drawable/custom_bg.xml

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

    <item android:state_pressed="true">
        <shape>
            <solid android:color="@android:color/holo_blue_light"></solid>
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="@android:color/white"></solid>
        </shape>
    </item>

</selector>

Setting Ripple Effect

You can Set the above defined drawable from xml or from code .

Set From XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
   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" 
   tools:context="com.tutorialsbuzz.androidripple.MainActivity">

    <Button 
      android:id="@+id/button_01" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="@drawable/custom_bg" />
      android:text="Click Me"

</RelativeLayout>

OR

Set From Code

Button button = (Button) findViewById(R.id.button_01);
button.setBackgroundResource(R.drawable.custom_bg);

Create a MainActivity and set the content of activity with above defined XML Layout .

package com.tutorialsbuzz.androidripple;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

    }
}

Android Material Design Ripple