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

Question

我目前正在使用这段代码，但是背景没有改变。它仍然显示accent-color作为背景。

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

渐变蓝色.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 版本: 1.0.0-rc02

- Pavan Varma

---

gradiant_blue是什么？你应该发布它的代码。 - grrigore

@Pavan 你可以查看这个链接。希望对你有所帮助。 - MashukKhan

Answer 1

要在MaterialButton中使用自定义可绘制背景，可以使用android:background属性：

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

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

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

在较低版本的Material Components Library中，您必须使用AppCompatButton。

- Gabriele Mariotti

---

兄弟，这是工作... 但它没有圆角半径... - Ucdemir

谢谢你提醒我关于色调的事情。 - Marcell

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

结果:

在改变了 圆角半径 后, 将 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>

结果：

- grrigore

---

你使用的是哪个版本？我尝试了你的代码，但还是不起作用。 - Pavan Varma

背景没有改变吗？ - grrigore

你能否尝试一下使用以下代码 - " 'implementation 'com.google.android.material:material:1.0.0-rc02' " - Pavan Varma

没有错误，背景也没有改变。即使在预览模式下也没有改变，在实际设备上也没有改变。 - Pavan Varma

对于材料按钮，请不要忘记添加app:backgroundTint="@null"。 - Fortran

Answer 3

请阅读材料按钮的文档，从这里开始。

文档中写道： “对于填充按钮，您的主题的colorPrimary提供了组件的默认背景颜色，文本颜色为colorOnPrimary。对于未填充的按钮，您的主题的colorPrimary提供了组件的默认文本颜色，默认情况下背景颜色是透明的。”

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

以下属性已经被提到： app:backgroundTint app:backgroundTintMode

- Kinjal Rathod

---

我需要设置渐变背景。background-tint 不支持可绘制对象。 - Pavan Varma

Answer 4

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

Theme.AppCompat.Light.NoActionBar

而不是

Theme.MaterialComponents.Light.NoActionBar

- Emmanuel Wamuo

---

如果您的主题没有继承自MaterialComponents，则无法使用Material Button。 - ysfcyln

com.google.android.material.button.MaterialButton 只能在 materialComponents 主题而不是 appcompat 主题下使用。 - akshay bhange