Dodawanie niestandardowych przycisków radiowych w systemie Android

133

Próbuję uzyskać efekt radiobutton dla zwykłych przycisków w Androidzie

Poniżej znajduje się prosty przycisk opcji Androida

wprowadź opis obrazu tutaj

Kod do tego to :

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>

Jak dostosować go, jak poniżej:

wprowadź opis obrazu tutaj

Dzięki !

[EDYTUJ] używając kodu z jednej z odpowiedzi

wprowadź opis obrazu tutaj

Ale nazwa przycisku jest przyćmiona przez opcję wyboru, jak go usunąć?

{EDIT} więcej zmian

Ostateczne zmiany powinny przynajmniej wiedzieć, który przycisk wybrałem spośród trzech przycisków radiowych .... czy można uzyskać jak poniżej?

wprowadź opis obrazu tutaj

android xml Devrath
źródło
4
4 lata później LOL - to może być przydatne dla Ciebie crosp.net/blog/android/…
Someone Somewhere
1
@SomeoneSomewhere ..... Hahaha ... Dziękuję ... To jest przydatne :) :)
Devrath

Odpowiedzi:

250

Dodaj tło do rysowania, które odwołuje się do obrazu lub selektora (jak poniżej) i nadaj przyciskowi przezroczystość:

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

Jeśli chcesz, aby przyciski radiowe miały inny zasób po zaznaczeniu, utwórz tło selektora do rysowania:

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>

W powyższym selektorze odwołujemy się do dwóch rysunków, aa boto jak je tworzymy:

res / drawable / a.xml - stan wybrany

<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 - stan zwykły

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

Więcej o przedmiotach do rysowania tutaj: http://developer.android.com/guide/topics/resources/drawable-resource.html

Evan Bashir
źródło
1
Hej, dzięki, że funkcja została wykonana ... Ale nazwa przycisku jest nadpisywana przez opcję wyboru ..... jak to usunąć ... zachowując funkcjonalność w stanie nienaruszonym ... Wszystko, co próbuję osiągnąć, jak i pokazane w moim pytaniu ... Wszelkie dalsze wskazówki! [Uwaga: proszę spojrzeć na zaktualizowane pytanie]
Devrath
2
@Unicorn Dodaj, android:button="@android:color/transparent"aby go usunąć.
Evan Bashir,
3
@ Jednorożec Tak, rozumiem. Wszystko, co musisz zrobić, to stworzyć selektor, który można narysować, tak jak powiedziałem w mojej odpowiedzi. Stworzyłbyś dwa rysunki. Jeden dla stylu zwykłego przycisku i jeden dla stylu wciśniętego przycisku. Zaktualizuję swoją odpowiedź kodem dla tych rysunków.
Evan Bashir
1
Aby dopasować tekst zamiast nakładać się na niego, ustaw przycisk, który można rysować, a nie tło, i upewnij się, że jest to 9-łatka z punktami rozciągania i obszarami zawartości wskazanymi w celu dopasowania do tekstu.
Lance Nanek
3
Normalne zachowanie RadioButton. Czy szukasz pola wyboru?
Vincent D.
56

Zaktualizowałem zaakceptowaną odpowiedź i usunąłem niepotrzebne rzeczy.

Utworzyłem XML dla następującego obrazu.

wprowadź opis obrazu tutaj

Twój kod XML dla RadioButtonbędzie:

<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 dla selektora tła:

<?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 dla wybranego przycisku:

<?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 dla selektora zwykłego:

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

Cały powyższy kod pliku 3 będzie w drawable/folderze.

Teraz potrzebujemy również narzędzia TextColor Selector, aby odpowiednio zmienić kolor tekstu.

radio_flat_text_selector.xml dla selektora koloru tekstu

(Użyj color/folderu dla tego pliku).

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

Uwaga: sprawdziłem wiele odpowiedzi dotyczących tego typu rozwiązania, ale nie znalazłem dobrego rozwiązania, więc je robię.

Mam nadzieję, że będzie to pomocne.

Dzięki.

Pratik Butani
źródło
Jestem naprawdę blisko tego, czego chcę, ale widzę też promień narożnika między elementami. Kiedy mam trzy przyciski, to rozumiem. Czy istnieje sposób, aby upewnić się, że promień dotyczy tylko samej grupy? imgur.com/mP8dtKR
AdamMc331
1
@ AdamMc331, będziesz musiał utworzyć 3 selektory, jeden dla przycisku na początku wiersza, jeden dla środkowego i drugi dla ostatniego, gdzie możesz następnie dostosować i po prostu zaokrąglić róg jednego z krawędzie, a także ukryj jeden z nich z negatywnym oznaczeniem, jeśli zawiniesz <shape> wewnątrz <item>, który znajduje się wewnątrz <layer-list>
Benny,
Jak mogę stworzyć kolor / folder? Czy możesz mi pomóc
Kamrujjaman Joy
Tak, to zadziała. Daj mi znać, jeśli masz jakiś problem.
Pratik Butani
Wypróbowałem na Androidzie 4 i otrzymałem ten ibb.co/jyHVXHS z aktywnością Appcompat, ale działa dobrze, gdy rozszerzam o Aktywność
kartoos khan
43

Użyj tego samego formatu pliku XML, co w odpowiedzi Evana, ale do formatowania wystarczy jeden plik do rysowania.

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

Twój oddzielny plik do rysowania:

<?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
źródło
1
Dzięki za to ... wygląda na pomocne. Wciąż pracuję nad wypróbowaniem. Nazwa obiektu do rysowania, customButtonBackground, nie może zawierać wielkich liter - przynajmniej tak mówi mi Android Studio.
LarsH
11

Ustawienie android:backgroundi android:buttonRadioButton jak zaakceptowana odpowiedź nie działały dla mnie. Obraz do rysowania był wyświetlany jako tło (mimo android:buttonże był ustawiony jako przezroczysty) dla tekstu przycisku opcji jakowprowadź opis obrazu tutaj

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

więc dał radiobutton jako niestandardowy do rysowania 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"
      />

a radiobuttonstyle.xml jest następujący

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

i po tym radiobutton z niestandardowym stylem przycisku działał.

wprowadź opis obrazu tutaj

Annu
źródło
8

Musisz wypełnić atrybut „Button” klasy „CompoundButton” ścieżką do rysowania w formacie XML ( my_checkbox ). W pliku XML do rysowania musisz mieć:

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

Nie zapomnij zamienić my_checkbox na nazwę pliku checkbox drawable, checkbox_not_checked przez twój rysunek PNG, który jest twoim polem wyboru, gdy nie jest zaznaczony, i checkbox_checked z twoim obrazem, gdy jest zaznaczony.

W przypadku rozmiaru bezpośrednio zaktualizuj parametry układu.

flchaux
źródło
1
Wydaje mi się, że OP chciałby mieć tekst na przycisku. Myślę, że jedynym sposobem na to jest zastosowanie rysowalnego do android:backgroundvs android:button; następnie deklarując android:buttonjako przezroczysty. W ten sposób tekst może znajdować się wewnątrz przycisku.
Evan Bashir,
5

Aby ukryć domyślny przycisk opcji, sugerowałbym usunięcie przycisku zamiast uczynić go przezroczystym, ponieważ wszystkie wizualne opinie są obsługiwane przez rysowalne tło:

android:button="@null"

Byłoby też lepiej używać stylów, ponieważ istnieje kilka przycisków opcji:

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

Będziesz także potrzebować rysowania customButtonBackground Seslyn .

McX
źródło
4

Najlepszym sposobem dodania niestandardowego elementu do rysowania jest:

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

Nakładka cienia przez niestandardowy element do rysowania została tutaj usunięta.

Abhilasha Sharma
źródło
Wybrałem tę opcję, a nie backgroundjedną. Jeśli ustawisz tło, nie możesz dodać tekstu do RadioButton i musisz umieścić własny
TextView
3

Prosty sposób, spróbuj tego

  1. Utwórz nowy układ w folderze do rysowania i nadaj mu nazwę custom_radiobutton (możesz również zmienić nazwę)

     <?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. Użyj tego w swojej aktywności związanej z układem

    <RadioButton
 android:id="@+id/radiobutton"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:button="@drawable/custom_radiobutton"/>
Sunil
źródło
1

Poniższy kod to przykład niestandardowego przycisku opcji. wykonaj poniższe czynności.

  1. Plik 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. dodaj niestandardowy plik XML dla przycisków opcji

    2.1. Inne do wyciągania

    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. Samice do wyciągania

    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. mężczyzna do rysowania

    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. Wyjście: to jest ekran wyjściowy
sachin pangare
źródło
0

Zdaję sobie sprawę, że jest to spóźniona odpowiedź, ale patrząc na developer.android.com wydaje się, że przycisk Przełącz byłby idealny do twojej sytuacji.

Obraz przycisku przełączania http://developer.android.com/guide/topics/ui/controls/togglebutton.html

Oczywiście nadal możesz skorzystać z innych sugestii dotyczących rysowania tła, aby uzyskać niestandardowy wygląd.

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

Teraz, jeśli chcesz przejść do ostatecznej edycji i uzyskać efekt „aureoli” wokół przycisków, możesz to zrobić za pomocą innego niestandardowego selektora.

<?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
źródło
Czy to nadal pozwoliłoby na zachowanie przycisku radiowego w taki sposób, że gdy jeden przycisk jest zaznaczony, inne pozostają odznaczone?
LarsH