How to make a circular ripple on a button when pressed?

Question

Background

In the Android dialer application, when you start looking for something, and you press the button with the arrow to the left of EditText, you get the effect of a round ripple:

Problem

I also tried, but I have 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"/> 

Question

How to make a button with a circular ripple by pressing a button? Should I create a new drawing or is there a built-in way for this?

Answer 1

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 a 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> 

Answer 2

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

 android:background="?selectableItemBackgroundBorderless" 

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

Answer 3

Another attribute with the effect of round ripples, especially for the action bar:

 android:background="?actionBarItemBackground" 

UPD : the ripple color can be changed using this attribute:

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

But keep in mind this attribute applies to all standard wave effects.

Answer 4

Create and set ripples as a background. Something like that.

 <?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

You can create circular ripples using the android:radius attribute in xml.

Example:

 <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="your_color" android:radius="your_radius" /> 

Please note that your your_radius should be less than the width and height of your view. For example: if you have a view with a size of 60dp x 60dp your_radius , it should be close to 30dp (width / 2 or height / 2).

Run on Android 5.0 and higher.

Answer 6

Just add this background to your view "android:background=?android:attr/actionBarItemBackground"

Answer 7

If you want more general XML files, I have two files:

1) btn_ripple_background with code:

 <?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/ripple_circular_shape"/> </selector> 

2) ripple_circuler_shape with code:

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/btn_state_pressed_text_color" android:shape="oval"> <solid android:color="@color/btn_state_pressed_text_color" /> </shape> 

finally use: android:foreground="@drawable/ripple_btn_background"