如何在Material组件中使用渐变背景设置Material按钮？

Question

我一直在尝试在 Android 的 Material Components 中为 Material 按钮设置渐变背景，但是它没有生效。 那么，如何在 Material 按钮中设置渐变背景呢？

- GianMS

---

目前无法轻松更改背景颜色为渐变色。您唯一能够实现这一点的方式就是创建自己的渐变 drawable 并将其设置到材质按钮上。 - Archie G. Quiñones

Answer 1

从版本1.2.0-alpha06开始，您可以在MaterialButton中使用android:background属性。

<MaterialButton
    app:backgroundTint="@null"
    android:background="@drawable/button_gradient"
    ... />

否则，如果您无法使用1.2.0-alpha06或更高版本，则必须使用AppCompatButton组件。

以下是关于MaterialButton的一些提示：

- 目前，backgroundTint仍然是默认的MaterialButton样式。 如果您正在使用自定义android:background，则必须确保将backgroundTint null out（使用app:backgroundTint="@null"或app:backgroundTint="@empty"），以避免自定义背景不被着色。 - 如果使用自定义android:background，则不会使用默认的MaterialShapeDrawable。某些功能（例如描边、形状外观、涟漪）未设置（因为它们与MaterialShapeDrawable相关）。您必须使用自定义背景提供它们。

- Gabriele Mariotti

---

不得不回来看一下backgroundTint的提示。这很关键！我在我的按钮上放了一个渐变，但颜色不对。感谢您的指点。 - gMale

我在一个按钮上使用了这种方法，结果失去了涟漪颜色效果。你知道如何保存涟漪效果吗？ - StayCool

@StayCool 使用自定义背景时，您正在删除处理涟漪效果的ShapeMaterialDrawable。 您需要将自定义RippleDrawable应用于您的背景。 - Gabriele Mariotti

@GabrieleMariotti，我已经将我的drawable_background.xml从仅包含形状的文件更改为包含<ripple> xml，其中包含形状和涟漪项:) 运行得很好，谢谢！ - StayCool

Answer 2

根据MaterialButton的文档:

不要使用android:background属性。 MaterialButton管理自己的背景可绘制对象，并设置新背景意味着MaterialButton无法再保证其引入的新属性将正常工作。如果更改默认背景，则MaterialButton无法保证定义良好的行为。

修改按钮背景的唯一支持方法是将颜色值设置为app:backgroundTint属性。不幸的是，这里也不支持渐变；您只能使用简单的颜色值或ColorStateList。

因此，没有受支持的方法可以在MaterialButton中使用渐变背景。

- Ben P.

Answer 3

如果您使用Material Theme并希望应用背景渐变，请使用androidx.appcompat.widget.AppCompatButton，因为Material Button目前还不支持此功能。

对于背景渐变，请在drawable文件夹中创建3个新资源：

selector_btn.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- disabled state -->
    <item android:drawable="@drawable/btn_gradient_inactive" android:state_enabled="false" />
    <item android:drawable="@drawable/btn_gradient_active" />
</selector>

btn_gradient_inactive.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#01579B"
        android:endColor="#1A237E"
        android:angle="0" />
    <corners android:radius="5dp"/> </shape>

btn_gradient_active.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#2196F3"
        android:endColor="#3F51B5"
        android:angle="0" />
    <corners android:radius="5dp"/>
</shape>

在你的 styles.xml 文件中：

<style name="BtnStyle" parent="Widget.AppCompat.Button.Borderless">
    <item name="android:layout_marginStart">35dp</item>
    <item name="android:layout_marginEnd">35dp</item>
    <item name="android:background">@drawable/selector_btn_gradient</item>
    <item name="android:textColor">@color/selector_text_color</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:textSize">14sp</item>
</style>

在你的layout.xml文件中：

<androidx.appcompat.widget.AppCompatButton
    android:id="@+id/my_btn_id"
    style="@style/BtnStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

- Dimas Mendes

Answer 4

我找到了这个解决方案。

<com.google.android.material.button.MaterialButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@drawable/selector_gradient_example"
      app:backgroundTint="@null" />

选择器渐变示例

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/banana_yellow">
    <item android:state_enabled="true">
        <ripple android:color="@color/banana_yellow">
            <item>
                <shape android:shape="rectangle">
                    <gradient android:angle="135" android:endColor="@color/banana_yellow" android:startColor="@color/main_yellow" />
                </shape>
            </item>
        </ripple>
    </item>
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <gradient android:angle="315" android:endColor="#ede0be" android:startColor="#e0bf7e" />
        </shape>
    </item>
</selector>

- Иван Кононенко

---

你好，欢迎来到StackOverflow！答案不应该只是简单的代码片段。你能详细说明一下为什么以及如何使用这段代码来回答问题吗？ - Richard-Degenne

这个解决方案可行，因为即使使用drawable设置了app:backgroundTint，它也没有任何效果。将背景设置为drawable渐变和应用程序背景色调，可以使渐变在按钮上起作用。 - 89n3ur0n

Answer 5

在XML中删除backgroundTint属性对我有效。

- Sriraksha

Answer 6

btn_gradient.xml

    <?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#469FED"
        android:angle="90"
        android:endColor="#2AC88D"/>
    <corners android:radius="4dp"/>
</shape>

使用此代码替代按钮：

    <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:clickable="true"
                android:focusable="true"
                android:background="@drawable/btn_gradient">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:minHeight="40dp"
                    android:background="?attr/selectableItemBackground"
                    android:padding="5dp"
                    android:text="send" />
 </RelativeLayout>

- m.sajjad.s