如何为 Material 按钮设置渐变背景？

Question

我目前正在使用此代码，但背景不是 changing.It 仍然显示强调色作为背景。

<com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello"
    app:cornerRadius="32dp"
    android:background="@drawable/gradiant_blue"/>

gradiant_blue.xml

<shape
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">

   <gradient
       android:angle="-45"
       android:startColor="#2979FF"
       android:endColor="#7C4DFF"/>
</shape>

我目前正在使用

Material Components version : 1.0.0-rc02

Answer 1

请阅读 Material 按钮的文档，来自 here

它说， "For filled buttons, your theme’s colorPrimary provides the default background color of the component, and the text color is colorOnPrimary. For unfilled buttons, your theme’s colorPrimaryprovides the default text color of the component, and the background color is transparent by default."

我认为这就是您看到其他颜色（强调色）的原因，另外请检查设置背景色的属性。

提到了以下属性：

app:backgroundTint

app:backgroundTintMode

Answer 2

LE: 在我看来我建议你使用 Button 或 AppCompatButton.

试试这个：

gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="0"
        android:endColor="#027FEE"
        android:startColor="#2CC6F2" />
</shape>

button.xml

<!-- replace MaterialButton with Button or AppCompatButton -->
<com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/gradient"
    android:text="Hello" />

结果：

用 corner radius 将 gradient.xml 更改为：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="0"
        android:endColor="#027FEE"
        android:startColor="#2CC6F2" />
    <corners android:radius="32dp"/>
</shape>

结果：

Answer 3

要设置背景，您需要扩展基本主题

Theme.AppCompat.Light.NoActionBar

而不是

Theme.MaterialComponents.Light.NoActionBar

Answer 4

要使用带有 MaterialButton 的自定义可绘制背景，您可以使用 android:background 属性：

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

注意：它需要至少版本1.2.0-alpha06

目前添加 app:backgroundTint="@null" 非常重要，以避免默认情况下自定义背景不使用 backgroundTint 颜色着色。

对于较低版本的 Material 组件库，您必须使用 AppCompatButton.

如何为 Material 按钮设置渐变背景？

How to set a gradient background to a Material Button?

android

android-button

android-drawable

material-components-android