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

Afin de masquer le bouton radio par défaut, je suggère de retirer le bouton au lieu de le rendre transparent, car tous les retours visuels sont gérés par l'arrière-plan dessinable :

android:button="@null"

Il serait également préférable de utiliser les styles car il y a plusieurs boutons radio :

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

Vous aurez besoin du Seslyn customButtonBackground drawable (fond d'écran personnalisé) aussi.

Answer 2

La meilleure façon d'ajouter un tableau personnalisé est :

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

La superposition de l'ombre par le drawable personnalisé est supprimée ici.

Answer 3

Quelqu'un se retrouve ici parce que la configuration d'un bouton personnalisé ne fonctionne pas ? J'ai remarqué que RadioButton ne fonctionnait pas, mais androidx.appcompat.widget.AppCompatRadioButton oui.

Donc un bouton radio comme celui-ci

 <androidx.appcompat.widget.AppCompatRadioButton
            android:id="@+id/your_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:button="@drawable/radio_button_selector"
            android:text="Your choice" />

Avec un sélecteur comme celui-ci

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/radio_button_selected" android:state_checked="true" />
    <item android:drawable="@drawable/radio_button_unselected" android:state_checked="false" />
</selector>

fonctionnera.

Answer 4

Une façon simple d'essayer ceci

1. Créez un nouveau layout dans le dossier drawable et nommez-le custom_radiobutton (vous pouvez aussi le renommer).

    <?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. Utilisez ceci dans votre activité de mise en page

   <RadioButton
    android:id="@+id/radiobutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/custom_radiobutton"/>

Answer 5

Le code ci-dessous est un exemple de bouton radio personnalisé. suivez les étapes ci-dessous

1. Fichier 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>

2.ajouter le xml personnalisé pour les boutons radio

2.1.autre drawable

custom_autre_bouton.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/select_radio_other" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />

</selector>

2.2.femme dessinable

bouton_femelle_personnalisé.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/select_radio_female" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />

</selector>

2.3. Dessinateur mâle

bouton_radio_personnalisé.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/select_radio_male" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />
</selector>

3. Sortie : Voici l'écran de sortie