How to make a circular ripple on a button when it's being clicked?
AndroidButtonRippledrawableAndroid Problem Overview
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?
Android Solutions
Solution 1 - Android
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.
Solution 2 - Android
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.
Solution 3 - Android
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>
Solution 4 - Android
Just Add this background to your view
android:background=?android:attr/actionBarItemBackground
Solution 5 - Android
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>
Solution 6 - Android
You can create circle ripple drawable using android:radius attribute in xml.
Example:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="your_color"
android:radius="your_radius" />
Pay attention, that your your_radius should be less then your view width and height.
For example: if you have view with size 60dp x 60dp your_radius should be near 30dp (width / 2 or height / 2).
> Work on Android 5.0 and above.
Solution 7 - Android
just add this item in your activity xml
<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" />
Solution 8 - Android
update 2021:
you need use actionBarItemBackground for background
android:background="?android:attr/actionBarItemBackground"
Example:
<androidx.appcompat.widget.AppCompatImageButton
android:layout_width="56dp"
android:layout_height="56dp"
android:background="?android:attr/actionBarItemBackground"
android:src="@drawable/ic_copy" />
Solution 9 - Android
If you want more generic XML files, I have two files:
-
btn_ripple_background with code:
http://schemas.android.com/apk/res/android"> -
ripple_circuler_shape with code:
http://schemas.android.com/apk/res/android" android:color="@color/btn_state_pressed_text_color" android:shape="oval">
finally the usage:android:foreground="@drawable/ripple_btn_background"
Solution 10 - Android
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>
Solution 11 - Android
Try:
android:background="@android:color/transparent"
android:clickable="true"
android:focusable="true"
android:foreground="?actionBarItemBackground"
Solution 12 - Android
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
}
Solution 13 - Android
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"/>