在Android中添加自定义单选按钮

131

我正在尝试为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>

如何自定义如下：

在此处输入图片说明

谢谢！

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

在此处输入图片说明

但是按钮名称被选择选项遮盖了如何删除？

{EDIT}更多更改

最终更改应该至少我应该知道我从三个单选按钮中选择了哪个按钮。

在此处输入图片说明

android  xml 
— 天赋
source
4
4年之后大声笑-你这可能是有用的crosp.net/blog/android/...
— 有人的地方
1
@SomeoneSomewhere .....哈哈哈...谢谢...这很有用:) :)
— Devrath

Answers:

246

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

<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>

有关可绘制对象的更多信息，请访问：http : //developer.android.com/guide/topics/resources/drawable-resource.html

— 埃文·巴希尔（Evan Bashir）
source
1
嘿，谢谢，我已经完成了功能...但是按钮名称正被选择选项覆盖.....如何删除...保持功能完整....所有我想实现的目标在我的问题中显示...任何进一步的指示！[注意：请查看更新后的问题]
— Devrath
2
@Unicorn添加android:button="@android:color/transparent"以将其删除。
— 埃文·巴希尔
3
@Unicorn是的，我了解。您需要做的就是像我在答案中所述的那样创建一个选择器drawable。您将创建两个可绘制对象。一种用于常规按钮样式，一种用于按下按钮样式。我将使用这些可绘制对象的代码更新答案。
— 埃文·巴希尔
1
要使文本适合而不是使其重叠，请设置可绘制按钮而不是背景，并确保它是9色标，并标明了拉伸点和内容区域以适合文本。
— Lance Nanek
3
RadioButton的正常行为，您是否正在寻找复选框？
— Vincent D.
49

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

我已经为下面的图像创建了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>

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

希望对您有帮助。

谢谢。

— Pratik Butani
source
我真的很接近我想要的，但是我也看到了项目之间的拐角半径。当我有三个按钮时，我得到了。有什么方法可以确保半径仅适用于组本身？imgur.com/mP8dtKR
— AdamMc331 '19
1
@ AdamMc331，您将必须创建3个选择器，一个用于行的开始的按钮，一个用于中间的按钮，另一个用于最后一个按钮，然后您就可以进行调整，并且将其中一个圆角边缘，如果将<shape>包裹在<layer-list>内的<item>内，则还用负号将它们隐藏起来
— Benny
如何创建颜色/文件夹？您能帮我吗
— Kamrujjaman Joy
是的，它将起作用。如果您有任何问题，请告诉我。
— Pratik Butani
我在android 4上尝试过，并通过Appcompat活动获得了此ibb.co/jyHVXHS，但是当我通过Activity扩展时效果很好
— kartoos khan
42

使用与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>
— 塞斯林
source
1
谢谢你……看起来很有帮助。仍在尝试中。可绘制的名称customButtonBackground不允许包含大写字母-至少这是Android Studio告诉我的。
— LarsH 2015年
10

像接受的答案那样设置android:background和设置android:buttonRadioButton对我不起作用。可绘制图像被显示为android:button单选按钮文本的背景（尽管被设置为transparent）在此处输入图片说明

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

因此将radiobutton作为自定义可绘制的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>

在此具有自定义按钮样式的单选按钮工作之后。

在此处输入图片说明

— 安努
source
8

您必须使用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您的复选框绘制的文件名，checkbox_not_checked你PNG绘制这是您的复选框时它不检查，checkbox_checked当它与检查你的形象。

对于大小，直接更新布局参数。

— 弗洛克斯
source
1
我相信OP希望按钮内的文字。我认为唯一的方法就是将drawable应用于android:backgroundvs android:button; 然后声明android:button为透明。这样，文本可以放在按钮内。
— 埃文·巴希尔
5

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

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可绘制对象。

— 麦克斯
source
4

添加自定义可绘制对象的最佳方法是：

 <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"/>

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

— 阿比拉莎莎玛（Abhilasha Sharma）
source
谢谢@Abhilasha。
— varotariya vajsi
我也选择了此选项background。如果设置了背景，则无法将文本添加到RadioButton中，而需要放置自己的TextView
— voghDev
3

简单的方法试试这个

  1. 在drawable文件夹中创建一个新布局，并将其命名为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"/>
— 苏尼尔
source
1

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

  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>
                </LinearLayout>

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

    2.1。其他可绘制

    custom_other_button.xml

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

    2.2。女性绘画

    custom_female_button.xml

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

    2.3。男性绘画

    custom_radio_button.xml

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

    1. 输出： 这是输出屏幕
— Sachin Pangare
source
0

我意识到这是一个迟来的答案，但是通过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>
— Arthulia
source
这样是否仍允许单选按钮的行为，即选中一个按钮后，其他任何一个都未被选中？
— LarsH 2015年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.