问题
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?
回答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 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>
回答2:
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.
回答3:
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.
回答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>
回答5:
Just Add this background to your view
android:background=?android:attr/actionBarItemBackground
回答6:
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.
回答7:
If you want more generic 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 the usage:android:foreground="@drawable/ripple_btn_background"
回答8:
Try:
android:background="@android:color/transparent"
android:clickable="true"
android:focusable="true"
android:foreground="?actionBarItemBackground"
回答9:
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>
回答10:
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" />
回答11:
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
}
来源：https://stackoverflow.com/questions/31941753/how-to-make-a-circular-ripple-on-a-button-when-its-being-clicked