如何在 Material 组件的 Material 按钮中设置渐变背景?
How to set a gradient background in a Material Button from Material Components?
我一直在尝试为 Android 的 Material 组件的 Material 按钮设置渐变背景,但它不起作用。
那么,如何在Material Button中设置渐变背景呢?
来自the documentation for MaterialButton
:
Do not use the android:background
attribute. MaterialButton manages its own background drawable, and setting a new background means MaterialButton
can no longer guarantee that the new attributes it introduces will function properly. If the default background is changed, MaterialButton
cannot guarantee well-defined behavior.
唯一支持的修改按钮背景的方法是为 app:backgroundTint
属性设置颜色值。不幸的是,这里也不支持渐变;您只能使用简单的颜色值或 ColorStateList
.
因此,不支持通过 MaterialButton 使用渐变背景。
如果您正在使用 Material 主题,请使用 androidx.appcompat.widget.AppCompatButton
以应用背景渐变,因为 Material 按钮尚不支持它。
对于背景渐变,在 drawable
文件夹中创建 3 个新资源:
selector_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" />
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>
从版本 1.2.0-alpha06
开始,您可以在 MaterialButton
.
中使用 android:background
属性
<MaterialButton
app:backgroundTint="@null"
android:background="@drawable/button_gradient"
... />
否则,如果您不能使用 1.2.0-alpha06 或更高版本,则必须使用 AppCompatButton
组件。
关于 MaterialButton
的一些提示。
- 目前
backgroundTint
仍然是默认的 MaterialButton 样式。
如果您使用的是自定义 android:background
,您 必须确保将 backgroundTint
置空(app:backgroundTint="@null"
或 app:backgroundTint="@empty"
),以避免自定义背景不着色。
- 使用自定义
android:background
不使用默认 MaterialShapeDrawable
。未设置笔划、形状外观、波纹等某些功能(因为它们与 MaterialShapeDrawable
相关)。您必须向他们提供您的自定义背景。
我找到了这个解决方案。
<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" />
selector_gradient_example
<?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>
删除 xml 中的 backgroundTint 属性对我有用。
我一直在尝试为 Android 的 Material 组件的 Material 按钮设置渐变背景,但它不起作用。 那么,如何在Material Button中设置渐变背景呢?
来自the documentation for MaterialButton
:
Do not use the
android:background
attribute. MaterialButton manages its own background drawable, and setting a new background meansMaterialButton
can no longer guarantee that the new attributes it introduces will function properly. If the default background is changed,MaterialButton
cannot guarantee well-defined behavior.
唯一支持的修改按钮背景的方法是为 app:backgroundTint
属性设置颜色值。不幸的是,这里也不支持渐变;您只能使用简单的颜色值或 ColorStateList
.
因此,不支持通过 MaterialButton 使用渐变背景。
如果您正在使用 Material 主题,请使用 androidx.appcompat.widget.AppCompatButton
以应用背景渐变,因为 Material 按钮尚不支持它。
对于背景渐变,在 drawable
文件夹中创建 3 个新资源:
selector_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" />
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>
从版本 1.2.0-alpha06
开始,您可以在 MaterialButton
.
android:background
属性
<MaterialButton
app:backgroundTint="@null"
android:background="@drawable/button_gradient"
... />
否则,如果您不能使用 1.2.0-alpha06 或更高版本,则必须使用 AppCompatButton
组件。
关于 MaterialButton
的一些提示。
- 目前
backgroundTint
仍然是默认的 MaterialButton 样式。
如果您使用的是自定义android:background
,您 必须确保将backgroundTint
置空(app:backgroundTint="@null"
或app:backgroundTint="@empty"
),以避免自定义背景不着色。 - 使用自定义
android:background
不使用默认MaterialShapeDrawable
。未设置笔划、形状外观、波纹等某些功能(因为它们与MaterialShapeDrawable
相关)。您必须向他们提供您的自定义背景。
我找到了这个解决方案。
<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" />
selector_gradient_example
<?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>
删除 xml 中的 backgroundTint 属性对我有用。