Android Studio：Button自定义边框颜色被Primary颜色覆盖如何解决

问题背景 #

为Button设置了带自定义stroke的shape样式，但边框却显示为主题的Primary颜色，相同样式在EditText上可正常生效。当前使用的主题为Theme.MaterialComponents.Light.NoActionBar。

自定义shape代码（res/drawable/custom_button_shape.xml）：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="30dip"/>
    <stroke android:width="1dp" android:color="@color/dark_onBackground"/>
    <solid android:color="?attr/customSolidColor"/>
</shape>

主题样式代码（res/values/styles.xml）：

<!-- Base application theme. -->
<style name="Theme.LightMode" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- Primary brand color. -->
    <item name="colorPrimary">@color/primary</item>
    <item name="BackgroundPrimary">@color/background</item>

    <item name="colorPrimaryVariant">@color/primary</item>
    <item name="colorPrimaryContainer">@color/primaryContainer</item>
    <item name="colorOnPrimary">@color/onPrimary</item>
    <!-- Secondary brand color. -->
    <item name="colorSecondary">@color/secondary</item>
    <item name="colorSecondaryVariant">@color/secondary</item>
    <item name="colorSecondaryContainer">@color/secondaryContainer</item>
    <item name="colorOnSecondaryContainer">@color/onSecondaryContainer</item>
    <item name="colorOnSecondary">@color/onSecondary</item>
    <!-- Status bar color. -->
    <item name="android:statusBarColor">@color/orange</item>
    <!-- Customize your theme here. -->
    <item name="customStrokeColor">@color/onBackground</item>
    <item name="customSolidColor">@android:color/transparent</item>
</style>

<style name="Theme.LightMode.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

<style name="Theme.ChatGPTDeneme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<style name="Theme.ChatGPTDeneme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

<style name="Widget.NavigationView.Custom" parent="Widget.Design.NavigationView">
    <item name="itemTextColor">@color/primaryContainer</item>
    <item name="itemIconTint">@color/primaryContainer</item>
</style>

问题原因 #

使用Material Components主题时，默认的MaterialButton会自动绑定主题的colorPrimary作为边框和背景色调，直接覆盖了自定义shape中的stroke颜色，而EditText不受该默认行为影响。

解决方案 #

方案1：使用原生Android Button #

在布局中明确指定使用android.widget.Button而非默认的MaterialButton，让自定义shape样式完全生效：

<android.widget.Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_button_shape"
    android:text="自定义边框按钮" />

方案2：自定义MaterialButton样式，禁用默认色调覆盖 #

若需继续使用MaterialButton，可创建自定义样式关闭默认背景色调控制：

1. 在styles.xml中添加自定义样式：

<style name="CustomMaterialButton" parent="Widget.MaterialComponents.Button">
    <!-- 绑定自定义背景shape -->
    <item name="background">@drawable/custom_button_shape</item>
    <!-- 关键：禁用默认背景色调，避免覆盖shape颜色 -->
    <item name="backgroundTint">@null</item>
    <!-- 可选：自定义文字颜色等其他属性 -->
    <item name="android:textColor">@color/your_text_color</item>
</style>

2. 在布局中应用该样式：

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/CustomMaterialButton"
    android:text="MaterialButton自定义边框" />

方案3：使用MaterialButton原生边框属性（替代自定义shape） #

直接利用MaterialButton内置样式，无需自定义shape，更贴合Material Design规范：

1. 在styles.xml中创建OutlinedButton样式：

<style name="CustomOutlinedButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="strokeColor">@color/dark_onBackground</item>
    <item name="strokeWidth">1dp</item>
    <item name="cornerRadius">30dp</item>
    <item name="backgroundTint">@android:color/transparent</item>
</style>

2. 布局中使用：

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/CustomOutlinedButton"
    android:text="Material内置边框按钮" />

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