android ripple effect tutorial

0
125

Android ripple effect background is a beautiful ripple animation. We can easily change its color and style.It provides some kind of visual confirmation so that the user knows that their click was successful.when we perform a long press, we can understand exactly what’s happening.In this tutorial, we will learn how to implement Android ripple effect.

Download Project – RippleEffectDemo

Download Apk – Apk

Wants to Learn Advanced Android Application development from scratch- Beyond Basics

Creating New Project – RippleEffectDemo

Open your Android Studio & create a new Project, have taken Blank Activity for this project and clicked finish.

Setting DEFAULT Ripple effect

If you want to apply the standard ripple effect just apply to your View background:

android:background="?android:attr/selectableItemBackgroundselect"

selectableItemBackground

will provide default ripple effect.

Setting customized Android Ripple effect

Set these drawable as the background:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/green"
    >
    <item android:id="@android:id/mask"
        android:drawable="@color/green"
        >
    </item>
    <item
        android:drawable="@color/yellow">
    </item>

</ripple>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimaryDark"
   </ripple>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#FF4081"
    >
    <item android:id="@android:id/mask">
    <shape android:shape="rectangle">
        <solid android:color="#FF4081" />
    </shape>
    </item>

</ripple>

Here we have created 3 different types of Android Ripple effect in the drawable file.Three different types are

  1. Durable with only a mask layer – If a mask layer is set and the ripple is set as a View background, the Android ripple effect will be masked by that layer.
  2. Durable with a mask and a child layer – If a mask layer is set and the ripple is set as a View background, the Android ripple effect will be masked by that layer before it is drawn.
  3. Durable with no musk and child layer – If no child or mask layer is specified and the ripple is set as a View background, the ripple will be drawn atop the first available parent background.

Related:

ItemDecoration in RecyclerView in Android

Drag and Swipe with RecyclerView

Swipeable RecyclerView in Android

Swipeable RecyclerView in Android using Kotlin.

Parse JSON Data using Retrofit and Rxjava in android and display in Recyclerview using cardview

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="#fff"
        android:elevation="6dp"
        android:id="@+id/frameLayout">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@drawable/ripple_effect2"
            android:clickable="true"
            android:gravity="center"
            android:padding="10dp"
            android:text="Ripple Effect" />
    </FrameLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:elevation="6dp"
        android:id="@+id/frameLayout2"
        android:layout_below="@+id/frameLayout"
        android:layout_alignParentStart="true">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@drawable/ripple_effect"
            android:clickable="true"
            android:gravity="center"
            android:padding="10dp"
            android:text="Ripple Effect" />
    </FrameLayout>

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="drawable/ripple_effect4"
        android:clickable="true"
        android:gravity="center"
        android:padding="10dp"
        android:text="Ripple Effect"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="98dp" />

</RelativeLayout>

Set these drawable as the background to your view:android:background="drable/drable_name"

Output

Conclusion
In this Example, you saw how to use Android Ripple effect on android You can similarly add more effects. In the case of any queries, you may ask questions. Keep following more amazing Android Blogs. If You are Beginner Learn Android application development from the scratch


If you really liked the article, please subscribe to our YouTube Channel for videos related to this article.Please find us on Twitter and Facebook.

LEAVE A REPLY

Please enter your comment!
Please enter your name here