Android: como alterar o tamanho do CheckBox?


92

Eu gostaria de tornar a CheckBox um pouco menor / maior, como posso fazer isso?

Respostas:


57

Você só precisa definir os drawables relacionados e defini-los na caixa de seleção:

<CheckBox 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:text="new checkbox" 
    android:background="@drawable/my_checkbox_background"
    android:button="@drawable/my_checkbox" />

O truque está em como definir os drawables. Aqui está um bom tutorial sobre isso .


11
Lembre-se de que diferentes dispositivos podem ter temas personalizados instalados. Se você ajustar o tamanho colocando sua própria imagem personalizada, certifique-se de substituir todas as caixas de seleção no aplicativo (mesmo se não houver alteração de tamanho) ou então você pode acabar com uma mistura de estilos em certos dispositivos.
DougW

141

A partir da API de nível 11, existe outra abordagem:

<CheckBox
    ...
    android:scaleX="0.70"
    android:scaleY="0.70"
/>

5
Essa técnica também dimensionará o rótulo do texto. Para compensar isso, ajustei o tamanho do texto da seguinte forma checkBox.TextSize = (int) (TEXT_SIZE / SCALE_FACTOR);
samis

5
Se eu fizer isso para aumentar, por exemplo, dimensioná-lo para "2.0", ele ficará maior, mas a imagem será cortada, vejo a metade direita da caixa de seleção e a metade esquerda do texto. Alguma maneira de contornar isso?
Al Lelopath

4
bom, mas ainda ocupa o mesmo espaço. Para resolver isso, usei -ve margins, como: android: layout_marginLeft = "- 10dp"
M. Usman Khan

Provavelmente não serei mostrado na visualização do IDE, mas CheckBox será dimensionado em tempo de execução
Leo Droidcoder

Mostra na visualização AS Design para mim. Correção simples para algo que não deveria precisar de conserto. Acho que a API ou o dispositivo afeta. usando o dispositivo Gennymotion na API 22, parece que 0,8 é o Y mais alto (LinearLayout horizontal), enquanto, el cheapo, Onix Tablet não
corta

95

Aqui está uma solução melhor que não corta e / ou desfoca o drawable, mas só funciona se a caixa de seleção não tiver texto em si (mas você ainda pode ter texto, é apenas mais complicado, veja no final).

<CheckBox
    android:id="@+id/item_switch"
    android:layout_width="160dp"    <!-- This is the size you want -->
    android:layout_height="160dp"
    android:button="@null"
    android:background="?android:attr/listChoiceIndicatorMultiple"/>

O resultado:

Qual a aparência scaleXe a scaleYaparência da solução anterior :

Você pode ter uma caixa de seleção de texto adicionando um TextViewao lado dela e adicionando um ouvinte de clique no layout pai e, em seguida, acionando a caixa de seleção programaticamente.


2
Usar plano de fundo não funciona se sua caixa de seleção tiver texto.
Zach Green de

@ZachGreen sim, de fato. Não pensei na possibilidade de que não funcionasse se a caixa de seleção tivesse texto, a minha não. Atualizará a resposta
Antoine Bolvy,

3
Esta é uma resposta muito melhor do que a aceita.
vtlinh

em 160 dp parece granulado. Parece que a resolução está muito baixa
Gianluca Demarinis

como faço para definir a tonalidade para essa caixa de seleção?
Ano

16

Bem, eu encontrei muitas respostas, mas elas funcionam bem sem texto quando exigimos texto também com caixa de seleção como na minha IUinsira a descrição da imagem aqui

Aqui, de acordo com meus requisitos de IU, não posso deixar de aumentar TextSize, então outra opção que tentei foi scaleX e scaleY (selecione a caixa de seleção) e o seletor xml personalizado com imagens .png (também está criando problemas com tamanhos de tela diferentes)

Mas temos outra solução para isso, que é Vector Drawable

Faça isso em 3 etapas.

Etapa 1: copie esses três Drawable de vetor para sua pasta de drawable

verificado.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="16dp"
android:height="16dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
    android:fillColor="#FF000000"
    android:pathData="M19,3L5,3c-1.11,0 -2,0.9 -2,2v14c0,1.1 0.89,2 2,2h14c1.11,0 2,-0.9 2,-2L21,5c0,-1.1 -0.89,-2 -2,-2zM10,17l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z" />
</vector>

un_checked.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="16dp"
android:height="16dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
    android:fillColor="#FF000000"
    android:pathData="M19,5v14H5V5h14m0,-2H5c-1.1,0 -2,0.9 -2,2v14c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2V5c0,-1.1 -0.9,-2 -2,-2z" />
</vector>

( Observe que se você estiver trabalhando com o Android Studio, você também pode adicionar esses Drawable de vetor a partir daí, clique com o botão direito na pasta de drawable, em Novo / Ativo de vetor e selecione esses drawable a partir daí )

Etapa 2: Criar seletor XML para check_box

check_box_selector.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/checked" android:state_checked="true" />
<item android:drawable="@drawable/un_checked" />
</selector>

Etapa 3: defina esse drawable na caixa de seleção

<CheckBox
android:id="@+id/suggectionNeverAskAgainCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:button="@drawable/check_box_selector"
android:textColor="#FF000000"
android:textSize="13dp"
android:text="  Never show this alert again" />

Agora é como:

insira a descrição da imagem aqui


Você pode alterar sua largura e altura ou viewportHeight e viewportWidth e fillColor também


Espero que ajude!


2
No meu caso tive que definir android:button="@null"e android:background="@drawable/check_box_selector"fazer ajustar o tamanho da caixa de seleção.
Artur Szymański

esta abordagem quebra os
paddings

9

eu uso

android:scaleX="0.70" android:scaleY="0.70"

para ajustar o tamanho da caixa de seleção

então eu defino margens assim

android:layout_marginLeft="-10dp"

para ajustar a localização da caixa de seleção.


Bro, embora diminua o tamanho - a margem não funciona no meu caso. As imagens das minhas caixas de seleção são 173 x 93 - o tamanho da caixa de seleção ainda ocupa esse espaço. Antoine Bolvy é uma solução mais flexível na minha opinião.
Alexey Shevelyov

6

Aqui foi o que eu fiz, primeiro set:

android:button="@null"

e também definir

android:drawableLeft="@drawable/selector_you_defined_for_your_checkbox"

em seguida, em seu código Java:

Drawable d = mCheckBox.getCompoundDrawables()[0];
d.setBounds(0, 0, width_you_prefer, height_you_prefer);
mCheckBox.setCompoundDrawables(d, null, null, null);

Funciona para mim e espero que funcione para você!


4

ATUALIZAÇÃO : funciona apenas a partir da API 17 ...


Para adicionar outras respostas brilhantes já fornecidas, você só pode deixar a caixa de seleção tão pequena quanto o tamanho do texto permitir.

De acordo com minha resposta a esta pergunta: - como podemos reduzir o tamanho da caixa de seleção, dê-me uma ideia


CheckBox deriva sua altura do TEXTO, bem como da imagem.

Defina essas propriedades em seu XML:

android:text=""
android:textSize="0sp"

Claro que isso só funciona se você não quiser nenhum texto (funcionou para mim).

Sem essas mudanças, o CheckBoxestava me dando uma grande margem em torno da minha imagem, conforme mencionado por Joe


1

Você pode tentar a seguinte solução para alterar o tamanho custom checkbox, definindo as seguintes propriedades Checkboxem seu arquivo de layout. Funcionou para mim

android: scaleX = "0,8" android: scaleY = "0,8"

android:button="@null"
android:scaleX="0.8"
android:scaleY="0.8"
android:background="@drawable/custom_checkbox"

adicione as seguintes linhas ao arquivo drawable

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_checked="false"
      android:drawable="@drawable/unchecked_img" />
<item android:state_checked="true"
      android:drawable="@drawable/checked_img" />
</selector>

0

Eu encontrei uma maneira de fazer isso sem criar suas próprias imagens. Em outras palavras, a imagem do sistema está sendo dimensionada. Não finjo que a solução seja perfeita; se alguém souber como encurtar algumas das etapas, ficarei feliz em descobrir como.

Primeiro, coloquei o seguinte na classe de atividade principal do projeto (WonActivity). Isso foi retirado diretamente do Stack Overflow - obrigado, pessoal !

/** get the default drawable for the check box */
Drawable getDefaultCheckBoxDrawable()
{
  int resID = 0;

  if (Build.VERSION.SDK_INT <= 10)
  {
    // pre-Honeycomb has a different way of setting the CheckBox button drawable
    resID = Resources.getSystem().getIdentifier("btn_check", "drawable", "android");
  }
  else
  {
    // starting with Honeycomb, retrieve the theme-based indicator as CheckBox button drawable
    TypedValue value = new TypedValue();
    getApplicationContext().getTheme().resolveAttribute(android.R.attr.listChoiceIndicatorMultiple, value, true);
    resID = value.resourceId;
  }

  return getResources().getDrawable(resID);
}

Em segundo lugar, criei uma classe para "dimensionar um drawable". Observe que é completamente diferente do ScaleDrawable padrão.

import android.graphics.drawable.*;

/** The drawable that scales the contained drawable */

public class ScalingDrawable extends LayerDrawable
{
  /** X scale */
  float scaleX;

  /** Y scale */
  float scaleY;

  ScalingDrawable(Drawable d, float scaleX, float scaleY)
  {
    super(new Drawable[] { d });
    setScale(scaleX, scaleY);
  }

  ScalingDrawable(Drawable d, float scale)
  {
    this(d, scale, scale);
  }

  /** set the scales */
  void setScale(float scaleX, float scaleY)
  {
    this.scaleX = scaleX;
    this.scaleY = scaleY;
  }

  /** set the scale -- proportional scaling */
  void setScale(float scale)
  {
    setScale(scale, scale);
  }

  // The following is what I wrote this for!

  @Override
  public int getIntrinsicWidth()
  {
    return (int)(super.getIntrinsicWidth() * scaleX);
  }

  @Override
  public int getIntrinsicHeight()
  {
    return (int)(super.getIntrinsicHeight() * scaleY);
  }
}

Por fim, defini uma classe de caixa de seleção.

import android.graphics.*;
import android.graphics.drawable.Drawable;
import android.widget.*;

/** A check box that resizes itself */

public class WonCheckBox extends CheckBox
{
  /** the check image */
  private ScalingDrawable checkImg;

  /** original height of the check-box image */
  private int origHeight;

  /** original padding-left */
  private int origPadLeft;

  /** height set by the user directly */
  private float height;

  WonCheckBox()
  {
    super(WonActivity.W.getApplicationContext());
    setBackgroundColor(Color.TRANSPARENT);

    // get the original drawable and get its height
    Drawable origImg = WonActivity.W.getDefaultCheckBoxDrawable();
    origHeight = height = origImg.getIntrinsicHeight();
    origPadLeft = getPaddingLeft();

    // I tried origImg.mutate(), but that fails on Android 2.1 (NullPointerException)
    checkImg = new ScalingDrawable(origImg, 1);
    setButtonDrawable(checkImg);
  }

  /** set checkbox height in pixels directly */
  public void setHeight(int height)
  {
    this.height = height;
    float scale = (float)height / origHeight;
    checkImg.setScale(scale);

    // Make sure the text is not overlapping with the image.
    // This is unnecessary on Android 4.2.2, but very important on previous versions.
    setPadding((int)(scale * origPadLeft), 0, 0, 0);

    // call the checkbox's internal setHeight()
    //   (may be unnecessary in your case)
    super.setHeight(height);
  }
}

É isso aí. Se você colocar um WonCheckBox em sua visualização e aplicar setHeight (), a imagem da caixa de seleção terá o tamanho correto.


0

use este código.

no layout:

<CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/my_checkbox"  *** here
        android:checked="true"/>

adicione um novo drawable: my_checkbox.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item
    android:state_checked="false"
    android:drawable="@drawable/checkbox_off_background"/>

<item
    android:state_checked="true"
    android:drawable="@drawable/checkbox_on_background"/>

e criar 2 drawable:

checkbox_off_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">

<item>
    <shape android:shape="rectangle">
        <size
            android:height="25dp"   *** your size
            android:width="25dp"/>
    </shape>
</item>

<item android:drawable="@android:drawable/checkbox_off_background"/>

e também, checkbox_on_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">

<item>
    <shape android:shape="rectangle">
        <size
            android:height="25dp"
            android:width="25dp"/>
    </shape>
</item>

<item android:drawable="@android:drawable/checkbox_on_background"/>


0

Suponha que seu xml original seja:

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

em seguida, simplesmente remova android:button="@drawable/xml_above"em sua caixa de seleção xml e faça o dimensionamento do drawable programaticamente em java (diminua o 150tamanho grande para o dp desejado):

CheckBox tickRememberPasswd = findViewById(R.id.remember_tick);

//custom selector size
Drawable drawableTick = ContextCompat.getDrawable(this, R.drawable.tick_img);
Drawable drawableUntick = ContextCompat.getDrawable(this, R.drawable.untick_img);
Bitmap bitmapTick = null;
if (drawableTick != null && drawableUntick != null) {
    int desiredPixels = Math.round(convertDpToPixel(150, this));

    bitmapTick = ((BitmapDrawable) drawableTick).getBitmap();
    Drawable dTick = new BitmapDrawable(getResources()
            , Bitmap.createScaledBitmap(bitmapTick, desiredPixels, desiredPixels, true));

    Bitmap bitmapUntick = ((BitmapDrawable) drawableUntick).getBitmap();
    Drawable dUntick = new BitmapDrawable(getResources()
            , Bitmap.createScaledBitmap(bitmapUntick, desiredPixels, desiredPixels, true));

    final StateListDrawable statesTick = new StateListDrawable();
    statesTick.addState(new int[] {android.R.attr.state_checked},
            dTick);
    statesTick.addState(new int[] { }, //else state_checked false
            dUntick);
    tickRememberPasswd.setButtonDrawable(statesTick);
}

o convertDpToPixelmétodo:

public static float convertDpToPixel(float dp, Context context) {
    Resources resources = context.getResources();
    DisplayMetrics metrics = resources.getDisplayMetrics();
    float px = dp * (metrics.densityDpi / 160f);
    return px;
}

0

Não consegui encontrar a resposta relevante para o meu requisito, mas descobri. Portanto, esta resposta é para a caixa de seleção com texto como abaixo, onde você deseja redimensionar o drawable da caixa de seleção e o texto separadamente.

insira a descrição da imagem aqui

Você precisa de dois PNGs cb_checked.png e cb_unchechecked.png para adicioná-los à pasta drawable

Agora crie cb_bg_checked.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/cb_checked"
        android:height="22dp" <!-- This is the size of your checkbox -->
        android:width="22dp"  <!-- This is the size of your checkbox -->
        android:right="6dp"   <!-- This is the padding between cb and text -->
        tools:targetApi="m"
        tools:ignore="UnusedAttribute" />
</layer-list>

E, cb_bg_unchecked.xml

 <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">
        <item android:drawable="@drawable/cb_unchechecked"
            android:height="22dp" <!-- This is the size of your checkbox -->
            android:width="22dp"  <!-- This is the size of your checkbox -->
            android:right="6dp"   <!-- This is the padding between cb and text -->
            tools:targetApi="m"
            tools:ignore="UnusedAttribute" />
    </layer-list>

Em seguida, crie um seletor XML checkbox.xml

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

Agora defina seu layout.xml assim

<CheckBox
  android:id="@+id/checkbox_with_text"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:checked="true"
  android:button="@drawable/checkbox"
  android:text="This is text"
  android:textColor="@color/white"
  android:textSize="14dp" /> <!-- Here you can resize text -->

-1

Se você deseja adicionar uma imagem personalizada à caixa de seleção, defina o botão como nulo e apenas adicione o fundo à caixa de seleção que resolve

 <CheckBox
    android:layout_width="22dp"
    android:layout_height="22dp"
    android:layout_marginLeft="-10dp"
    android:button="@null"
    android:background="@drawable/memory_selector"/>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.