web-dev-qa-db-fra.com

Ajout de boutons radio personnalisés dans Android

J'essaie d'obtenir un effet de radiobutton pour les boutons standard dans Android

J'ai un simple bouton radio Android ci-dessous 

enter image description here

Le code pour cela est ::

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>

Comment le personnaliser comme ci-dessous ::

enter image description here

Merci ! 

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

enter image description here

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

{EDIT} plus de changements

Les modifications finales devraient au moins savoir quel bouton j'ai sélectionné parmi trois boutons radio ... est-il possible d'obtenir comme ci-dessous?

enter image description here

androidxml
100
Devrath

Ajoutez un arrière-plan pouvant faire référence à une image ou à un sélecteur (comme ci-dessous) et rendez le bouton transparent:

<RadioButton
    Android:id="@+id/radio0"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/yourbuttonbackground"
    Android:button="@Android:color/transparent"
    Android:checked="true"
    Android:text="RadioButton1" />

Si vous souhaitez que vos boutons radio aient une ressource différente une fois cochée, créez un sélecteur pouvant être dessiné en arrière-plan:

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>

Dans le sélecteur ci-dessus, nous référons deux dessinables, a et b, voici comment nous les créons:

res/drawable/a.xml - État sélectionné

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

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

Plus de détails sur les objets ici: http://developer.Android.com/guide/topics/resources/drawable-resource.html

203
Evan Bashir

Utilisez le même format de fichier XML de la réponse d'Evan, mais un fichier pouvant être dessiné suffit pour le formatage. 

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

Et votre fichier séparable séparé: 

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

Vous devez renseigner l'attribut "Button" de la classe "CompoundButton" avec un chemin XML ( my_checkbox ) . Dans XML XML, vous devez avoir: 

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

N'oubliez pas de remplacer my_checkbox par votre nom de fichier de la case à cocher drawable, checkbox_not_checked par votre fichier PNG drawable qui est votre case à cocher lorsqu'elle n'est pas cochée et checkbox_checked avec votre image lorsqu'elle est cochée.

Pour la taille, mettez à jour directement les paramètres de mise en page.

8
flchaux

J'ai mis à jour la réponse acceptée et supprimé des choses inutiles.

J'ai créé XML pour l'image suivante.

 enter image description here 

VotreXMLcode pour RadioButton sera:

<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 pour le sélecteur de fond:

<?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 pour le bouton sélectionné:

<?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 pour sélecteur standard:

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

Tous les 3 codes de fichier ci-dessus seront dans le dossier drawable/.

Désormais, nous avons également besoin de Text Color Selector pour modifier la couleur du texte en conséquence.

radio_flat_text_selector.xml pour le sélecteur de couleur de texte

(Utilisez le dossier color/ pour ce fichier.)

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

Remarque: j'ai examiné de nombreuses réponses pour ce type de solution, mais je n'ai pas trouvé la bonne solution, donc je le fais.

J'espère que cela vous sera utile.

Merci.

6
Pratik Butani AndroidDev

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

Android:button="@null"

Aussi, il serait préférable de utiliser des 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 too.

4
McX

Le meilleur moyen d’ajouter un dessin personnalisable 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"/>

L'incrustation d'ombres par dessin personnalisable est supprimé ici

4
Abhilasha Sharma

Manière simple d'essayer ceci

  1. Créez une nouvelle disposition dans un dossier pouvant être dessiné et nommez-la custom_radiobutton (vous pouvez également 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"/>
3
Sunil

Définir Android:background et Android:button de RadioButton comme si la réponse acceptée ne fonctionnait pas pour moi. L'image pouvant être dessinée était affichée en tant qu'arrière-plan (le jour où Android:button était défini sur transparent était associé au texte du bouton radio sous la forme  enter image description here 

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

alors donné radiobutton comme 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"
      />

et radiobuttonstyle.xml est comme suit 

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

et après ce radiobutton avec le style de bouton personnalisé travaillé. 

 enter image description here

1
Annu

Je me rends compte que c’est une réponse tardive, mais si vous parcourez developer.Android.com, il semble que le bouton Basculer serait idéal pour votre situation. 

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

Et bien sûr, vous pouvez toujours utiliser les autres suggestions pour avoir un fond attrayant pour obtenir le look personnalisé que vous voulez.

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

À présent, si vous voulez utiliser votre édition finale et créer 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>
0
Arthulia