Додавання користувальницьких радіо кнопок в Android

131

Я намагаюся отримати ефект радіо кнопки для звичайних кнопок в 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], використовуючи код одного з відповідей

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

Але назва кнопки затьмарюється параметром вибору, як її видалити?

{EDIT} більше змін

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

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

android  xml 
— Devrath
джерело
4
Через 4 роки LOL - це може бути для вас корисним crosp.net/blog/android/…
— Хтось десь
1
@SomeoneSomewhere ..... Hahaha ... Дякую ... Це корисно :) :)
— 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" />

Якщо ви хочете, щоб ваші радіо кнопки мали інший ресурс при позначці, створіть перемикач фонового малюнка:

res / dravable / 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 / dravable / 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 / dravable / 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/dravable-resource.html

— Еван Башир
джерело
1
Гей, спасибі, я отримав функціональність зроблено ... Але назва кнопки перезаписується параметром вибору ..... як її видалити ... збереження функціональності недоторканим .... Все, що я намагаюся досягти, як я показав на моє запитання ... Будь-які подальші вказівки! [Примітка: будь ласка, подивіться оновлене запитання]
— Devrath
2
@Unicorn Додати, android:button="@android:color/transparent"щоб видалити його.
— Еван Башир
3
@Unicorn Так, я розумію. Все, що вам потрібно зробити, - це створити селектор, який можна малювати так, як я заявив у своїй відповіді. Ви створили б два малюнки. Один для звичайного стилю кнопок, а другий для стилю кнопок. Я оновлю свою відповідь кодом для цих малюнків.
— Еван Башир
1
Щоб підходити до тексту, а не перекривати його, встановіть кнопку "Малюнок", а не фон, і переконайтесь, що це 9-патч із точками розтягування та областями вмісту, зазначеними для відповідності тексту.
— Ленс Нанек
3
Нормальна поведінка для RadioButton, ви шукаєте прапорець?
— Вінсент Д.
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>

Примітка. Я відповів багато відповідей на цей тип рішення, але не знайшов хорошого рішення, тому я встигаю.

Сподіваємось, це буде вам корисно.

Дякую.

— Пратік Бутані
джерело
Я дійсно наближаюся до того, що хочу з цим, але бачу радіус кута між предметами. Коли у мене є три кнопки, я отримую це. Чи є спосіб переконатися, що радіус застосовується лише до самої групи? imgur.com/mP8dtKR
— AdamMc331
1
@ AdamMc331, вам доведеться створити 3 селектори, один для кнопки на початку рядка, один для тих, хто знаходиться в середині, а другий для останнього, якщо ви потім могли налаштувати і просто закруглили кут одного з країв, а також приховати один із них негативним маркуванням, якщо ви загорнете <shape> всередині <item> thats у <список списків>
— Benny
Як створити колір / папку? Чи можете ви мені допомогти
— Камруджаман Радість
Так, це спрацює. Повідомте мене, якщо у вас є якісь проблеми.
— Пратік Бутані
Я спробував на 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>
— Сеслін
джерело
1
Дякую за це ... це виглядає корисним. Ще працюю над тим, щоб спробувати. У назві рисувального, customButtonBackground, заборонено мати великі регістри в ньому - принаймні так мені розповідає Android Studio.
— LarsH
10

Постановка android:backgroundта android:buttonфункція RadioButton, як прийнята відповідь, не працювали для мене. Малюнок, що малюється, відображався як фон (навіть у 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>

і після цього працювала радіо кнопка зі спеціальним стилем кнопок.

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

— Ану
джерело
8

Ви повинні заповнити атрибут "Кнопка" класу "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_ перевіряється вашим PNG-графіком, який є вашим прапором, коли він не встановлений, і checkbox_ позначається вашим зображенням, коли воно встановлено.

Для розміру безпосередньо оновіть параметри макета.

— флшо
джерело
1
Я вважаю, що ОП сподобається тексту в межах кнопки. Я думаю, що єдиний спосіб зробити це - застосувати малюнок до 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 .

— Маккс
джерело
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_f 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
джерело
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>
— Артулія
джерело
Чи все-таки це дозволить поведінку радіо кнопок у тому, що коли одна кнопка встановлена, будь-які інші не знімаються?
— LarsH
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.