How to implement Ripple Effect on Any View using material ripple library in Android Tutorial

Udemy Generic 728x90

Objective

In this tutorial, we will learn how to implement Ripple Effect on Any View using material ripple in Android application through a simple example.

 



 

 

Ripple effect in a gradually spreading effect or influence. This tutorial explains how to implement Ripple Effect on any view using material ripple library in Android Application. We will create a ripple effect on Button and TextView. In this tutorial, we will create Ripple effect on TextView widget programmatically and create Ripple effect on Button widget through xml. If we want to create Ripple effect on any view through xml then add view inside com.balysv.materialripple.MaterialRippleLayout element in the layout. If we want to create Ripple Effect programmatically then pass the view in the on method of MaterialRippleLayout class like MaterialRippleLayout.on(view).

Step 2

Create a New Project

Create a new Project in Android Studio, goto File ⇒ New ⇒ New Projects.

 

Step 3

Add supporting Library

To make Ripple effect, we need to add material ripple in the project. So open build.gradle file and add material ripple as dependency.

dependencies {
   ....
    compile 'com.balysv:material-ripple:1.0.2'
   ....
}

 

Step 4

Create Layout

We will create Ripple effect on TextView and Button widget. Create Ripple effect through xml the use Button inside com.balysv.materialripple.MaterialRippleLayout element. So, we need to use Button and TextView widget in activity.xml file.

<com.balysv.materialripple.MaterialRippleLayout
        android:layout_width="match_parent"
        android:id="@+id/ripple_effect"
        android:layout_height="wrap_content"
        android:background="#ffff00"
        android:layout_marginTop="24dp"
        app:mrl_rippleOverlay="true"
        app:mrl_rippleColor="#585858"
        app:mrl_rippleAlpha="0.2"
        app:mrl_rippleDelayClick="false"
        app:mrl_rippleHover="true">

        <Button
            android:id="@+id/ripple_layout_1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Overlay with hover"/>

    </com.balysv.materialripple.MaterialRippleLayout>


    <TextView
        android:layout_below= "@+id/ripple_effect"
        android:id="@+id/ripple_layout_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:textSize="25dp"
        android:gravity="center_horizontal"
        android:text="Ripples static init"/>

ripple effect

 

Step 5

Initialize TextView

We will create Ripple Effect on TextView. So, we need to initialize TextView onCreate() method.

// Initialize TextView
TextView view = (TextView)findViewById(R.id.ripple_layout_2);

 

Step 5

Create Ripple Effect on TextView

To create Ripple Effect on TextView, pass the textview in on() method and call create() method of MaterialRippleEffect Class.

MaterialRippleLayout.on(view)  // pass view in on() method
                .rippleColor(Color.parseColor(&quot;#FF0000&quot;)) // set color of ripple
                .rippleAlpha(0.2f) // set alpha
                .rippleHover(true) // enable ripple on hover view
                .create();  // create ripple on view

 



 
 

Udemy Generic 728x90

Spread the word. Share this post!