android - How to set a gradient background in a Material Button from Material Components?

Question

I've been trying to set a gradient background in a Material Button from Material Components for Android, but it's not working. So, how to set a gradient background in a Material Button?

Answer 1

从版本开始，1.2.0-alpha06您可以android:background使用MaterialButton.

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

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

只是一些关于MaterialButton.

• 目前backgroundTint仍然是默认的 MaterialButton 样式。
  如果您使用的是 custom android:background，则必须确保将其设为空 backgroundTint（app:backgroundTint="@null"或app:backgroundTint="@empty"），以避免自定义背景不会被着色。
• 使用自定义android:background默认MaterialShapeDrawable不使用。未设置某些特征，如笔触、形状外观、波纹（因为它们与MaterialShapeDrawable. 您必须为他们提供您的自定义背景。

Answer 2

从文档中MaterialButton：

不要使用该android:background属性。MaterialButton 管理自己的背景drawable，设置新的背景意味着MaterialButton不能再保证它引入的新属性能够正常工作。如果更改默认背景，MaterialButton则无法保证良好定义的行为。

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

因此，不支持将渐变背景与 MaterialButton 一起使用的方法。

Answer 3

androidx.appcompat.widget.AppCompatButton如果您使用 Material Theme 来应用背景渐变，请使用它，因为 Material Button 尚不支持它。

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

选择器_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" />

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>

Answer 5

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>