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

android developer picture android developer · Aug 11, 2015 · Viewed 72.4k times · Source

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 effect on it :

enter image description here

The problem

I've tried to have it too, but I got a rectangular one:

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

The question

How do I make the button have a circular ripple effect when being clicked? Do I have to create a new drawable, or is there a built in way for that?

Answer

bond picture bond · Dec 21, 2015

If you are using AppCompat theme, then you could set the background of the view as:

android:background="?selectableItemBackgroundBorderless"

This will add circular ripple on 21 and above and square background on below 21.