Ajout de boutons radio personnalisés dans Android

Question

J'essaie d'obtenir l'effet radiobouton pour les boutons ordinaires dans Android.

J'ai un simple bouton radio Android ci-dessous

Le code pour cela est : :

activité_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>

---

Comment le personnaliser comme suit: :

Gracias ¡!

[EDIT] en utilisant le code d'une des réponses

Mais le nom du bouton est éclipsé par l'option de sélection : comment le supprimer ?

---

{EDIT} plus de changements

Les changements finaux devraient au moins me permettre de savoir quel bouton j'ai sélectionné parmi les trois boutons radio .... est-il possible d'obtenir ce qui suit ?

Answer 1

TL;D utiliser android:drawableStart pour notre fichier de sélecteur de dessin personnalisé au lieu de android:button . Réglez le android:button a @null . Exemple :

android:button="@null"
android:drawableStart="@drawable/radio_selector"

---

Version longue :

Je ne connais pas la raison mais les réponses existantes ici n'ont pas fonctionné pour moi lorsque je l'ai testé sur un appareil fonctionnant sous Android 11 (niveau API 30). J'ai donc essayé l'alternative ou le hack suivant et cela a fonctionné. Exemple de xml pour le composant bouton radio pour référence :

<RadioButton
    android:id="@+id/radioButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@null"
    android:drawableStart="@drawable/radio_selector"
    android:drawablePadding="5dp"
    android:text="@string/radioOption1" />

Nous utilisons android:drawableStart pour notre image personnalisable de l'icône radio ou cochée pour le sélecteur au lieu de android:button . Et n'oubliez pas de régler le android:button a @null

Answer 2

Je réalise que c'est une réponse tardive, mais en regardant sur developer.Android.com, il semble que le bouton Toggle serait idéal pour votre situation.

http://developer.Android.com/guide/topics/ui/controls/togglebutton.html

Et bien sûr, vous pouvez toujours utiliser les autres suggestions pour avoir un arrière-plan dessinable afin d'obtenir l'aspect personnalisé que vous souhaitez.

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

Maintenant, si vous voulez poursuivre votre montage final et avoir un effet de "halo" autour de vos boutons, vous pouvez utiliser un autre sélecteur personnalisé pour le faire.

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