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

Poniżej znajduje się prosty przycisk opcji Androida

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:

Dzięki !

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

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?

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

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

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

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.

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>

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 jako

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

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.

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 .

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.

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

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

   3. Wyjście: to jest ekran wyjściowy

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.

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>