使用 MaterialButton 和 shapeAppearance 的渐变颜色

Question

我想做一个像这样的 Button ：

我尝试使用 style 和 shapeAppearance ：

<style name="ShapeAppearance.Button" parent="ShapeAppearance.MaterialComponents">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopLeft">@dimen/button_corner_radius</item>
    <item name="cornerSizeTopRight">5dp</item>
    <item name="cornerSizeBottomRight">@dimen/button_corner_radius</item>
    <item name="cornerSizeBottomLeft">5dp</item>
</style>

<dimen name="button_corner_radius">40dp</dimen>

我像这样在我的 MaterialButton 中应用样式：

app:shapeAppearance="@style/ShapeAppearance.Button"

结果是：

现在，我试着放一个线性渐变:

#DF2D48 @ 0.0
#D72D46@0.2
#AF223B @ 0.5
#AC2139@1.0

例如：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#DF2D48"
        android:centerColor="#D72D46"
        android:endColor="#AC2139"
        android:angle="360" />
</shape>

我在我的形状样式中应用它：

<item name="android:background">@drawable/test</item>

但是结果是一样的。为什么？

Answer 1

问题是因为我试图为 MaterialButton 设置背景，但这是不可能的。

最后，我用了这个背景的经典 Button :

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

    <gradient
        android:startColor="#D72D46"
        android:centerColor="#AF223B"
        android:endColor="#AC2139"
        android:angle="360" />

    <corners
        android:bottomRightRadius="40dp"
        android:bottomLeftRadius="5dp"
        android:topLeftRadius="40dp"
        android:topRightRadius="5dp" />

</shape>

Answer 2

关于MaterialButton：

它使用 MaterialShapeDrawable 来应用 shapeAppearance（形状和笔划）。
当前 (1.3.0) MaterialShapeDrawable 不支持 渐变背景。
仅从开始支持android:background属性。但是使用 android:background MaterialButton 删除默认 MaterialShapeDrawable 背景和 shapeAppearance 未应用。
如果您使用的是 MaterialComponents 主题，<Button /> 和 [=] 之间没有区别 25=] 因为在运行时将 Button 替换为 MaterialButton。

您有 2 个解决方案：

使用带有自定义圆角和渐变颜色的自定义形状，并将其应用为 android:background 到 MaterialButton
使用自定义形状并将其应用于 AppCompatButton。

与MaterialButton:

    <com.google.android.material.button.MaterialButton
        app:backgroundTint="@null"
        android:background="@drawable/gradient_shape"
        />

确保取消 backgroundTint（app:backgroundTint="@null" 或 app:backgroundTint="@empty"），以避免自定义背景不着色。
注意： 至少需要 1.2.0-alpha06.

版本

与AppCompatButton:

  <androidx.appcompat.widget.AppCompatButton
      android:background="@drawable/gradient_shape"/>

形状如下：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="0"
        android:endColor="...."
        android:startColor="...." />

    <corners android:topLeftRadius="40dp"
        android:bottomRightRadius="40dp"
        android:topRightRadius="5dp"
        android:bottomLeftRadius="5dp"
        />

</shape>

Answer 3

渐变颜色使用 Material 按钮：

Material按钮： 要使用具有 MaterialButton 背景色调属性的自定义可绘制背景，参考代码应为空： app:backgroundTint="@null"

 <com.google.android.material.button.MaterialButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:clickable="true"
                android:focusable="true"
                android:text="@string/button_enabled"

                app:backgroundTint="@null"
                android:background="@drawable/gradient_1"
               />

渐变形状： res/drawable/gradient_1.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="#DD8E54E9"
        android:startColor="#CC225AE0" />
        <corners android:topLeftRadius="18dp"
            android:bottomRightRadius="18dp"
            android:topRightRadius="5dp"
            android:bottomLeftRadius="5dp"
            />
        <stroke
            android:width="6dp"
            android:color="#007879E8" />
</shape>

使用 MaterialButton 和 shapeAppearance 的渐变颜色

Gradient color using MaterialButton and shapeAppearance

android

android-button

android-styles

material-components-android

material-components