如何为材质按钮设置渐变背景?

Pav*_*rma 14 android android-button android-drawable material-components-android

我目前正在使用此代码,但背景没有改变。它仍然显示强调色作为背景。

<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"/>
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

我目前正在使用

材料组件版本:1.0.0-rc02

Gab*_*tti 21

要使用自定义可绘制背景,MaterialButton您可以使用该android:background属性:

<MaterialButton
    app:backgroundTint="@null"
    android:background="@drawable/bkg_button_gradient"
    ... />
Run Code Online (Sandbox Code Playgroud)

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

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

对于较低版本的材料组件库,您必须使用AppCompatButton.


grr*_*ore 7

LE:从我的角度来看,我建议您使用ButtonAppCompatButton

尝试这个:

渐变.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>
Run Code Online (Sandbox Code Playgroud)

按钮.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" />
Run Code Online (Sandbox Code Playgroud)

结果:

结果

随着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>
Run Code Online (Sandbox Code Playgroud)

结果:

结果

  • 对于材质 btn,不要忘记添加 ```app:backgroundTint="@null"``` (2认同)