Android中如何为RadioGroup添加边框及文本（Kotlin/Java实现）

我想要创建一个带边框和文本说明的RadioGroup，效果类似Material Design中的OutlinedBox样式，设计参考如下：

我已经创建了如下背景drawable文件（input_border.xml）：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners android:radius="4dp" />
    <stroke android:width="2dp" android:color="@color/gainsboro" />
</shape>

布局代码如下：

<RadioGroup android:id="@+id/radioGroupComplete" 
    android:checkedButton="@id/radioButtonCompleteNo" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginHorizontal="16dp" 
    android:layout_marginVertical="8dp" 
    android:padding="8dp" 
    android:orientation="horizontal" 
    android:background="@drawable/input_border">

    <RadioButton android:id="@+id/radioButtonCompleteYes" 
        android:layout_width="0dp" 
        android:layout_height="match_parent" 
        android:layout_weight="1" 
        android:text="@string/todo_form_yes"/>

    <RadioButton android:id="@+id/radioButtonCompleteNo" 
        android:layout_width="0dp" 
        android:layout_height="match_parent" 
        android:layout_weight="1" 
        android:text="@string/todo_form_no"/>
</RadioGroup>

优化方案（实现贴合参考图的效果） #

1. 完善背景状态选择器

替换原有input_border.xml为状态选择器，实现选中时边框和背景的变化：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <corners android:radius="4dp" />
            <stroke android:width="2dp" android:color="@color/your_primary_color" />
            <solid android:color="@color/primary_light" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="4dp" />
            <stroke android:width="2dp" android:color="@color/gainsboro" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</selector>

2. 自定义RadioButton样式

隐藏默认单选按钮图标，调整文本和布局：
在res/values/styles.xml中添加样式：

<style name="OutlinedRadioButton" parent="Widget.MaterialComponents.CompoundButton.RadioButton">
    <item name="android:button">@null</item>
    <item name="android:gravity">center</item>
    <item name="android:textColor">@color/radio_text_selector</item>
    <item name="android:paddingVertical">12dp</item>
</style>

创建文本颜色选择器res/color/radio_text_selector.xml：

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

3. 添加顶部标题（实现OutlinedBox的浮动标签）

使用Material组件的TextInputLayout包裹RadioGroup，原生支持浮动标题和边框：

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="16dp"
    android:layout_marginVertical="8dp"
    android:hint="@string/your_title_hint"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">

    <RadioGroup 
        android:id="@+id/radioGroupComplete" 
        android:checkedButton="@id/radioButtonCompleteNo" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:orientation="horizontal" 
        android:padding="8dp">

        <RadioButton 
            android:id="@+id/radioButtonCompleteYes" 
            android:layout_width="0dp" 
            android:layout_height="wrap_content" 
            android:layout_weight="1" 
            android:text="@string/todo_form_yes"
            style="@style/OutlinedRadioButton"/>

        <!-- 可选：添加分割线 -->
        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@color/gainsboro"/>

        <RadioButton 
            android:id="@+id/radioButtonCompleteNo" 
            android:layout_width="0dp" 
            android:layout_height="wrap_content" 
            android:layout_weight="1" 
            android:text="@string/todo_form_no"
            style="@style/OutlinedRadioButton"/>
    </RadioGroup>
</com.google.android.material.textfield.TextInputLayout>

4. 注意事项

• 确保项目依赖了Material Components库：在build.gradle中添加implementation 'com.google.android.material:material:1.12.0'（版本可按需调整）
• 替换@color/your_primary_color、@color/primary_light为项目中实际的颜色资源
• 调整android:hint的文本为你需要的标题说明

内容的提问来源于stack exchange，提问作者Matheus Evangelista Morais