Android MaterialButton设置图标及背景色不生效问题

你遇到的问题是MaterialButton使用中的典型错误，核心原因是违反了Material组件的属性使用规则：

• 禁止给MaterialButton在XML中设置android:background属性：手动赋值会直接打断组件内部的渲染逻辑，包括图标绘制、水波纹效果、背景着色都会失效，这就是你设置icon后不显示、backgroundTint被主题色覆盖的根本原因。
• 不要使用android:backgroundTint属性修改背景色：MaterialButton的背景着色由组件自有属性控制，框架层的backgroundTint会被组件内部样式覆盖。
• 不要把样式parent改为Widget.AppCompat.Button：修改后本质是把MaterialButton降级成了普通AppCompat按钮，组件自带的icon渲染、背景着色逻辑全部失效，自然无法正常修改背景色。

正确实现步骤 #

1. 修改自定义按钮样式 #

删除原有样式里的android:background、android:backgroundTint两个错误属性，替换为MaterialButton专属配置，参考代码如下：

<style name="orangeButtonStyle" parent="Widget.MaterialComponents.Button">
    <item name="android:fontFamily">@font/semi_bold</item>
    <item name="android:textColor">@color/white</item>
    <!-- 用组件自带的backgroundTint设置背景色，不要加android:前缀 -->
    <item name="backgroundTint">@color/orange</item>
    <!-- 如果你原来的orange_button_bg是带圆角的形状，直接用cornerRadius设置圆角值即可，和原drawable数值保持一致 -->
    <item name="cornerRadius">8dp</item>
    <item name="android:textSize">14sp</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:layout_height">56dp</item>
    <item name="android:layout_width">match_parent</item>
    <!-- 图标通用配置可以直接写在样式里，减少布局重复代码 -->
    <item name="iconTint">@color/white</item>
    <item name="iconGravity">textStart</item>
    <item name="iconPadding">8dp</item> <!-- 按需调整图标和文字的间距 -->
</style>

如果你需要的按钮背景包含渐变、多状态描边这类复杂效果，不要在XML里给android:background赋值，可以将样式parent改为Widget.MaterialComponents.Button.UnelevatedButton，通过shapeAppearanceOverlay属性自定义形状，或者在代码中调用setBackgroundResource()方法设置背景，避免打断XML阶段的图标渲染逻辑。

2. 调整布局中的按钮代码 #

布局中不需要额外添加背景相关属性，保留必要的约束和图标配置即可：

<com.google.android.material.button.MaterialButton
    android:id="@+id/fb_login_button"
    style="@style/orangeButtonStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/side_margin"
    android:layout_marginTop="60dp"
    android:layout_marginEnd="@dimen/side_margin"
    android:layout_marginBottom="20dp"
    android:text="@string/continue_with_facebook"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@id/login_link"
    app:icon="@drawable/fb_icon"/>

额外注意事项 #

• 确保你的应用主主题继承自Theme.MaterialComponents系列主题，如果项目用的是AppCompat主题，需要给按钮单独添加android:theme="@style/Theme.MaterialComponents.Light"属性，否则组件属性会失效。
• 如果图标显示尺寸不符合预期，可以添加app:iconSize属性指定图标大小，单位为dp。

内容的提问来源于stack exchange，提问作者MADi