Android - Espaçamento entre CheckBox e texto

Existe uma maneira fácil de adicionar preenchimento entre a caixa de seleção em um controle CheckBox e o texto associado?

Não posso simplesmente adicionar espaços à esquerda, porque meu rótulo é multilinhas.

Como está, o texto está muito perto da caixa de seleção:

Detesto responder à minha própria pergunta, mas neste caso acho que preciso. Depois de conferir, @Falmarri estava no caminho certo com sua resposta. O problema é que o controle CheckBox do Android já usa a propriedade android: paddingLeft para obter o texto onde está.

A linha vermelha mostra o valor de deslocamento paddingLeft de toda a CheckBox

Se eu simplesmente substituir esse preenchimento no meu layout XML, ele estragará o layout. Aqui está o que a configuração paddingLeft = "0" faz:

Acontece que você não pode corrigir isso em XML. Você faz isso no código. Aqui está o meu snippet com um aumento de 10dp no preenchimento codificado.

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

Isso fornece o seguinte, onde a linha verde é o aumento do preenchimento. Isso é mais seguro do que codificar um valor, uma vez que diferentes dispositivos podem usar diferentes drawables para a caixa de seleção.

ATUALIZAÇÃO - Como as pessoas mencionaram recentemente nas respostas abaixo, esse comportamento aparentemente mudou em Jelly Bean (4.2). Seu aplicativo precisará verificar em qual versão está sendo executado e usar o método apropriado.

Para 4.3+, é simplesmente definir padding_left. Veja a resposta da htafoya para obter detalhes.

Dada a resposta @DougW, o que faço para gerenciar a versão é mais simples, adiciono à minha exibição da caixa de seleção:

android:paddingLeft="@dimen/padding_checkbox"

onde o dimen é encontrado em duas pastas de valores:

valores

<resources>

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

</resources>

valores-v17 (4.2 JellyBean)

<resources>

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

</resources>

Eu tenho uma verificação personalizada, use os dps para sua melhor escolha.

Use o atributo em android:drawableLeftvez de android:button. Para definir o preenchimento entre o drawable e o uso de texto android:drawablePadding. Para posicionar o uso desenhável 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"
        />

O Android 4.2 Jelly Bean (API 17) coloca o texto paddingLeft a partir do botão Drawable (ints borda direita). Também funciona no modo RTL.

Antes de 4.2 paddingLeft estava ignorando o buttonDrawable - ele foi retirado da borda esquerda da visualização CompoundButton.

Você pode resolvê-lo via XML - defina paddingLeft como buttonDrawable.width + requiredSpace em androids mais antigos. Configure-o como requiredSpace apenas na API 17 acima. Por exemplo, use recursos de dimensão e substitua na pasta values-v17 resource.

A alteração foi introduzida via android.widget.CompoundButton.getCompoundPaddingLeft ();

Sim, você pode adicionar preenchimento adicionando preenchimento.

android:padding=5dp

Se você deseja um design limpo sem 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"/>

O truque é definir a cor como transparente android:drawableLefte atribuir um valor a android:drawablePadding. Além disso, a transparência permite que você use essa técnica em qualquer cor de fundo sem o efeito colateral - como incompatibilidade de cores.

API 17 e acima, você pode usar:

android: paddingStart = "24dp"

API 16 e abaixo, você pode usar:

android: paddingLeft = "24dp"

No meu caso, resolvi esse problema usando o seguinte atributo CheckBox no XML:

*

android: paddingLeft = "@ dimen / activity_horizontal_margin"

*

Solução simples, adicione esta linha nas propriedades CheckBox , substitua 10dp pelo valor de espaçamento desejado

android:paddingLeft="10dp"

Eu não conheço caras, mas eu testei

<CheckBox android:paddingLeft="8mm" e move apenas o texto para a direita, não para o controle inteiro.

Isso combina comigo.

Por que não apenas estender a caixa de seleção do Android para ter um melhor preenchimento? Dessa forma, em vez de precisar corrigi-lo no código toda vez que você usar o CheckBox, basta usar o CheckBox fixo.

Primeira caixa de seleção de extensão:

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 no seu xml, em vez de criar um CheckBox normal, crie o seu estendido

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

Acabei de concluir sobre isso:

Substitua CheckBox e adicione este método se você tiver um drawable 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;
    }

}

ou isso se você usar o drawable do sistema:

@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;
    }

}

Obrigado pela resposta :)

Esse comportamento parece ter sido alterado no Jelly Bean. O truque paddingLeft adiciona preenchimento adicional, deixando o texto muito à direita. Alguém mais percebeu isso?

Para espaço entre a marca de seleção e o texto, use:

android:paddingLeft="10dp"

Mas fica mais do que 10dp, porque a marca de seleção contém preenchimento (cerca de 5dp) ao redor. Se você deseja remover o preenchimento, consulte Como remover o preenchimento no 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" />

Se você tiver um seletor de imagem personalizado para a caixa de seleção ou o botão de opção, defina as mesmas propriedades de botão e plano de fundo, 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" />

Você pode controlar o tamanho da caixa de seleção ou do preenchimento dos botões de opção com a propriedade background.

somente você precisa ter um parâmetro no arquivo xml

android:paddingLeft="20dp"

Definir minHeight e minWidth como 0dpa solução mais limpa e direta para mim na API do Android 9 28:

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

Se você estiver criando botões personalizados, por exemplo, consulte o tutorial de alteração de aparência do checkbox

Depois, simplesmente aumente a largura de btn_check_label_background.9.png adicionando uma ou mais duas colunas de pixels transparentes no centro da imagem; deixe os marcadores de 9 patches como estão.

O que eu fiz foi ter um TextViewe um CheckBoxdentro de um (relativo) Layout. O TextViewexibe o texto que eu quero que o usuário veja e CheckBoxnão possui nenhum texto. Dessa forma, eu posso definir a posição / preenchimento de CheckBoxonde eu quiser.

Eu tive o mesmo problema com um Galaxy S3 mini (Android 4.1.2) e simplesmente fiz minha caixa de seleção personalizada estender AppCompatCheckBox em vez de CheckBox. Agora funciona perfeitamente.

Você precisa obter o tamanho da imagem que está usando para adicionar seu preenchimento a esse tamanho. Nos internos do Android, eles obtêm o drawable que você especifica no src e usam seu tamanho posteriormente. Como é uma variável privada e não há getters, você não pode acessá-la. Além disso, você não pode obter o com.android.internal.R.styleable.CompoundButton e obter o drawable a partir daí.

Portanto, você precisa criar seu próprio estilo (ou seja, custom_src) ou adicioná-lo diretamente na sua implementação do 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 você provavelmente usa um seletor de drawable para sua android:buttonpropriedade, você precisa adicionar android:constantSize="true"e / ou especificar um drawable padrão 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>

Depois disso, você precisa especificar o android:paddingLeftatributo na sua caixa de seleção xml.

Contras:

No editor de layout, você encontrará o texto embaixo da caixa de seleção com a API 16 e abaixo; nesse caso, você poderá corrigi-lo criando sua classe de caixa de seleção personalizada, como sugerido, mas para o nível 16 da API.

Fundamentação:

é um bug, pois a StateListDrawable#getIntrinsicWidth()chamada é usada internamente, CompoundButtonmas pode retornar < 0valor se não houver estado atual e nenhum tamanho constante for usado.

Tudo o que você precisa fazer para superar esse problema é adicionar android:singleLine="true"ao checkBoxlayout xml do seu 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"/>

e nada de especial será adicionado programaticamente.

A imagem da caixa de seleção estava sobreposta quando usei meus próprios drawables do seletor, resolvi isso usando o código abaixo:

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

Agradecimentos a Alex Semeniuk

Termino com esse problema alterando as imagens. Acabei de adicionar um fundo transparente extra em arquivos png. Esta solução funciona excelente em todas as APIs.

Talvez seja tarde demais, mas eu criei métodos utilitários para gerenciar esse problema.

Basta adicionar estes métodos aos seus 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());
}

E use assim:

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

ou assim:

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

Em vez de ajustar o texto para a caixa de seleção, fiz o seguinte e funcionou para mim em todos os dispositivos. 1) No XML, adicione a caixa de seleção e uma visualização de texto adjacentes uma após a outra; mantendo alguma distância. 2) Defina o tamanho do texto da caixa de seleção para 0sp. 3) Adicione texto relativo a essa exibição de texto ao lado da caixa de seleção.

<CheckBox android:drawablePadding="16dip" - O preenchimento entre as gavetas e o texto.