studio - ¿Agregar margen entre un RadioButton y su etiqueta en Android?

radiobutton android checked

Question

¿Es posible agregar un poco de espacio entre un RadioButton y la etiqueta sin dejar de usar los componentes incorporados de Android? Por defecto el texto se ve un poco estrujado.

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

He intentado un par de cosas:

1. La especificación del margen y el relleno parecen agregar espacio alrededor de todo el elemento (botón y texto, juntos). Eso tiene sentido, pero no hace lo que necesito.

2. Creando un dibujo personalizable a través de XML especificando imágenes para los estados marcados y no marcados, luego agregando algunos píxeles adicionales al lado derecho de cada imagen. Esto debería funcionar, pero ahora está saliendo de la interfaz de usuario predeterminada. (No es el fin del mundo, pero no es ideal)

3. Agregue espacios en blanco adicionales al comienzo de cada etiqueta. Android parece recortar un carácter de espacio inicial, como en "Mi cadena", pero la especificación de unicode U + 00A0, como en "/ u00A0My cadena" hace el truco. Esto funciona, pero parece un poco sucio.

¿Alguna solución mejor?

Answer 1

Agregue un margen entre un radiobutton su etiqueta por paddingLeft :

android:paddingLeft="10dip"

Solo configura tu relleno personalizado.

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

Hecho

Answer 2

Crea un estilo en style.xml como este

<style name="Button.Radio">

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

Pon ese estilo en el botón de 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"/>

Puede cambiar cualquier atributo igual que el botón, ya que RadioButton hereda indirectamente el botón.

Answer 3

El "android: paddingLeft" solo parece funcionar correctamente en android 4.2.2

He probado casi todas las versiones de Android y solo funciona en la versión 4.2.2.

Answer 4

El relleno entre los dibujables y el texto. Se logrará mediante la adición de la línea a continuación en el archivo xml. android:drawablePadding="@dimen/10dp"

Answer 5

Estoy usando un enfoque diferente que creo que debería funcionar en todas las versiones de API. En lugar de aplicar el relleno, estoy agregando una vista vacía a RadioButtons:

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

Esto debería darle 20dp de relleno.

Answer 6

He intentado, "android: paddingLeft" funcionará. paddingLeft solo afectará el texto mientras mantiene la imagen de la radio en la posición original.

Answer 7

No estoy seguro de si esto solucionará tu problema, pero ¿has probado la propiedad "Padding left" de Radio Button con un valor de 50dip o más?

Answer 8

No puedo intentar esto ahora para verificar, pero ¿has intentado ver si el atributo android:drawablePadding hace lo que necesitas?

Answer 9

Para cualquiera que lea esto ahora. La respuesta aceptada dará lugar a algunos problemas de diseño en apis más recientes que causan demasiado relleno.

En API <= 16, puede configurar el relleno a la izquierda en el botón de opción para establecer el relleno en relación con los límites de vista del botón de opción. Además, un fondo de parche nueve también cambia los límites de la vista en relación con la vista.

En la API 17, el relleno izquierdo está en relación con el botón de radio que se puede dibujar. Lo mismo se aplica a un parche de nueve. Para ilustrar mejor las diferencias de relleno, vea la captura de pantalla adjunta.

Si revisa el código, encontrará un nuevo método en la API 17 llamado getHorizontalOffsetForDrawables . Este método se llama al calcular el relleno izquierdo para un botón de radio (de ahí el espacio adicional ilustrado en la imagen).

TL; DR Debería tener un estilo de botón de radio para el min sdk que está apoyando y otro estilo para api 17+

Answer 10

Probé varias maneras y terminé con esta funcionando correctamente tanto en el emulador como en los dispositivos:

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

• android: el fondo debe ser transparente como parece en api10, hay un fondo con rellenos intrínsecos (no se ha probado con otras apis, pero la solución funciona en otras también)
• android: el botón debe estar nulo ya que los rellenos no funcionarán correctamente de lo contrario
• android: drawableLeft debe especificarse en lugar de android: button
• Android: drawablePadding es el espacio que estará entre tu dibujo y tu texto

Answer 11

Puede este código en su archivo 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" />

o usar esto en la clase de actividad

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

Answer 12

Puedes intentar usar el atributo de gravedad del botón de 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" />

Esto alineará el texto hacia el extremo más a la derecha. Echa un vistazo a la primera radio en la imagen.

Answer 13

Sé que es una pregunta antigua, pero con esta solución, finalmente tuve tranquilidad y olvidé el nivel de API.

Grupo de radio vertical del lado izquierdo con vista de texto vertical del lado derecho.

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

Answer 14

Usar la gravedad

            android:gravity="center_horizontal|center_vertical"

Answer 15

Utilice los siguientes atributos XML. Funciono para mi

Para API <= 16 uso

android:paddingLeft="16dp"

Para API> = 17 uso

android:paddingStart="@16dp"

P.ej:

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

Además Más: el atributo drawablePadding no funciona. Solo funciona si agregaste un dibujo en tu botón de radio. Por ejemplo:

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

Answer 16

Vine aquí buscando una respuesta y la forma más sencilla (después de pensar un poco) fue agregar espacio al principio de la etiqueta como tal

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

Answer 17

para mi trabaja:

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

Answer 18

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

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

Answer 19

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