如何在 Material 按钮的底部添加描边？

Question

我要实现这个按钮

我尝试添加图层列表可绘制背景。

在 Material 按钮的情况下不起作用。
如果是普通按钮，它也不起作用，因为我的 AppTheme 是 Material 主题。所以正常的 Button 也表现得像 Material 按钮。

Answer 1

你不能像这样使用 MaterialButton 作为自定义 drawable Background，它是 documentation:

Do not use the android:background attribute. MaterialButton manages its own background drawable, and setting a new background means MaterialButton can no longer guarantee that the new attributes it introduces will function properly. If the default background is changed, MaterialButton cannot guarantee well-defined behavior.

无论如何，我为你设计了一个普通的 Androidx Button 的自定义 Background drawable。

在您的 activity_main.xml 中，您使用属性 android:background="@drawable/custom_shape" 定义 Button 您将插入我们稍后定义的 drawable：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:layout_margin="10dp">

    <androidx.appcompat.widget.AppCompatButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Collect"
        android:background="@drawable/custom_shape"
        android:textColor="#ffffff"/>

</RelativeLayout>

这里提到的 drawable 叫做 custom_shape.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#ffc9a1"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>

    <item android:bottom="5dp">
        <shape>
            <solid android:color="#f7791e" />
            <corners android:radius="10dp"/>
        </shape>
    </item>
</layer-list>

最终结果看起来非常接近您想要的按钮：

如何在 Material 按钮的底部添加描边？

How to add stroke to just bottom side of Material button?

android

material-design

materialbutton