personalizar - Android-Espaciado entre CheckBox y texto.

personalizar checkbox android

Question

¿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 multilínea.

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

Answer 1

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

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

Answer 2

API 17 y superior, puedes usar:

Android: paddingStart = "24dp"

API 16 y más abajo, puedes usar:

Android: paddingLeft = "24dp"

Answer 3

Acabo de concluir sobre esto:

Sobrescriba CheckBox y agregue este método si tiene un dibujo personalizable:

@Override
public int getCompoundPaddingLeft() {

    // Workarround for version codes < Jelly bean 4.2
    // The system does not apply the same padding. Explantion:
    // http://.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 usas 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://.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 :)

Answer 4

Android 4.2 Jelly Bean (API 17) coloca el relleno de texto hacia la izquierda desde el botón Dibujable (se inclina hacia el borde derecho). También funciona para el modo RTL.

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

Puede resolverlo a través de XML: configure paddingLeft to buttonDrawable.width + requiredSpace en androides antiguos. Establézcalo en requiredSpace solo en API 17 arriba. Por ejemplo, use los recursos de dimensión y anule en la carpeta de recursos de valores-v17.

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

Answer 5

Como probablemente use un selector de dibujo para su propiedad de android:button necesita agregar android:constantSize="true" y / o especificar un dibujo 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 atributo android:paddingLeft en su casilla de verificación xml.

Contras:

En el editor de diseño, verás el texto que va debajo de la casilla de verificación con api 16 y más abajo, en ese caso, puedes corregirlo creando tu casilla de verificación personalizada como suggested pero para el nivel 16 de api.

Razón fundamental:

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

Answer 6

Dada la respuesta de @DougW, lo que hago para administrar la versión es más simple, lo 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">25dp</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 elección.

Answer 7

En lugar de ajustar el texto para la casilla de verificación, he hecho lo siguiente y funcionó para todos los dispositivos. 1) En XML, agregue una casilla de verificación y una vista de texto adyacente a una después de 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 junto a la casilla de verificación.

Answer 8

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

*

android: paddingLeft = "@ dimen / activity_horizontal_margin"

*

Answer 9

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

Answer 10

La imagen de la casilla de verificación se superpuso cuando utilicé mis propios elementos dibujables del selector. Resolví esto utilizando 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

Answer 11

Lo que hice es tener un TextView y un CheckBox dentro de un Layout (relativo). TextView muestra el texto que quiero que vea el usuario y CheckBox no tiene ningún texto. De esa manera, puedo establecer la posición / el relleno del CheckBox donde quiera.

Answer 12

Necesita obtener el tamaño de la imagen que está utilizando para agregar su relleno a este tamaño. En los dispositivos internos de Android, obtienen el dibujo que usted especifica en src y luego usan su tamaño. Ya que es una variable privada y no hay captadores a los que no puedes acceder. Además, no puede obtener el com.android.internal.R.styleable.CompoundButton y obtener el dibujo desde allí.

Así que necesita crear su propio styleable (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;
    }
}

Answer 13

No sé chicos, pero los probé.

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

Me queda bien

Answer 14

Odio responder a mi propia pregunta, pero en este caso creo que necesito hacerlo. Después de comprobarlo, @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 compensación paddingLeft de todo CheckBox

Si simplemente anulo ese relleno en mi diseño XML, desordena el diseño. Esto es lo que establece paddingLeft = "0":

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

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 las personas han 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 usar el método apropiado.

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

Answer 15

Sí, puede agregar relleno agregando relleno.

android:padding=5dp

Answer 16

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

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; Deja los marcadores de 9 parches como están.

Answer 17

Si quieres un diseño limpio y sin códigos, usa:

<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 es configurar el color en transparente para android:drawableLeft y 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.

Answer 18

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

            <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 de los botones de radio con propiedades de fondo.

Answer 19

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

android:paddingLeft="10dp"

Answer 20

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

Solo agrega estos métodos a tus utils:

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 usar 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);

Answer 21

Termino con este problema cambiando las imágenes. Acaba de añadir un fondo extra transparente en los archivos png. Esta solución funciona excelente en todas las APIs.

Answer 22

Todo lo que tienes que hacer para superar este problema es agregar android:singleLine="true" al checkBox en tu diseño de Android xml:

<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 será agregado programáticamente.

Answer 23

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 lugar de CheckBox. Ahora funciona perfectamente.

Answer 24

Use el atributo android:drawableLeft lugar de android:button . Para establecer el relleno entre drawable y text, use android:drawablePadding . Para posicionar dibujar usar 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"
        />

Answer 25

solo necesitas tener un parámetro en el archivo xml

android:paddingLeft="20dp"

Answer 26

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

Answer 27

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