Add Ripple Effect animation on Android Button Pressed State Example Tutorial

How to create show button with ripple effect in pre lollipop devices on clicked event.

Android ripple effect comes with Android Lollipop 5.0 and still used in all the upper lollipop devices by default. This is a simple and smooth animation effect applied on buttons and every widget which has its own clicked functionality. So in this tutorial we are going to Add Ripple Effect animation on Android Button Pressed State Example Tutorial using GitHub library.

android-project-download-code-button

Note :  Please follow the below steps very carefully in order to implement GitHub support library in your android application project :

1. Open your project’s build.gradle ( Module : app ) file.

build-gradle-app

2. Please add below code inside your build.gradle ( Module : app ) file.

compile 'com.android.support:appcompat-v7:24.0.0'

compile 'com.github.traex.rippleeffect:library:1.3'

3. Screenshot of build.gradle ( Module : app ) file after adding above code.

ripple_effect_library

Here your go friends….Now We are going start coding.

How to Add Ripple Effect animation on Android Button Pressed State Example Tutorial.

Code for MainActivity.java file.

package com.android_examples.rippleeffect_android_examplescom;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Code for activity_main.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.android_examples.rippleeffect_android_examplescom.MainActivity">

    <com.andexert.library.RippleView
        android:id="@+id/more"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        rv_centered="true">

        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Button with Ripple Effect"
            android:id="@+id/button"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:background="#2196F3"
            android:textColor="#FFFFFF"
            style="@style/Widget.AppCompat.Button.Colored"
            />

    </com.andexert.library.RippleView>

</RelativeLayout>

Screenshot:

Add Ripple Effect animation on Android Button Pressed State Example Tutorial

Click here to download Add Ripple Effect animation on Android Button Pressed State Example Tutorial project with source code.

Leave a Reply

Your email address will not be published. Required fields are marked *