How to make a circular ripple on a button when it's being clicked?

Question

Background

On the dialer app of Android, when you start searching for something, and you click the arrow button on the left of the EditText, you get a circular ripple

Answer 1

just add this item in your

           <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="?android:attr/actionBarItemBackground"
                app:srcCompat="@drawable/ic_arrow_drop_down_black_24dp" />

Answer 2

In Kotlin / Java you can do the following

fun View.applyCircularRippleEffect() {
    val backgroundResId = context.getResource(android.R.attr.actionBarItemBackground)

    if (backgroundResId != 0) {
        setBackgroundResource(backgroundResId)
        isClickable = true
        isFocusable = true
    }
}

// getResource extension
fun Context.getResource(resourceId: Int): Int {
    val out = TypedValue()
    theme.resolveAttribute(resourceId, out, true)

    return out.resourceId
}

Answer 3

I also fixed this problem in one of my projects. android:foreground="?attr/selectableItemBackgroundBorderless" is responsible for the ripple effect, that's why it is set in the foreground and android:clipToPadding="false" will prevent the ripple effect cut off and make it rectangular.It will keep your ripple effect circular.

<ImageButton
        android:id="@+id/navButton"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dp"
        android:foreground="?attr/selectableItemBackgroundBorderless"
        android:clipToPadding="false"
        android:src="@drawable/search_ic_back_arrow"/>

Answer 4

Create and set a ripple drawable as background. Something like this.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/grey_15">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="?android:colorPrimary"/>
        </shape>
        <color android:color="@color/white"/>
    </item>
</ripple>

Answer 5

If you want ripple effect which will not cross the circle boundary, you can check this code. It works for me perfecrly. Just remember, you have to give id=@android:id/mask in ripple_blue.xml

<ImageButton
    android:id="@+id/send_password_to_mail_image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/ripple_blue"
    android:src="@drawable/ic_filter" />

ripple_blue.xml

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorRipple">

    <item android:id="@android:id/mask">

        <shape android:shape="oval">
            <solid android:color="@color/colorWindowBackground"/>
        </shape>

    </item>

    <item android:id="@android:id/background">

        <shape android:shape="oval">
            <solid android:color="@color/colorWindowBackground"/>
        </shape>

    </item>

</ripple>

color.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <color name="colorWindowBackground">#F2F5FC</color>
    <color name="colorRipple">#0288d1</color>
</resources>

Answer 6

Another attribute with round ripple effect, specially for action bar:

android:background="?actionBarItemBackground"

UPD: Ripple color can be changed by this attribute:

<!--somewhere in styles-->
<item name="colorControlHighlight">your_color_here</item>

But keep in mind, this attribute applies to all default ripple effects.