android - 在android中添加自定义单选按钮

Question

我正在尝试为 android 中的常规按钮获得单选按钮效果

我在下面有一个简单的 android 单选按钮

代码是::

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" >

        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="RadioButton1" />

        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RadioButton2" />

        <RadioButton
            android:id="@+id/radio2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RadioButton3" />
    </RadioGroup>


</RelativeLayout>

---

如何自定义如下::

谢谢！

[编辑] 使用来自答案之一的代码

但是按钮名称被select选项遮住了怎么去掉呢？

---

{EDIT} 更多更改

Finall更改应该至少我应该知道我从三个单选按钮中选择了哪个按钮....是否有可能得到如下？

Answer 1

添加引用图像或选择器（如下所示）的背景可绘制对象，并使按钮透明：

<RadioButton
    android:id="@+id/radio0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@null"
    android:button="@drawable/yourbuttonbackground"
    android:checked="true"
    android:text="RadioButton1" />

如果您希望您的单选按钮在选中时具有不同的资源，请创建一个选择器背景可绘制对象：

res/drawable/yourbuttonbackground.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/b"
        android:state_checked="true"
        android:state_pressed="true" />
    <item
        android:drawable="@drawable/a"
        android:state_pressed="true" />
    <item
        android:drawable="@drawable/a"
        android:state_checked="true" />
    <item
        android:drawable="@drawable/b" />
</selector>

在上面的选择器中，我们引用了两个可绘制对象，a下面b是我们创建它们的方法：

res/drawable/a.xml -选定状态

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="5dp" />
    <solid
        android:color="#fff" />
    <stroke
        android:width="2dp"
        android:color="#53aade" />
</shape>

res/drawable/b.xml -常规状态

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="5dp" />
    <solid
        android:color="#fff" />
    <stroke
        android:width="2dp"
        android:color="#555555" />
</shape>

更多关于drawables的信息：http: //developer.android.com/guide/topics/resources/drawable-resource.html

Answer 2

我已经更新了接受的答案并删除了不必要的东西。

我为以下图像创建了 XML。

您的XML代码RadioButton将是：

<RadioGroup
        android:id="@+id/daily_weekly_button_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="@dimen/_80sdp"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:checked="true"
            android:paddingLeft="@dimen/_16sdp"
            android:paddingTop="@dimen/_3sdp"
            android:paddingRight="@dimen/_16sdp"
            android:paddingBottom="@dimen/_3sdp"
            android:text="Daily"
            android:textColor="@color/radio_flat_text_selector" />

        <RadioButton
            android:id="@+id/radio1"
            android:gravity="center"
            android:layout_width="@dimen/_80sdp"
            android:layout_height="wrap_content"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:paddingLeft="@dimen/_16sdp"
            android:paddingTop="@dimen/_3sdp"
            android:paddingRight="@dimen/_16sdp"
            android:paddingBottom="@dimen/_3sdp"
            android:text="Weekly"
            android:textColor="@color/radio_flat_text_selector" />

</RadioGroup>

radio_flat_selector.xml对于背景选择器：

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

radio_flat_selected.xml对于选定的按钮：

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

radio_flat_regular.xml对于常规选择器：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="1dp" />
    <solid android:color="#fff" />
    <stroke
        android:width="1dp"
        android:color="@color/colorAccent" />
</shape>

以上 3 个文件代码都将在drawable/文件夹中。

现在我们还需要Text颜色选择器来相应地改变文本的颜色。

radio_flat_text_selector.xml用于文本颜色选择器

（使用color/此文件的文件夹。）

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

注意：我为这种类型的解决方案参考了很多答案，但没有找到好的解决方案，所以我做到了。

希望对您有所帮助。

谢谢。

Answer 3

使用与 Evan 的答案相同的 XML 文件格式，但您只需要一个可绘制文件来进行格式化。

<RadioButton
    android:id="@+id/radio0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_button_background"
    android:button="@android:color/transparent"
    android:checked="true"
    android:text="RadioButton1" />

还有你单独的可绘制文件：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_pressed="true" >
         <shape android:shape="rectangle" >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#333333" />
             <solid android:color="#cccccc" />            
         </shape>
    </item>

    <item android:state_checked="true">
         <shape android:shape="rectangle" >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#333333" />
             <solid android:color="#cccccc" /> 
         </shape>
    </item>  

    <item>
         <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#cccccc" />
             <solid android:color="#ffffff" />            
         </shape>
    </item>
</selector>

Answer 4

像接受的答案一样设置android:background和android:buttonRadioButton 对我不起作用。可绘制图像被显示为android:button单选按钮文本的背景（尽管被设置为透明）

android:background="@drawable/radiobuttonstyle"
    android:button="@android:color/transparent"

所以给了单选按钮作为自定义可绘制radiobuttonstyle.xml

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:text="Maintenance"
    android:id="@+id/radioButton1"
    android:button="@drawable/radiobuttonstyle"
      />

和radiobuttonstyle.xml如下

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

在这个带有自定义按钮样式的单选按钮工作之后。

Answer 5

您必须使用 XML 可绘制路径 ( my_checkbox )填充“CompoundButton”类的“Button”属性。在 XML drawable 中，您必须具有：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="false" android:drawable="@drawable/checkbox_not_checked" />
     <item android:state_checked="true" android:drawable="@drawable/checkbox_checked" />
     <item android:drawable="@drawable/checkbox_not_checked" /> <!-- default -->
</selector>

不要忘记将my_checkbox替换为您的复选框 drawable 的文件名，将 checkbox_not_checked替换为您的 PNG drawable，这是您的复选框，当它没有被选中时，checkbox_checked与您的图像一起被选中。

对于尺寸，直接更新布局参数。

Answer 6

为了隐藏默认单选按钮，我建议删除按钮而不是使其透明，因为所有视觉反馈都由可绘制背景处理：

android:button="@null"

另外最好使用样式，因为有几个单选按钮：

<RadioButton style="@style/RadioButtonStyle" ... />

<style name="RadioButtonStyle" parent="@android:style/Widget.CompoundButton">
    <item name="android:background">@drawable/customButtonBackground</item>
    <item name="android:button">@null</item>
</style>

您还需要Seslyn customButtonBackground 可绘制对象。

Answer 7

添加自定义drawable的最佳方法是：

<RadioButton
    android:id="@+id/radiocar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@android:color/transparent"
    android:button="@drawable/yourbuttonbackground"
    android:checked="true"
    android:drawableRight="@mipmap/car"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:text="yourtexthere"/>

自定义可绘制的阴影覆盖在此处被删除。

Answer 8

简单的方法试试这个

1. 在可绘制文件夹中创建一个新布局并将其命名为 custom_radiobutton（您也可以重命名）

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

2. 在您的布局活动中使用它

   <RadioButton
    android:id="@+id/radiobutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/custom_radiobutton"/>
   

Answer 9

有人因为设置自定义按钮不起作用而来到这里吗？我注意到 RadioButton 不起作用，但 androidx.appcompat.widget.AppCompatRadioButton 起作用了。

所以像这样的单选按钮

 <androidx.appcompat.widget.AppCompatRadioButton
            android:id="@+id/your_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:button="@drawable/radio_button_selector"
            android:text="Your choice" />

使用这样的选择器

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

将工作。

Answer 10

下面的代码是自定义单选按钮的示例。请按照以下步骤..

1. xml 文件。

    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.5">
   
        <TextView
            android:id="@+id/text_gender"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left|center_vertical"
            android:gravity="center"
            android:text="@string/gender"
            android:textColor="#263238"
            android:textSize="15sp"
            android:textStyle="normal"
   
            />
   
        <TextView
            android:id="@+id/text_male"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:text="@string/male"
            android:textColor="#263238"
            android:textSize="15sp"
            android:textStyle="normal"/>
   
        <RadioButton
            android:id="@+id/radio_Male"
            android:layout_width="28dp"
            android:layout_height="28dp"
            android:layout_gravity="right|center_vertical"
            android:layout_marginRight="4dp"
            android:button="@drawable/custom_radio_button"
            android:checked="true"
            android:text=""
            android:onClick="onButtonClicked"
            android:textSize="15sp"
            android:textStyle="normal"
   
            />
    </FrameLayout>
   
    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.6">
   
        <RadioButton
            android:id="@+id/radio_Female"
            android:layout_width="28dp"
            android:layout_height="28dp"
            android:layout_gravity="right|center_vertical"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="0dp"
            android:button="@drawable/custom_female_button"
            android:text=""
            android:onClick="onButtonClicked"
            android:textSize="15sp"
            android:textStyle="normal"/>
   
        <TextView
            android:id="@+id/text_female"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left|center_vertical"
            android:gravity="center"
            android:text="@string/female"
            android:textColor="#263238"
            android:textSize="15sp"
            android:textStyle="normal"/>
   
        <RadioButton
            android:id="@+id/radio_Other"
            android:layout_width="28dp"
            android:layout_height="28dp"
            android:layout_gravity="center_horizontal|bottom"
            android:layout_marginRight="10dp"
            android:button="@drawable/custom_other_button"
            android:text=""
            android:onClick="onButtonClicked"
            android:textSize="15sp"
            android:textStyle="normal"/>
   
        <TextView
            android:id="@+id/text_other"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|center_vertical"
            android:layout_marginRight="34dp"
            android:gravity="center"
            android:text="@string/other"
            android:textColor="#263238"
            android:textSize="15sp"
            android:textStyle="normal"/>
    </FrameLayout>
   

2.为单选按钮添加自定义xml

2.1.其他可绘制

custom_other_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:drawable="@drawable/select_radio_other" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />

</selector>

2.2.female drawable

custom_female_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:drawable="@drawable/select_radio_female" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />

</selector>

2.3. 男性可绘制

custom_radio_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:drawable="@drawable/select_radio_male" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />
</selector>

3. 输出： 这是输出屏幕

Answer 11

我意识到这是一个迟来的答案，但是通过 developer.android.com 查看，似乎切换按钮非常适合您的情况。

http://developer.android.com/guide/topics/ui/controls/togglebutton.html

当然，您仍然可以使用其他建议来获得背景可绘制对象，以获得您想要的自定义外观。

<ToggleButton 
    android:id="@+id/togglebutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_button_background"
    android:textOn="On"
    android:textOff="Off"
    />

现在，如果您想进行最终编辑并在按钮周围产生“光环”效果，您可以使用另一个自定义选择器来做到这一点。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" > <!-- selected -->
        <shape>
            <solid
                android:color="@android:color/white" />
            <stroke
                android:width="3px"
                android:color="@android:color/holo_blue_bright" />
            <corners
                android:radius="5dp" />
        </shape>
    </item>
    <item> <!-- default -->
        <shape>
            <solid
                android:color="@android:color/white" />
            <stroke
                android:width="1px"
                android:color="@android:color/darker_gray" />
            <corners
                android:radius="5dp" />
        </shape>
    </item> 
</selector>

Answer 12

TL;DR用于android:drawableStart我们的自定义可绘制选择器文件，而不是android:button. 设置android:button为@null。例子：

android:button="@null"
android:drawableStart="@drawable/radio_selector"

---

长版：

不知道原因，但是当我在运行 Android 11（API 级别 30）的设备上测试它时，这里的现有答案对我不起作用。所以尝试了以下替代方案或破解，它奏效了。单选按钮组件的示例 xml 以供参考：

<RadioButton
    android:id="@+id/radioButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@null"
    android:drawableStart="@drawable/radio_selector"
    android:drawablePadding="5dp"
    android:text="@string/radioOption1" />

我们正在使用android:drawableStart我们的收音机的自定义可绘制图像或选择器的选中图标而不是android:button. 并且不要忘记android:button将@null