以 selectableItemBackground 作为背景的形状可绘制对象

Question

我有几个按钮需要椭圆形边框。

所以我在 capsule_border.xml

中有这个

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="9999dp"/>
    <stroke
        android:width="1px"
        android:color="@color/border_gray" />
</shape>

我会在需要的地方使用 android:background="@drawable/capsule_border.xml。

现在，我想要一个具有椭圆形边框的按钮，还有一个 android:background="?selectableItemBackground" 用于视觉反馈。

我尝试使用带有 selectableItembackground 的父布局和带有 capsule_border 的按钮。但似乎突出显示的可点击区域是整个正方形。而不仅仅是胶囊边界内的区域。

有什么方法可以让 selectableItemBackground 不高度占据视图的整个矩形，而是只在我绘制的边框内？

Answer 1

有round_corners.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="@android:color/transparent"/>
    <corners android:radius="15dp" />
    <stroke
        android:width="1px"
        android:color="#000000" />
</shape>

和my_ripple.xml:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?android:attr/colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#000000" />
            <corners android:radius="15dp" />
        </shape>
    </item>
    <item android:drawable="@drawable/round_corners" />
</ripple>

和按钮：

<Button
    android:background="@drawable/my_ripple"
    ... />

会产生这样的结果：

参见 this 文章。

Answer 2

我有第一个答案的简单版本：

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?colorControlHighlight"> <!-- default ripple color -->

    <item>
        <!-- the background shape when it's not being clicked -->
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
            <corners android:radius="32dp" />
        </shape>
    </item>
</ripple>

只需将其用作背景，但如果它适用于 Button，请记住移除阴影:

style="?borderlessButtonStyle"

祝你好运！

Answer 3

这是 2020 年的一个更简单的解决方案（API >= 21 因为我们使用的是 ?attr 语法）：

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?colorControlHighlight">
    <!--  the ripple's color (1) -->

    <!--  no `id` so our <shape> will be drawn and not just used as mask -->
    <item>
        <shape>
            <corners android:radius="9dp" />
            <solid android:color="@color/white" />
        </shape>
    </item>

</ripple>

(1) If you don't override colorControlHighlight in your theme, the ripple's color will be Android's default. If you do override it but still want to use Android's default use ?android:colorControlHighlight instead

以 selectableItemBackground 作为背景的形状可绘制对象

Shaped drawable with selectableItemBackground as background

android

android-layout

android-view

android-selector

android-drawable