Android开发：如何创建带Drawable的自定义RadioButton？

问题描述 #

需要实现选中时内部显示对勾的自定义RadioGroup，当前实现存在按钮与文字重叠、对勾位置偏移的问题。

现有代码问题分析 #

• 将自定义选择器设为RadioButton的background，导致整个控件背景变为圆形，文字与按钮区域重叠
• 选中状态的对勾图标未做位置约束，无法居中显示在圆形内部

修正步骤 #

1. 调整RadioGroup布局代码 #

移除RadioButton的android:background属性，将自定义选择器绑定到android:button属性，同时添加横向padding并调整gravity，避免文字与按钮重叠：

<RadioGroup
    android:id="@+id/radioGroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center_vertical"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginTop="15dp">

    <RadioButton
        android:id="@+id/radioButton1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:text="Radio 1"
        android:button="@drawable/radio_button_selector"
        android:paddingHorizontal="8dp"/>

    <RadioButton
        android:id="@+id/radioButton2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:text="Radio 2"
        android:button="@drawable/radio_button_selector"
        android:paddingHorizontal="8dp"/>

    <RadioButton
        android:id="@+id/radioButton3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:text="Radio 3"
        android:button="@drawable/radio_button_selector"
        android:paddingHorizontal="8dp"/>
</RadioGroup>

2. 修正radio_button_selector.xml #

在选中状态的layer-list中，给对勾图标添加inset属性约束位置，确保它居中显示在圆形内部；未选中状态可根据需求选择边框样式（更贴近常规单选按钮）：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <layer-list>
            <item>
                <shape android:shape="oval">
                    <solid android:color="@color/colorRadioButtonSelected"/>
                    <size android:width="20dp" android:height="20dp"/>
                </shape>
            </item>
            <!-- 用inset让对勾居中显示在圆形内 -->
            <item>
                <inset android:insetLeft="4dp" android:insetTop="4dp" android:insetRight="4dp" android:insetBottom="4dp">
                    <bitmap android:src="@drawable/checked_icon" android:gravity="center"/>
                </inset>
            </item>
        </layer-list>
    </item>
    <item android:state_checked="false">
        <shape android:shape="oval">
            <!-- 边框样式：替换solid为stroke，背景透明 -->
            <stroke android:color="@color/colorRadioButtonUnselected" android:width="2dp"/>
            <solid android:color="@android:color/transparent"/>
            <size android:width="20dp" android:height="20dp"/>
        </shape>
    </item>
</selector>

关键说明 #

• 使用android:button属性设置单选按钮样式，而非background，系统会自动处理按钮与文字的布局分离
• 通过inset调整对勾图标的内边距，确保它完全嵌入圆形且居中
• 未选中状态若要保留原实心填充效果，将stroke和透明solid换回原实心颜色即可

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