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

问题

单击时如何使按钮具有圆形波纹效果？我是否必须创建一个新的drawable，或者是否有内置的方式？

Answer 1

具有圆形涟漪效果的另一个属性，特别是对于操作栏：

android:background="?actionBarItemBackground"

Answer 2

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

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

您可以使用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及更高版本上工作。

Answer 4

如果你已经有了背景图片，这里有一个看起来接近selectableItemBackgroundBorderless的涟漪的例子：

protected function getListQuery() 
{
    $url="index.php?option=com_content&view=article&id=";
    $columns = array('ar.id','ar.alias','ar.introtext','ar.images','ar.created','m.link','m.path');
    $db = JFactory::getDBO();
    $query = $db->getQuery(true)
                ->select($db->qn($columns))
                ->from($db->qn('#__content', 'ar'))
                ->join('INNER', $db->qn('#__menu', 'm'))
                ->where($db->qn('m.link') . " = CONCAT('$url', " . $db->qn('ar.id') . ")")
                ->order($db->qn('ar.id') . ' DESC');
    return $query;
}

ic_filter_state.xml：

            <ImageButton
                android:id="@+id/btn_show_filter_dialog"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:background="@drawable/ic_filter_state"/>

state_pressed_ripple.xml :(白色背景上的不透明度设置为10％）1AFFFFFF

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

Answer 5

只需将此背景添加到您的视图"android:background=?android:attr/actionBarItemBackground"

Answer 6

只需将此项目添加到您的

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

Answer 7

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

Answer 8

如果您想要不跨圆边界的波纹效果，则可以检查此代码。它为我完美地工作。请记住，您必须在波纹_blue.xml中提供id = @ android：id / mask

serenity.driver.capabilities=nativeEvents:true;requireWindowFocus:true;

<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

Answer 9

尝试：

android:background="@android:color/transparent"
android:clickable="true"
android:focusable="true"
android:foreground="?actionBarItemBackground"

Answer 10

在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
}

Answer 11

我也在我的一个项目中解决了这个问题。 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"/>

Answer 12

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

单击按钮时如何在按钮上形成圆形纹波？

背景

问题

问题

12 个答案: