Ajouter une marge entre un RadioButton et son étiquette sous Android?

Est-il possible d'ajouter un peu d'espace entre un RadioButton et l'étiquette tout en utilisant les composants intégrés d'Android? Par défaut, le texte semble un peu froissé.

<RadioButton android:id="@+id/rb1"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:text="My Text"/>

J'ai essayé plusieurs choses:

1. La spécification de la marge et du remplissage semble ajouter de l'espace autour de l'élément entier (bouton et texte, ensemble). Cela a du sens, mais ne fait pas ce dont j'ai besoin.

2. Création d'un dessin personnalisé via XML en spécifiant des images pour les états cochés et non cochés, puis en ajoutant quelques pixels supplémentaires sur le côté droit de chaque image. Cela devrait fonctionner, mais maintenant vous sortez de l'interface utilisateur par défaut. (Pas la fin du monde, mais pas l'idéal)

3. Ajoutez des espaces supplémentaires au début de chaque étiquette. Android semble couper un caractère d'espace au début, comme dans "Ma chaîne", mais spécifier unicode U + 00A0, comme dans "\ u00A0My String" fait l'affaire. Cela fonctionne, mais cela semble un peu sale.

De meilleures solutions?

Pour tous ceux qui liront ceci maintenant, la réponse acceptée entraînera des problèmes de mise en page sur les API plus récentes causant trop de remplissage.

Sur l'API <= 16, vous pouvez définir paddingLeftsur le bouton radio pour définir le remplissage par rapport aux limites d'affichage du bouton radio. En outre, un arrière-plan patch neuf modifie également les limites de la vue par rapport à la vue.

Sur API> = 17, le paddingLeft(ou paddingStart) est en relation avec le bouton radio dessinable. La même chose s'applique à environ un patch neuf. Pour mieux illustrer les différences de remplissage, consultez la capture d'écran ci-jointe.

Si vous fouillez dans le code, vous trouverez une nouvelle méthode dans l'API 17 appelée getHorizontalOffsetForDrawables . Cette méthode est appelée lors du calcul du remplissage gauche pour un bouton radio (d'où l'espace supplémentaire illustré dans l'image).

TL; DR Utilisez simplement paddingLeftsi votre minSdkVersionest> = 17. Si vous supportez l'API <= 16, vous devriez avoir un style de bouton radio pour le SDK min que vous supportez et un autre style pour l'API 17+.

Je ne sais pas si cela résoudra votre problème, mais avez-vous essayé la propriété "Padding left" de Radio Button avec une valeur de 50dip ou plus

J'ai essayé plusieurs façons et j'ai terminé avec celle-ci fonctionnant correctement sur l'émulateur et les appareils:

    <RadioButton
        android:background="@android:color/transparent"
        android:button="@null"
        android:drawableLeft="@drawable/your_own_selector"
        android:drawablePadding="@dimen/your_spacing" />

• android: l'arrière-plan doit être transparent car il semble que sur api10 il y a un arrière-plan avec des rembourrages intrinsèques (pas essayé avec d'autres apis mais la solution fonctionne aussi sur d'autres)
• android: le bouton doit être nul car les rembourrages ne fonctionneront pas correctement sinon
• android: drawableLeft doit être spécifié au lieu de android: button
• android: drawablePadding est l'espace qui sera entre votre dessinable et votre texte

Ajoutez une marge entre un bouton radio et son étiquette par paddingLeft :

android:paddingLeft="10dip"

Définissez simplement votre rembourrage personnalisé .

Propriété xml de RadioButton.

<RadioButton
    android:id="@+id/radHighest"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/YourImageResource"
    android:drawablePadding="50dp"
    android:paddingLeft="10dip"
    android:text="@string/txt_my_text"
    android:textSize="12sp" />

Terminé

Utilisez les attributs XML suivants. Ça a marché pour moi

Pour API <= 16, utilisez

android:paddingLeft="16dp"

Pour API> = 17, utilisez

android:paddingStart="@16dp"

Par exemple:

<android.support.v7.widget.AppCompatRadioButton
        android:id="@+id/popularityRadioButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:checked="true"
        android:paddingEnd="@dimen/radio_button_text"
        android:paddingLeft="@dimen/radio_button_text"
        android:paddingRight="@dimen/radio_button_text"
        android:paddingStart="@dimen/radio_button_text"
        android:text="Popularity"
        android:textSize="@dimen/sort_dialog_text_size"
        android:theme="@style/AppTheme.RadioButton" />

En outre, l' drawablePaddingattribut ne fonctionne pas. Cela ne fonctionne que si vous avez ajouté un dessinable dans votre bouton radio. Par exemple:

<RadioButton
    android:id="@+id/radioButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:button="@null"
    android:drawableEnd="@android:drawable/btn_radio"
    android:drawablePadding="56dp"
    android:drawableRight="@android:drawable/btn_radio"
    android:text="New RadioButton" />

Vous ne pouvez pas essayer ceci pour le moment pour vérifier, mais avez-vous essayé de voir si l'attribut android: drawablePadding fait ce dont vous avez besoin?

final float scale = this.getResources().getDisplayMetrics().density;
checkBox.setPadding(checkBox.getPaddingLeft() + (int)(10.0f * scale + 0.5f),

    checkBox.getPaddingTop(),
    checkBox.getPaddingRight(),
    checkBox.getPaddingBottom());

Le remplissage entre les drawables et le texte. Il sera réalisé en ajoutant la ligne ci-dessous dans le fichier xml. android:drawablePadding="@dimen/10dp"

J'ai essayé, "android: paddingLeft" fonctionnera. paddingLeft n'affectera que le texte tout en gardant l'image radio à sa position d'origine.

Le "android: paddingLeft" ne semble fonctionner correctement que sous Android 4.2.2

J'ai essayé presque toutes les versions d'Android et cela ne fonctionne que sur la version 4.2.2.

J'utilise une approche différente qui, à mon avis, devrait fonctionner sur toutes les versions d'API. Au lieu d'appliquer un remplissage, j'ajoute une vue vide entre les RadioButtons:

<View
        android:layout_width="20dp"
        android:layout_height="1dp" />

Cela devrait vous donner un rembourrage de 20dp.

Je suis venu ici à la recherche d'une réponse et le moyen le plus simple (après réflexion) était d'ajouter un espacement au début de l'étiquette elle-même comme ceci

<RadioGroup
     android:orientation="horizontal"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_alignRight="@+id/btnChangeMode"
     android:layout_marginTop="10dp"
     android:layout_marginBottom="10dp"
     android:layout_below="@+id/view3"
     android:gravity="center|left"
     android:id="@+id/ledRadioGroup">
<RadioButton
         android:button="@drawable/custom_radio_button"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text=" On"
         android:layout_marginRight="6dp"
         android:id="@+id/ledon"
         android:textColor="@color/white" />
<RadioButton
         android:button="@drawable/custom_radio_button"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text=" Off"
         android:layout_marginLeft="6dp"
         android:id="@+id/ledoff"
         android:textColor="@color/white" />

pour moi fonctionne:

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="true">
            <layer-list>
                <item android:right="5dp">
                    <shape android:paddingLeft="5dp" android:shape="oval">
                     <size android:width="20dp" android:height="20dp" />
                     <solid android:color="@color/blue" />
            </shape>
        </item>
    </layer-list>
</item>
<item android:paddingLeft="5dp" android:state_checked="false">
    <layer-list>
        <item android:right="5dp">
            <shape android:paddingLeft="5dp" android:shape="oval">
                <size android:width="20dp" android:height="20dp" />
                <solid android:color="@color/grey" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

<RadioButton
                android:id="@+id/rb1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:background="@null"
                android:paddingLeft="20dp"
                android:text="1"
                android:textColor="@color/text2"
                android:textSize="16sp"
                android:textStyle="bold" />

Vous pouvez ce code sur votre fichier XML

<RadioButton
android:id="@+id/rButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="50dp"
android:paddingLeft="10dip"
android:text="@string/your_text" />

ou utilisez ceci sur la classe d'activité

radioButton.setPadding(12, 10, 0, 10);

Créez un style dans style.xml comme celui-ci

<style name="Button.Radio">

    <item name="android:paddingLeft">@dimen/spacing_large</item>
    <item name="android:textSize">16sp</item>
</style>

Mettez ce style dans le bouton radio

 <RadioButton
                android:id="@+id/rb_guest_busy"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:text="@string/guest_is_waiting"
                android:textSize="@dimen/font_size_3x_medium"
                android:drawablePadding="@dimen/spacing_large"
                android:textColor="@color/color_text_heading_dark"
                style="@style/Button.Radio"/>

Vous pouvez modifier n'importe quel attribut de la même manière que le bouton car RadioButton hérite indirectement du bouton.

Je sais que c'est une vieille question, mais avec cette solution, j'ai enfin la tranquillité d'esprit et j'oublie le niveau d'API.

RadioGroup vertical côté gauche avec vue de texte verticale côté droit.

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical">
        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <RadioButton
            android:id="@+id/radio2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </RadioGroup>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="8dp"
            android:gravity="center_vertical"
            android:text="Radio 1"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="8dp"
            android:gravity="center_vertical"
            android:text="Radio 2"/>
    </LinearLayout>
</LinearLayout>

Vous pouvez essayer d'utiliser l'attribut gravité du bouton radio.

<RadioButton
                        android:id="@+id/rb_all"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:checked="true"
                        android:gravity="right|center_vertical"
                        android:padding="@dimen/padding_30dp"
                        android:text="@string/filter_inv_all"
                        android:textColor="@color/black"
                        android:textSize="@dimen/text_size_18" />

Cela alignera le texte à l'extrémité la plus à droite. Découvrez la première radio de l'image.