Ajout de boutons radio personnalisés dans Android

131

J'essaie d'obtenir un effet de bouton radio pour les boutons normaux dans Android

J'ai un simple bouton radio Android ci-dessous

entrez la description de l'image ici

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:

entrez la description de l'image ici

Merci !

[MODIFIER] en utilisant le code de l'une des réponses

entrez la description de l'image ici

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

{EDIT} autres modifications

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

entrez la description de l'image ici

android  xml 
— Devrath
source
4
4 ans plus tard LOL - cela pourrait vous être utile crosp.net/blog/android
— Someone Somewhere
1
@SomeoneSomewhere ..... Hahaha ... Merci ... C'est utile :) :)
— Devrath

Réponses:

246

Ajoutez un arrière-plan dessinable qui fait 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="@null"
    android:button="@drawable/yourbuttonbackground"
    android:checked="true"
    android:text="RadioButton1" />

Si vous souhaitez que vos boutons radio aient une ressource différente lorsqu'ils sont cochés, créez un fond de sélecteur dessinable:

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érençons deux drawables, aet bvoici 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 - État 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 d'informations sur les drawables ici: http://developer.android.com/guide/topics/resources/drawable-resource.html

— Evan Bashir
source
1
Hé, merci d'avoir terminé la fonctionnalité ... Mais le nom du bouton est écrasé par l'option de sélection ..... comment supprimer cela ... en gardant la fonctionnalité intacte .... Tout ce que j'essaie de réaliser en tant que je montré dans ma question ... Toutes les autres directions! [Note :: veuillez regarder la question mise à jour]
— Devrath
2
@Unicorn Add android:button="@android:color/transparent"pour le supprimer.
— Evan Bashir
3
@ Licorne Oui, je comprends. Tout ce que vous avez à faire est de créer un sélecteur dessinable comme je l'ai indiqué dans ma réponse. Vous créeriez deux drawables. Un pour le style de bouton normal et un pour le style de bouton enfoncé. Je mettrai à jour ma réponse avec le code pour ces drawables.
— Evan Bashir
1
Pour adapter le texte au lieu de le chevaucher, définissez le bouton dessinable, pas l'arrière-plan, et assurez-vous qu'il s'agit d'un patch 9 avec des points d'étirement et des zones de contenu indiquées pour s'adapter au texte.
— Lance Nanek le
3
Comportement normal d'un RadioButton, recherchez-vous une case à cocher?
— Vincent D.
49

J'ai mis à jour la réponse acceptée et supprimé les éléments inutiles.

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

entrez la description de l'image ici

Votre code XML pour RadioButtonsera:

<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 d'arrière-plan:

<?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 le sélecteur régulier:

<?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 drawable/dossier.

Maintenant, nous avons également besoin du Textsélecteur de couleurs pour changer la couleur du texte en conséquence.

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

(Utilisez le color/dossier 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 référencé de nombreuses réponses pour ce type de solution mais je n'ai pas trouvé de bonne solution alors je la fais.

J'espère que cela vous sera utile.

Merci.

— Pratik Butani
source
Je me rapproche vraiment de ce que je veux avec cela, mais je vois aussi le rayon de coin entre les éléments. Quand j'ai trois boutons, j'obtiens ceci. Existe-t-il un moyen de s'assurer que le rayon s'applique uniquement au groupe lui-même? imgur.com/mP8dtKR
— AdamMc331
1
@ AdamMc331, vous devrez créer 3 sélecteurs, un pour le bouton au début de la ligne, un pour ceux du milieu et un autre pour le dernier, où vous pourrez alors ajuster et avoir juste le coin arrondi l'un des bords, et cachez également l'un d'entre eux avec un marquage négatif si vous enveloppez la <shape> dans un <item> qui est à l'intérieur d'une <layer-list>
— Benny
Comment créer une couleur / un dossier? Pouvez-vous m'aider s'il vous plaît
— Kamrujjaman Joy
Ouais, ça fonctionnera. Faites-moi savoir si vous rencontrez un problème.
— Pratik Butani le
J'ai essayé sur Android 4 et j'ai obtenu cette activité ibb.co/jyHVXHS avec Appcompat, mais fonctionne bien lorsque je prolonge avec Activity
— kartoos khan
42

Utilisez le même format de fichier XML que celui de la réponse d'Evan, mais un fichier pouvant être dessiné est tout ce dont vous avez besoin 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 dessinable 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>
— Seslyn
source
1
Merci pour cela ... cela semble utile. Je travaille toujours à l'essayer. Le nom du dessinable, customButtonBackground, n'est pas autorisé à contenir des majuscules - du moins c'est ce que me dit Android Studio.
— LarsH
10

Le réglage android:backgroundet android:buttonle RadioButton comme la réponse acceptée ne fonctionnaient pas pour moi. L'image dessinable était affichée en arrière-plan (même si elle android:buttonétait définie sur transparent) dans le texte du bouton radio commeentrez la description de l'image ici

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

donc a donné radiobutton comme radiobuttonstyle.xml personnalisable

<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 se présente 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 bouton radio avec un style de bouton personnalisé a fonctionné.

entrez la description de l'image ici

— Annu
source
8

Vous devez remplir l'attribut "Button" de la classe "CompoundButton" avec un chemin d'accès XML ( my_checkbox ). Dans le dessin 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 PNG drawable qui est votre case à cocher quand elle n'est pas cochée et checkbox_checked avec votre image lorsqu'elle est cochée.

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

— flchaux
source
1
Je crois que l'OP aimerait le texte dans le bouton. Je pense que la seule façon de faire est d'appliquer le drawable au android:backgroundvs the android:button; puis déclarant le android:buttoncomme transparent. De cette façon, le texte peut être placé à l'intérieur du bouton.
— Evan Bashir
5

Afin de masquer le bouton radio par défaut, je suggère 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"

Il serait également préférable d' utiliser des styles car il existe 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 également besoin du dessinable Seslyn customButtonBackground .

— McX
source
4

La meilleure façon d'ajouter un dessin 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 d'ombre par dessin personnalisé est supprimée ici.

— Abhilasha Sharma
source
Merci @Abhilasha.
— varotariya vajsi
J'ai aussi choisi cette option plutôt que backgroundcelle. Si vous définissez l'arrière-plan, vous ne pouvez pas ajouter de texte au RadioButton et devez placer votre propre TextView
— voghDev
3

Méthode simple essayez ceci

  1. Créez une nouvelle mise en page dans le dossier dessinable 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"/>
— Sunil
source
1

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

    2. ajoutez le xml personnalisé pour les boutons radio

    2.1.autre dessinable

    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.femelle dessinable

    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âle tirable

    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. Sortie: c'est l'écran de sortie
— sachin pangare
source
0

Je me rends compte que c'est une réponse tardive, mais en regardant developer.android.com, il semble que le bouton Bascule serait idéal pour votre situation.

Basculer l'image du bouton 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 pour obtenir un look 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 aller avec votre édition finale et avoir un effet de "halo" autour de vos boutons, vous pouvez utiliser un autre sélecteur personnalisé pour faire exactement cela.

<?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>
— Arthulie
source
Cela permettrait-il toujours le comportement des boutons radio dans la mesure où lorsqu'un bouton est coché, tous les autres ne sont pas cochés?
— LarsH du
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.