How to make a circular ripple on a button when it's being clicked?
android, button, rippledrawable
Solution
If you already have a background image, here is an example of a ripple that looks close to selectableItemBackgroundBorderless:
<ImageButton
android:id="@+id/btn_show_filter_dialog"
android:layout_width="24dp"
android:layout_height="24dp"
android:background="@drawable/ic_filter_state"/>
ic_filter_state.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="@drawable/state_pressed_ripple"/>
<item
android:state_enabled="true"
android:drawable="@drawable/ic_filter" />
</selector>
state_pressed_ripple.xml: (opacity set to 10% on white background) 1AFFFFFF
<?xml version="1.0" encoding="UTF-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#1AFFFFFF"/>
</shape>
<color android:color="#FFF"/>
</item>
</ripple>
Problem
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 : 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?