当点击按钮时如何制作一个圆形涟漪？

Question

背景

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

问题

当按钮被点击时，如何使它产生圆形涟漪效果？我需要创建一个新的可绘制对象吗，还是有内置的方法可以实现？

- android developer

---

尝试使用 https://github.com/traex/RippleEffect。 - Quick learner

如何在Android的TextView或ImageView上设置水波纹效果。 - Amrish Kakadiya

请考虑将您选择的答案更改为得票最高的答案，因为它实际上解决了问题。 - Jeff Barger

@JeffBarger 为什么？两者都可以正常工作。它们之间没有更好的选择。 - android developer

Answer 1

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

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

android:background="?selectableItemBackgroundBorderless"

这将在21及以上的区域添加圆形涟漪，在21以下的区域添加方形背景。

- bond

---

好的。我也可以设置它的颜色吗？ - android developer

在API 23中，“up”背景看起来比selectableItemBackgroundBorderless小了一半。 - snodnipper

@androiddeveloper，您可以在styles.xml中设置colorControlHighlight来设置颜色，如下所示： #F00 - bond

如果您将其用于其他布局中，则可能需要在布局中添加 android:clipChildren="false" 以使动画传播。 - Tanasis

在安卓9中，ImageView不是圆形的，它是正方形的。 - Kishan Solanki

Answer 2

特别为操作栏设计的具有圆形涟漪效果的另一个属性：

android:background="?actionBarItemBackground"

更新： 可以使用此属性来更改涟漪颜色：

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

但请注意，该属性适用于所有默认的涟漪效果。

- Anrimian

---

我不知道，今天我解决了这个问题，上面的答案并不能满足我的需求。我认为颜色可以在样式中自定义，但绝对不能在视图中自定义。 - Anrimian

如果你弄清楚了，请告诉我。可能会有用。 - android developer

这正是我正在寻找的效果。顺便问一下，你能提一下在哪里找到这个属性吗？似乎没有文档记录。 - Jack Wang

回答了问题提出者的问题。应该标为最佳答案。+1 - Corbella

@MeysamHadigheh ? 是 ?attr/ 的快捷方式。 - musooff

Answer 3

创建并将一个涟漪可绘制对象设置为背景，类似于以下内容。

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

- Thomas R.

---

你可以将波纹可绘制对象放置在drawables-v21文件夹中。对于低于L的版本，使用简单的状态可绘制对象。使用相同的文件名并将其放入drawable（默认）文件夹中。 - Thomas R.

我的意思是，在Lollipop之前，它的drawable文件应该包含什么？另外，请回答一下颜色问题。是否可以使用与“selectableItemBackground”相同的颜色？ - android developer

Ripple在Lollipop之前的版本不可用。因此，在先前版本的drawable文件中，需要使用普通按钮drawable。<item name="state_pressed" color=" .... . . " - capt.swag

你也可以创建一个样式。在values-v21文件夹中创建一个新的样式，并将涟漪可绘制设置为背景。对于早期版本（即L之前），在您的values文件夹中的styles.xml中，将“selectableItemBackground”属性作为相同样式的背景。 - Thomas R.

如果您想要与应用程序中使用的其他默认涟漪效果相同的涟漪颜色，请使用“?attr/colorControlHighlight”作为颜色。 - alexbchr

Answer 4

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

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

- Dipakk Sharma

Answer 5

如果您已经有一个背景图片，这里有一个波纹的例子，看起来与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>

- live-love

---

如果它是一个图层列表，会发生什么？ - Gk Mohammad Emon

Answer 6

您可以使用xml中的android:radius属性创建圆形涟漪可绘制对象。

示例：

<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及以上版本。

- Volodymyr Yatsykiv

Answer 7

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

- Rasoul Miri

Answer 8

只需在您的活动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" />

- Ali Eslami

---

似乎与此相同：https://dev59.com/c1wZ5IYBdhLWcg3wBcWz#54440773。 - android developer

Answer 9

如果您想要水波纹效果不超出圆形边界，可以查看这段代码。它对我来说完美运行。只需要记住，在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>

- Aminul Haque Aome

Answer 10

如果您需要更通用的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"。

- 100RaBH