152

背景

在 Android 的拨号器应用程序中，当您开始搜索某些内容时，单击 EditText 左侧的箭头按钮，您会在其上获得圆形波纹效果：

在此处输入图像描述

问题

我也尝试过，但我有一个矩形的：

    <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"/>

问题

如何使按钮在单击时具有圆形波纹效果？我是否必须创建一个新的可绘制对象，或者是否有内置的方法？

4

13 回答 13

332

如果您使用的是 AppCompat 主题，那么您可以将视图的背景设置为：

android:background="?selectableItemBackgroundBorderless"

这将在 21 及以上添加圆形波纹，在 21 以下添加方形背景。

于 2015-12-21T03:00:50.363 回答
115

另一个具有圆形波纹效果的属性，专门用于操作栏：

android:background="?actionBarItemBackground"

UPD：波纹颜色可以通过这个属性改变：

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

但请记住，此属性适用于所有默认的涟漪效果。

于 2018-01-29T13:40:27.697 回答
54

创建并设置一个可绘制的波纹作为背景。像这样的东西。 

<?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>
于 2015-08-11T12:29:15.687 回答
41

只需将此背景添加到您的视图中

android:background=?android:attr/actionBarItemBackground

于 2019-01-30T12:33:58.317 回答
28

如果您已经有背景图像，下面是一个看起来接近 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：（白色背景上的不透明度设置为 10%）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>
于 2018-04-20T02:54:35.633 回答
21

android:radius您可以使用xml 中的属性创建可绘制的圆形波纹。

例子：

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

请注意，您your_radius应该小于您的视图宽度和高度。例如：如果您的视图大小60dp x 60dp your_radius应该接近30dp（宽度/ 2 或高度/ 2）。

在 Android 5.0 及更高版本上工作。

于 2016-11-29T10:23:50.293 回答
7

只需在您的活动 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" />
于 2020-03-01T13:01:24.633 回答
5

2021 年更新：

你需要使用actionBarItemBackground作为背景

android:background="?android:attr/actionBarItemBackground"

例子：

 <androidx.appcompat.widget.AppCompatImageButton
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:background="?android:attr/actionBarItemBackground"
        android:src="@drawable/ic_copy" />
于 2021-06-20T13:01:40.883 回答
3

如果您想要更通用的 XML 文件，我有两个文件：

1) btn_ripple_background与代码：

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

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

最后是用法：android:foreground="@drawable/ripple_btn_background"

于 2019-01-11T14:04:17.500 回答
3

如果你想要不会越过圆圈边界的涟漪效果，你可以检查这个代码。它完全适合我。请记住，您必须在ripple_blue.xml 中提供 id=@android:id/mask

<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>
于 2020-03-10T07:42:32.713 回答
1

尝试：

android:background="@android:color/transparent"
android:clickable="true"
android:focusable="true"
android:foreground="?actionBarItemBackground"
于 2019-11-17T04:16:31.540 回答
0

在 Kotlin / Java 中，您可以执行以下操作

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
}
于 2020-05-02T17:46:29.563 回答
0

我还在我的一个项目中解决了这个问题。android:foreground="?attr/selectableItemBackgroundBorderless"负责涟漪效果，这就是为什么它被设置在前景中，并android:clipToPadding="false"会防止涟漪效果被切断并使其成为矩形。它将保持你的涟漪效果圆形。

<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"/>
于 2021-01-04T11:14:18.873 回答