Добавление настраиваемых переключателей в 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 Devrath
источник
4
4 года спустя, LOL - это может быть полезно для вас crosp.net/blog/android/…
Someone Somewhere
1
@SomeoneSomewhere ..... Ха-ха-ха ... Спасибо ... Это полезно :) :)
Devrath

Ответы:

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

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

Рез / рисуем / 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

Эван Башир
источник
1
Эй, спасибо, функциональность реализована ... Но имя кнопки перезаписывается опцией выбора ... как это удалить ... сохраняя функциональность нетронутой .... Все, что я пытаюсь достичь, как я показано в моем вопросе ... Любые дальнейшие направления! [Примечание :: пожалуйста, посмотрите обновленный вопрос]
Devrath
2
@Unicorn Добавьте, android:button="@android:color/transparent"чтобы удалить его.
Эван Башир
3
@Unicorn Да, я понимаю. Все, что вам нужно сделать, это создать селектор, который можно рисовать, как я сказал в своем ответе. Вы бы создали два чертежа. Один для стиля обычной кнопки и один для стиля нажатой кнопки. Я обновлю свой ответ кодом для этих чертежей.
Эван Башир
1
Чтобы уместить текст, а не перекрывать его, установите кнопку для рисования, а не фон, и убедитесь, что это 9-патч с точками растяжения и областями содержимого, указанными так, чтобы соответствовать тексту.
Лэнс Нанек
3
Нормальное поведение RadioButton, вы ищете флажок?
Винсент Д.
51

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

Я создал 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/папке.

Теперь нам также понадобится TextColor 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>

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

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

Спасибо.

Пратик Бутани
источник
Я очень близок к тому, что хочу, но также вижу радиус угла между элементами. Когда у меня есть три кнопки, я получаю вот это. Есть ли способ убедиться, что радиус применяется только к самой группе? imgur.com/mP8dtKR
AdamMc331
1
@ AdamMc331, вам нужно будет создать 3 селектора: один для кнопки в начале строки, один для тех, что посередине, и еще один для последнего, где вы затем можете настроить и просто закруглите угол одного из края, а также скроем один из них с помощью отрицательной маркировки, если вы обернете <shape> внутри <item>, который находится внутри <layer-list>
Бенни
Как создать цвет / папку? Не могли бы вы помочь мне
Kamrujjaman Joy
Да, это сработает. Дайте мне знать, если у вас возникнут проблемы.
Pratik Butani
Я пробовал на android 4 и получил этот ibb.co/jyHVXHS с активностью Appcompat, но работает хорошо, когда я расширяю с Activity
kartoos khan
42

Используйте тот же формат файла 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>
Seslyn
источник
1
Спасибо за это ... похоже, это полезно. Все еще работаю над тем, чтобы попробовать. Имя вытягиваемого объекта customButtonBackground не может иметь в нем прописные буквы - по крайней мере, так мне сообщает Android Studio.
LarsH
10

Настройка android:backgroundи android:buttonRadioButton, как принятый ответ, у меня не сработали. Изображение, доступное для рисования, отображалось в качестве фона (хотя оно android:buttonбыло установлено как прозрачное) для текста переключателя каквведите описание изображения здесь

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>

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

введите описание изображения здесь

Annu
источник
8

Вы должны заполнить атрибут «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 с вашим изображением, когда он установлен.

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

flchaux
источник
1
Я считаю, что OP хотел бы текст внутри кнопки. Я думаю, что единственный способ сделать это - применить drawable к android:backgroundvs the 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 .

МакИкс
источник
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.
varotariya vajsi
Я тоже выбрал этот вариант background. Если вы установите фон, вы не сможете добавлять текст в RadioButton, и вам нужно будет разместить свой собственный TextView
voghDev
3

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

  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"/>
Сунил
источник
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. Вывод: это экран вывода
сачин пангаре
источник
0

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

Переключить изображение кнопки 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
источник
Будет ли это по-прежнему разрешать поведение переключателя, когда одна кнопка отмечена, все остальные не отмечены?
LarsH