Android问题：MaterialButtonToggleGroup中的按钮无法显示

问题描述 #

尝试在布局中使用MaterialButtonToggleGroup添加两个按钮，但按钮在应用和Android Studio设计视图中均无法显示，仅能看到"Code"文本和分隔线。已试过将按钮移至不同布局、修改宽高属性、调整可见性，均无效果。

依赖配置（build.gradle） #

implementation 'com.google.android.material:material:1.6.1'

原布局代码 #

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >

    <data>
        <import type="android.view.View" />
        <import type="androidx.core.content.ContextCompat" />
        <import type="android.widget.Button"/>
    </data>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/backgroundWindow">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="16dp"
                android:layout_marginTop="16dp"
                app:cardBackgroundColor="@color/backgroundCollection"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintEnd_toEndOf="parent">

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:id="@+id/textView_code"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Code"
                        android:textSize="18sp"
                        android:layout_marginTop="@dimen/margin_8dp"
                        android:layout_marginStart="@dimen/margin_8dp"
                        android:textColor="@color/black"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                    <include layout="@layout/layout_seperator"
                        app:layout_constraintTop_toBottomOf="@id/textView_code"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"/>

                    <com.google.android.material.button.MaterialButtonToggleGroup
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        app:checkedButton="@id/b1"
                        app:selectionRequired="true"
                        app:singleSelection="true"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toBottomOf="@id/textView_code"
                        app:layout_constraintEnd_toEndOf="parent">

                        <Button
                            style="?attr/materialButtonOutlinedStyle"
                            android:id="@+id/b1"
                            android:layout_width="0dp"
                            android:layout_weight="1"
                            android:layout_height="wrap_content"
                            android:text="OPT1" />

                        <Button
                            style="?attr/materialButtonOutlinedStyle"
                            android:id="@+id/b2"
                            android:layout_width="0dp"
                            android:layout_weight="1"
                            android:layout_height="wrap_content"
                            android:text="OPT2" />

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

                </androidx.constraintlayout.widget.ConstraintLayout>

            </androidx.cardview.widget.CardView>

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.core.widget.NestedScrollView>

</layout>

解决步骤 #

1. 修复布局层级冲突 #

原布局中，分隔线和MaterialButtonToggleGroup的顶部约束都依赖textView_code，导致ToggleGroup被分隔线覆盖或布局计算异常：

• 给分隔线添加id：

<include 
    android:id="@+id/layout_seperator"
    layout="@layout/layout_seperator"
    app:layout_constraintTop_toBottomOf="@id/textView_code"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"/>

• 修改ToggleGroup的顶部约束为依赖分隔线：

app:layout_constraintTop_toBottomOf="@id/layout_seperator"

2. 替换按钮类型为MaterialButton #

原生Button与MaterialButtonToggleGroup兼容性较差，即使应用Material样式也可能出现显示问题，将<Button>替换为<com.google.android.material.button.MaterialButton>：

<com.google.android.material.button.MaterialButton
    style="?attr/materialButtonOutlinedStyle"
    android:id="@+id/b1"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:text="OPT1" />

<com.google.android.material.button.MaterialButton
    style="?attr/materialButtonOutlinedStyle"
    android:id="@+id/b2"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:text="OPT2" />

3. 明确ToggleGroup排列方向 #

给MaterialButtonToggleGroup添加android:orientation="horizontal"，确保按钮水平排列且权重属性生效：

<com.google.android.material.button.MaterialButtonToggleGroup
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    ... />

最终修复后的核心代码片段 #

<TextView
    android:id="@+id/textView_code"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Code"
    android:textSize="18sp"
    android:layout_marginTop="@dimen/margin_8dp"
    android:layout_marginStart="@dimen/margin_8dp"
    android:textColor="@color/black"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<include 
    android:id="@+id/layout_seperator"
    layout="@layout/layout_seperator"
    app:layout_constraintTop_toBottomOf="@id/textView_code"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"/>

<com.google.android.material.button.MaterialButtonToggleGroup
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:checkedButton="@id/b1"
    app:selectionRequired="true"
    app:singleSelection="true"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/layout_seperator"
    app:layout_constraintEnd_toEndOf="parent">

    <com.google.android.material.button.MaterialButton
        style="?attr/materialButtonOutlinedStyle"
        android:id="@+id/b1"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="OPT1" />

    <com.google.android.material.button.MaterialButton
        style="?attr/materialButtonOutlinedStyle"
        android:id="@+id/b2"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="OPT2" />

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

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