如何在MaterialButtonToggleGroup中实现自定义形状按钮？

核心问题原因 #

你当前使用普通Button组件而非Material Design的MaterialButton，导致MaterialButtonToggleGroup的样式控制逻辑失效；同时app:backgroundTint会覆盖自定义drawable的颜色，且MaterialButton不推荐直接通过android:background设置背景（会破坏ToggleGroup的选中状态联动）。

具体修复步骤 #

1. 替换按钮组件为MaterialButton

将布局中所有<Button>替换为<com.google.android.material.button.MaterialButton>，确保与ToggleGroup的样式逻辑兼容。

2. 通过ShapeAppearance实现圆形按钮

MaterialButton通过shapeAppearanceOverlay定义自定义形状，无需直接设置android:background。

在res/values/styles.xml中定义圆形形状的overlay：

<style name="ShapeAppearance.RoundButton" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item> <!-- 50%实现正圆形 -->
</style>

3. 定义带状态切换的按钮样式

创建包含选中/未选中状态的按钮样式，控制背景色、边框色：

<style name="RoundToggleButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearance.RoundButton</item>
    <item name="backgroundTint">@color/toggle_button_background</item>
    <item name="strokeColor">@color/toggle_button_stroke</item>
    <item name="strokeWidth">1dp</item>
    <item name="android:layout_width">50dp</item>
    <item name="android:layout_height">50dp</item>
</style>

创建对应的颜色selector：

• res/color/toggle_button_background.xml（背景色切换）：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/white" android:state_checked="false"/>
    <item android:color="@color/your_selected_color" android:state_checked="true"/>
</selector>

• res/color/toggle_button_stroke.xml（边框色切换）：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/black" android:state_checked="false"/>
    <item android:color="@color/your_selected_stroke_color" android:state_checked="true"/>
</selector>

4. 修改最终布局

将ToggleGroup中的按钮替换为MaterialButton并应用自定义样式：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FirstFragment">

    <com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/my_toggle_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:selectionRequired="false"
        app:singleSelection="true">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/c_button"
            style="@style/RoundToggleButton"
            android:layout_weight="1"
            android:text="C"
            app:checked="true"/> <!-- 默认选中 -->

        <com.google.android.material.button.MaterialButton
            android:id="@+id/d_button"
            style="@style/RoundToggleButton"
            android:layout_weight="1"
            android:text="D"/>

        <com.google.android.material.button.MaterialButton
            android:id="@+id/e_button"
            style="@style/RoundToggleButton"
            android:layout_weight="1"
            android:text="E"/>

    </com.google.android.material.button.MaterialButtonToggleGroup>
</androidx.constraintlayout.widget.ConstraintLayout>

额外说明 #

• 不要直接设置android:background，否则会破坏MaterialButtonToggleGroup的选中状态样式联动；
• 使用shapeAppearanceOverlay的cornerSize="50%"可确保按钮为正圆形，不受宽高影响；
• 通过颜色selector可实现选中/未选中的样式自动切换，无需额外编写点击逻辑。

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