如何自定义Material Toggle Button实现指定圆角单选切换效果

解决方案 #

你的问题核心是三个配置错误：

• 给每个按钮单独设置了固定的背景色、文字色，无法跟随选中状态自动切换
• 给所有按钮都设置了全圆角，且没有取消按钮之间的默认间距，无法实现整体圆角矩形的效果
• 使用了普通Button而非MaterialButton，部分Material属性不会生效

第一步：添加状态选择器

在res/color目录下新建两个颜色选择器文件：

1. toggle_button_bg.xml 控制按钮背景色切换

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

2. toggle_button_text_color.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="true" />
    <item android:color="@color/black" android:state_checked="false" />
</selector>

第二步：修改布局XML

替换原有ToggleGroup相关代码，你之前定义的CustomShapeAppearance样式可以直接删除：

<com.google.android.material.button.MaterialButtonToggleGroup
    android:id="@+id/outdoor_toggle_buttonGroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    app:checkedButton="@+id/btn_walking"
    app:selectionRequired="true"
    app:itemSpacing="0dp"
    android:layout_marginTop="@dimen/_5sdp"
    android:layout_marginBottom="@dimen/_20sdp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent">

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_walking"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/walking"
        android:textAllCaps="false"
        android:backgroundTint="@color/toggle_button_bg"
        android:textColor="@color/toggle_button_text_color"
        style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
        app:cornerRadiusTopLeft="20dp"
        app:cornerRadiusBottomLeft="20dp"/>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_running"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/running"
        android:textAllCaps="false"
        android:backgroundTint="@color/toggle_button_bg"
        android:textColor="@color/toggle_button_text_color"
        style="@style/Widget.MaterialComponents.Button.UnelevatedButton"/>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_cycling"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/cycling"
        android:textAllCaps="false"
        android:backgroundTint="@color/toggle_button_bg"
        android:textColor="@color/toggle_button_text_color"
        style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
        app:cornerRadiusTopRight="20dp"
        app:cornerRadiusBottomRight="20dp"/>

</com.google.android.material.button.MaterialButtonToggleGroup>

说明

• app:itemSpacing="0dp" 用于取消按钮之间的默认空隙，让整个组件看起来是一个完整的容器
• 仅给首尾两个按钮设置对应方向的圆角，即可实现整体圆角矩形的效果
• UnelevatedButton样式可以取消按钮的默认阴影，效果更扁平化，贴合预期设计
• app:selectionRequired="true" 可以避免出现所有按钮都未选中的情况

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