Android - Espaciado entre CheckBox y texto

¿Hay una manera fácil de agregar relleno entre la casilla de verificación en un control CheckBox y el texto asociado?

No puedo simplemente agregar espacios iniciales, porque mi etiqueta es de varias líneas.

Tal como está, el texto está demasiado cerca de la casilla de verificación:

Odio responder mi propia pregunta, pero en este caso creo que necesito hacerlo. Después de verificarlo, @Falmarri estaba en el camino correcto con su respuesta. El problema es que el control CheckBox de Android ya usa la propiedad android: paddingLeft para obtener el texto donde está.

La línea roja muestra el valor de desplazamiento paddingLeft de todo el CheckBox

Si acabo de anular ese relleno en mi diseño XML, arruina el diseño. Esto es lo que hace la configuración paddingLeft = "0":

Resulta que no puedes arreglar esto en XML. Lo tienes que hacer en código. Aquí está mi fragmento con un aumento de relleno codificado de 10dp.

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

Esto le da lo siguiente, donde la línea verde es el aumento en el relleno. Esto es más seguro que codificar un valor, ya que diferentes dispositivos podrían usar diferentes elementos dibujables para la casilla de verificación.

ACTUALIZACIÓN: como la gente ha mencionado recientemente en las respuestas a continuación, este comportamiento aparentemente ha cambiado en Jelly Bean (4.2). Su aplicación deberá verificar en qué versión se está ejecutando y utilizar el método apropiado.

Para 4.3+ es simplemente establecer padding_left. Ver la respuesta de htafoya para más detalles.

Dada la respuesta de @DougW, lo que hago para administrar la versión es más simple, agrego a mi vista de casilla de verificación:

android:paddingLeft="@dimen/padding_checkbox"

donde el dimen se encuentra en dos carpetas de valores:

valores

<resources>

    <dimen name="padding_checkbox">0dp</dimen>

</resources>

valores-v17 (4.2 JellyBean)

<resources>

    <dimen name="padding_checkbox">10dp</dimen>

</resources>

Tengo un cheque personalizado, use el dps para su mejor opción.

Use el atributo en android:drawableLeftlugar de android:button. Para establecer el relleno entre el dibujo y el uso del texto android:drawablePadding. Para posicionar el uso dibujable android:paddingLeft.

<CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@null"
        android:drawableLeft="@drawable/check_selector"
        android:drawablePadding="-50dp"
        android:paddingLeft="40dp"
        />

Android 4.2 Jelly Bean (API 17) pone el relleno de texto a la izquierda del botón Dibujable (lado derecho de las entradas). También funciona para el modo RTL.

Antes de 4.2 paddingLeft ignoraba el buttonDrawable: se tomó del borde izquierdo de la vista CompoundButton.

Puede resolverlo a través de XML: establezca paddingLeft en buttonDrawable.width + requiredSpace en los androides más antiguos. Configúrelo en requiredSpace solo en API 17 en adelante. Por ejemplo, use los recursos de dimensión y anule en la carpeta de recursos values-v17.

El cambio se introdujo a través de android.widget.CompoundButton.getCompoundPaddingLeft ();

Sí, puede agregar relleno agregando relleno.

android:padding=5dp

Si desea un diseño limpio sin códigos, use:

<CheckBox
   android:id="@+id/checkBox1"
   android:layout_height="wrap_content"
   android:layout_width="wrap_content"
   android:drawableLeft="@android:color/transparent"
   android:drawablePadding="10dp"
   android:text="CheckBox"/>

El truco consiste en establecer el color en transparente para android:drawableLefty asignar un valor para android:drawablePadding. Además, la transparencia le permite utilizar esta técnica en cualquier color de fondo sin el efecto secundario, como la falta de coincidencia de color.

API 17 y superior, puede usar:

android: paddingStart = "24dp"

API 16 y a continuación, puede usar:

android: paddingLeft = "24dp"

En mi caso, resolví este problema usando el siguiente atributo CheckBox en el XML:

* *

android: paddingLeft = "@ dimen / activity_horizontal_margin"

* *

Solución simple, agregue esta línea en las propiedades de CheckBox , reemplace 10dp con el valor de espacio deseado

android:paddingLeft="10dp"

No conozco chicos, pero probé

<CheckBox android:paddingLeft="8mm" y solo mueve el texto hacia la derecha, no todo el control.

Me queda bien.

¿Por qué no simplemente extender el CheckBox de Android para tener un mejor relleno? De esa manera, en lugar de tener que arreglarlo en el código cada vez que use CheckBox, puede usar el CheckBox fijo.

Primero Extender CheckBox:

package com.whatever;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.CheckBox;

/**
 * This extends the Android CheckBox to add some more padding so the text is not on top of the
 * CheckBox.
 */
public class CheckBoxWithPaddingFix extends CheckBox {

    public CheckBoxWithPaddingFix(Context context) {
        super(context);
    }

    public CheckBoxWithPaddingFix(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public CheckBoxWithPaddingFix(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public int getCompoundPaddingLeft() {
        final float scale = this.getResources().getDisplayMetrics().density;
        return (super.getCompoundPaddingLeft() + (int) (10.0f * scale + 0.5f));
    }
}

Segundo en su xml en lugar de crear un CheckBox normal, cree su extendido

<com.whatever.CheckBoxWithPaddingFix
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello there" />

Acabo de concluir sobre esto:

Anule CheckBox y agregue este método si tiene un dibujo personalizado:

@Override
public int getCompoundPaddingLeft() {

    // Workarround for version codes < Jelly bean 4.2
    // The system does not apply the same padding. Explantion:
    // http://stackoverflow.com/questions/4037795/android-spacing-between-checkbox-and-text/4038195#4038195

    int compoundPaddingLeft = super.getCompoundPaddingLeft();

    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR1) {
        Drawable drawable = getResources().getDrawable( YOUR CUSTOM DRAWABLE );
        return compoundPaddingLeft + (drawable != null ? drawable.getIntrinsicWidth() : 0);
    } else {
        return compoundPaddingLeft;
    }

}

o esto si usa el sistema dibujable:

@Override
public int getCompoundPaddingLeft() {

    // Workarround for version codes < Jelly bean 4.2
    // The system does not apply the same padding. Explantion:
    // http://stackoverflow.com/questions/4037795/android-spacing-between-checkbox-and-text/4038195#4038195

    int compoundPaddingLeft = super.getCompoundPaddingLeft();

    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR1) {
        final float scale = this.getResources().getDisplayMetrics().density;
        return compoundPaddingLeft + (drawable != null ? (int)(10.0f * scale + 0.5f) : 0);
    } else {
        return compoundPaddingLeft;
    }

}

Gracias por la respuesta :)

Este comportamiento parece haber cambiado en Jelly Bean. El truco paddingLeft agrega relleno adicional, haciendo que el texto se vea demasiado a la derecha. ¿Alguien más nota eso?

Para espacio entre la marca de verificación y el uso del texto:

android:paddingLeft="10dp"

Pero se convierte en más de 10dp, porque la marca de verificación contiene relleno (alrededor de 5dp) alrededor. Si desea eliminar el relleno, consulte Cómo eliminar el relleno alrededor de Android CheckBox :

android:paddingLeft="-5dp"
android:layout_marginStart="-5dp"
android:layout_marginLeft="-5dp"
// or android:translationX="-5dp" instead of layout_marginLeft

<CheckBox
        android:paddingRight="12dip" />

Si tiene un selector de imagen personalizado para la casilla de verificación o el botón de radio, debe establecer el mismo botón y propiedad de fondo como esta:

            <CheckBox
                android:id="@+id/filter_checkbox_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:button="@drawable/selector_checkbox_filter"
                android:background="@drawable/selector_checkbox_filter" />

Puede controlar el tamaño de la casilla de verificación o el relleno del botón de opción con la propiedad de fondo.

solo necesitas tener un parámetro en el archivo xml

android:paddingLeft="20dp"

Establecer minHeight y minWidth en 0dpfue la solución más limpia y directa para mí en Android 9 API 28:

<CheckBox
        android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minHeight="0dp"
        android:minWidth="0dp" />

Si está creando botones personalizados, por ejemplo, vea el aspecto de cambio del tutorial de la casilla de verificación

Luego, simplemente aumente el ancho de btn_check_label_background.9.png agregando una o dos columnas más de píxeles transparentes en el centro de la imagen; deje los marcadores de 9 parches como están.

Lo que hice fue tener un TextViewy un CheckBoxdentro de un (Relativo) Layout. Las TextViewmuestra el texto que desea que el usuario vea, y el CheckBoxno tiene ningún texto. De esa manera, puedo establecer la posición / relleno de CheckBoxdonde quiera.

Tuve el mismo problema con un Galaxy S3 mini (Android 4.1.2) y simplemente hice que mi casilla de verificación personalizada extendiera AppCompatCheckBox en lugar de CheckBox. Ahora funciona a la perfección.

Debe obtener el tamaño de la imagen que está utilizando para agregar su relleno a este tamaño. En los componentes internos de Android, obtienen el dibujo que especifiques en src y luego usan su tamaño. Dado que es una variable privada y no hay captadores a los que no puede acceder. Tampoco puede obtener el com.android.internal.R.styleable.CompoundButton y obtener el dibujable desde allí.

Por lo tanto, debe crear su propio estilo (es decir, custom_src) o puede agregarlo directamente en su implementación del RadioButton:

public class CustomRadioButton extends RadioButton {

    private Drawable mButtonDrawable = null;

    public CustomRadioButton(Context context) {
        this(context, null);
    }

    public CustomRadioButton(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomRadioButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        mButtonDrawable = context.getResources().getDrawable(R.drawable.rbtn_green);
        setButtonDrawable(mButtonDrawable);
    }

    @Override
    public int getCompoundPaddingLeft() {
        if (Util.getAPILevel() <= Build.VERSION_CODES.JELLY_BEAN_MR1) {
            if (drawable != null) {
                paddingLeft += drawable.getIntrinsicWidth();
            }
        }
        return paddingLeft;
    }
}

Como probablemente use un selector dibujable para su android:buttonpropiedad, debe agregar android:constantSize="true"y / o especificar un sorteo predeterminado como este:

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

Después de eso, debe especificar el android:paddingLeftatributo en su casilla de verificación xml.

Contras:

En el editor de diseño, verá el texto debajo de la casilla de verificación con la API 16 y debajo, en ese caso puede solucionarlo creando su clase de casilla de verificación personalizada como se sugiere pero para la API de nivel 16.

Razón fundamental:

es un error ya que la StateListDrawable#getIntrinsicWidth()llamada se usa internamente CompoundButtonpero puede devolver < 0valor si no hay un estado actual y no se usa un tamaño constante.

Todo lo que tiene que hacer para superar este problema es agregar android:singleLine="true"al checkBoxdiseño xml de su Android:

<CheckBox 
   android:id="@+id/your_check_box"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:singleLine="true"
   android:background="@android:color/transparent"
   android:text="@string/your_string"/>

y nada especial se agregará mediante programación.

La imagen de la casilla de verificación se superpuso cuando utilicé mis propios dibujables del selector, lo resolví usando el siguiente código:

CheckBox cb = new CheckBox(mActivity);
cb.setText("Hi");
cb.setButtonDrawable(R.drawable.check_box_selector);
cb.setChecked(true);
cb.setPadding(cb.getPaddingLeft(), padding, padding, padding);

Gracias a Alex Semeniuk

Termino con este problema cambiando las imágenes. Acabo de agregar un fondo transparente adicional en los archivos png. Esta solución funciona excelente en todas las API.

Tal vez sea demasiado tarde, pero he creado métodos de utilidad para gestionar este problema.

Simplemente agregue estos métodos a sus utilidades:

public static void setCheckBoxOffset(@NonNull  CheckBox checkBox, @DimenRes int offsetRes) {
    float offset = checkBox.getResources().getDimension(offsetRes);
    setCheckBoxOffsetPx(checkBox, offset);
}

public static void setCheckBoxOffsetPx(@NonNull CheckBox checkBox, float offsetInPx) {
    int leftPadding;
    if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.JELLY_BEAN) {
        leftPadding = checkBox.getPaddingLeft() + (int) (offsetInPx + 0.5f);
    } else {
        leftPadding = (int) (offsetInPx + 0.5f);
    }
    checkBox.setPadding(leftPadding,
            checkBox.getPaddingTop(),
            checkBox.getPaddingRight(),
            checkBox.getPaddingBottom());
}

Y use así:

    ViewUtils.setCheckBoxOffset(mAgreeTerms, R.dimen.space_medium);

o así:

    // Be careful with this usage, because it sets padding in pixels, not in dp!
    ViewUtils.setCheckBoxOffsetPx(mAgreeTerms, 100f);

En lugar de ajustar el texto para Checkbox, hice lo siguiente y funcionó para todos los dispositivos. 1) En XML, agregue la casilla de verificación y una vista de texto adyacente a una tras otra; manteniendo cierta distancia. 2) Establezca el tamaño del texto de la casilla de verificación en 0sp. 3) Agregue texto relativo a esa vista de texto al lado de la casilla de verificación.

<CheckBox android:drawablePadding="16dip" - El relleno entre los dibujables y el texto.