it-swarm.com.ru

Добавление пользовательских кнопок радио в Android

Я пытаюсь получить эффект радио-кнопки для обычных кнопок в Android

У меня есть простая кнопка-переключатель Android ниже 

enter image description here

Код для этого ::

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>

Как настроить его, как показано ниже:

enter image description here

Спасибо

[РЕДАКТИРОВАТЬ] используя код из одного из ответов

enter image description here

Но имя кнопки затенено опцией выбора, как удалить ее?


{РЕДАКТИРОВАТЬ} больше изменений

Окончательные изменения должны, по крайней мере, знать, какую кнопку я выбрал из трех переключателей .... можно ли получить, как показано ниже?

enter image description here

100
Devrath

Добавьте фоновый рисунок, который ссылается на изображение, или селектор (как показано ниже) и сделайте кнопку прозрачной:

<RadioButton
    Android:id="@+id/radio0"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/yourbuttonbackground"
    Android:button="@Android:color/transparent"
    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>

В приведенном выше селекторе мы ссылаемся на два объекта drawable, 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 - Regular State

<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

203
Evan Bashir

Используйте тот же формат файла 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>
37
Seslyn

Вы должны заполнить атрибут «Button» класса «CompoundButton» с помощью пути прорисовки XML ( my_checkbox ) . В прорисовке XML вы должны иметь: 

<?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 на ваше изображение, когда оно отмечено.

Для размера напрямую обновите параметры макета.

8
flchaux

Я обновил принятый ответ и удалил ненужные вещи.

Я создал XML для следующего изображения.

 enter image description here

Ваш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 Color Selector для соответствующего изменения цвета текста.

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>

Примечание: я сослался на множество ответов для этого типа решения, но не нашел хорошего решения, поэтому я делаю его.

Надеюсь, это будет полезно для вас.

Благодарю.

6
Pratik Butani AndroidDev

Чтобы скрыть радио-кнопку по умолчанию, я бы предложил удалить кнопку вместо того, чтобы сделать ее прозрачной, так как вся визуальная обратная связь обрабатывается рисованным фоном:

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 .

4
McX

Лучший способ добавить пользовательский объект:

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

Здесь наложено теневое наложение по пользовательскому рисунку.

4
Abhilasha Sharma

Простой способ попробовать это

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

Установка Android:background и Android:button для RadioButton как принятый ответ не работает для меня. Рисуемое изображение отображалось в качестве фона (несмотря на то, что Android:button был установлен как прозрачный) для текста переключателя как  enter image description here

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>

и после этого радио-кнопка с пользовательским стилем кнопки работал. 

 enter image description here

1
Annu

Я понимаю, что это запоздалый ответ, но, глядя на developer.Android.com, кажется, что кнопка Toggle была бы идеальной для вашей ситуации. 

Toggle button image 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>
0
Arthulia