Android: ¿Cómo cambiar el tamaño de CheckBox?


92

Me gustaría hacer CheckBox un poco más pequeño / más grande, ¿cómo puedo hacer esto?

Respuestas:


57

Solo necesita configurar los elementos de diseño relacionados y configurarlos en la casilla de verificación:

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

El truco está en cómo configurar los elementos de diseño. Aquí hay un buen tutorial sobre esto .


11
Tenga en cuenta que diferentes dispositivos pueden tener instalados temas personalizados. Si ajusta el tamaño colocando su propia imagen personalizada, asegúrese de reemplazar todas las casillas de verificación en la aplicación (incluso si no hay cambio de tamaño) o, de lo contrario, puede terminar con una combinación de estilos en ciertos dispositivos.
DougW

142

A partir del nivel de API 11, existe otro enfoque:

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

5
Esta técnica también escalará la etiqueta de texto. Para compensar esto, ajusté el tamaño del texto de la siguiente manera checkBox.TextSize = (int) (TEXT_SIZE / SCALE_FACTOR);
samis

5
Si hago esto para aumentar, por ejemplo, escalarlo a "2.0", entonces se agranda, pero la imagen está recortada, veo la mitad derecha de la casilla de verificación y la mitad izquierda del texto. ¿Alguna forma de evitar esto?
Al Lelopath

4
bueno, todavía ocupa el mismo espacio. Para resolver eso, usé -ve márgenes, como: android: layout_marginLeft = "- 10dp"
M. Usman Khan

Probablemente no se me mostrará en la vista previa del IDE, pero CheckBox se escalará en tiempo de ejecución
Leo Droidcoder

Se muestra en la vista AS Design para mí. Solución simple para algo que no debería necesitar una solución. Creo que la API o el dispositivo afectan. al usar el dispositivo Gennymotion en API 22, parece que 0.8 es el Y más alto (LinearLayout horizontal), mientras que el barato, Onix Tablet no se
recorta

98

Aquí hay una mejor solución que no recorta y / o desenfoca el dibujo, pero solo funciona si la casilla de verificación no tiene texto en sí (pero aún puede tener texto, es más complicado, vea al 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"/>

El resultado:

Cómo se veía la solución anterior scaleXy scaleY:

Puede tener una casilla de verificación de texto agregando un TextViewal lado y agregando un oyente de clic en el diseño principal, luego activando la casilla de verificación mediante programación.


2
El uso de fondo no funciona si su casilla de verificación tiene texto.
Zach Green

@ZachGreen sí, de hecho. No pensé en la posibilidad de que no funcionaría si la casilla de verificación tuviera texto, la mía no. Actualizará la respuesta
Antoine Bolvy

4
Esta es una respuesta mucho mejor que la aceptada.
vtlinh

a 160 dp parece granulado. Parece que tiene una resolución demasiado baja
Gianluca Demarinis

¿Cómo configuro el tinte para dicha casilla de verificación?
YTerle

16

Bueno, he encontrado muchas respuestas, pero funcionan bien sin texto cuando necesitamos texto también con casilla de verificación como en mi interfaz de usuarioingrese la descripción de la imagen aquí

Aquí, según mi requisito de interfaz de usuario, no puedo no aumentar TextSize, así que otra opción que probé es scaleX y scaleY (marque la casilla de verificación) y el selector xml personalizado con imágenes .png (también está creando un problema con diferentes tamaños de pantalla)

Pero tenemos otra solución para eso, que es Vector Drawable

Hágalo en 3 pasos.

Paso 1: Copie estos tres Vector Drawable en su carpeta dibujable

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

( Tenga en cuenta que si está trabajando con Android Studio, también puede agregar estos Vector Drawable desde allí, haga clic con el botón derecho en su carpeta dibujable, luego New / Vector Asset, luego seleccione estos dibujables desde allí )

Paso 2: crea un selector 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>

Paso 3: establece ese dibujable en la casilla de verificación

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

Ahora es como:

ingrese la descripción de la imagen aquí


Puede cambiar su ancho y alto o viewportHeight y viewportWidth y fillColor también


¡Espero que te ayude!


2
En mi caso tuve que configurar android:button="@null"y android:background="@drawable/check_box_selector"hacer que ajustara el tamaño de la casilla de verificación.
Artur Szymański

este enfoque rompe las almohadillas
Oleh Liskovych

9

yo suelo

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

para ajustar el tamaño de la casilla de verificación

luego establezco márgenes como este

android:layout_marginLeft="-10dp"

para ajustar esta ubicación de la casilla de verificación.


Hermano, aunque lo reduce, el margen no funciona en mi caso. Las imágenes de mi casilla de verificación son 173 x 93; el tamaño de la casilla de verificación aún ocupa ese espacio. Antoine Bolvy es una solución más flexible en mi opinión.
Alexey Shevelyov

6

Esto fue lo que hice, primer set:

android:button="@null"

y también establecer

android:drawableLeft="@drawable/selector_you_defined_for_your_checkbox"

luego en su 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 mí, y espero que funcione para usted!


4

ACTUALIZACIÓN : esto solo funciona desde API 17 en adelante ...


Para agregar a las otras respuestas brillantes ya dadas, solo puede hacer que la casilla de verificación sea tan pequeña como lo permita el tamaño del texto.

Según mi respuesta a esta pregunta: - ¿cómo podemos reducir el tamaño de la casilla de verificación? Por favor, dame una idea.


CheckBox deriva su altura tanto del TEXTO como de la imagen.

Establezca estas propiedades en su XML:

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

Por supuesto, esto solo funciona si no quieres texto (funcionó para mí).

Sin estos cambios, CheckBoxme estaba dando un gran margen alrededor de mi imagen, como lo mencionó Joe.


2

Puede probar la siguiente solución para cambiar el tamaño custom checkboxestableciendo las siguientes propiedades en Checkboxen su archivo de diseño. Trabajó para mi

android: scaleX = "0.8" android: scaleY = "0.8"

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

agregue las siguientes líneas al archivo dibujable

<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

Encontré una manera de hacerlo sin crear tus propias imágenes. En otras palabras, la imagen del sistema se está escalando. No pretendo que la solución sea perfecta; Si alguien sabe cómo acortar algunos de los pasos, me complacerá saber cómo.

Primero, coloco lo siguiente en la clase de actividad principal del proyecto (WonActivity). Esto fue tomado directamente de Stack Overflow, ¡ gracias chicos !

/** 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);
}

En segundo lugar, creé una clase para "escalar un dibujo". Tenga en cuenta que es completamente diferente del ScaleDrawable estándar.

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

Finalmente, definí una clase de casilla de verificación.

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

Eso es. Si coloca un WonCheckBox en su vista y aplica setHeight (), la imagen de la casilla de verificación tendrá el tamaño correcto.


0

usa este código.

en diseño:

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

agregar un nuevo elemento de dibujo: 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"/>

y terminar crea 2 dibujables:

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

y también 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

Suponga que su xml original es:

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

luego simplemente elimine android:button="@drawable/xml_above"en su casilla de verificación xml, y haga un escalado dibujable programáticamente en java (disminuya el 150tamaño grande a su dp deseado):

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

el 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

No pude encontrar la respuesta relevante para mi requisito, que lo descubrí. Por lo tanto, esta respuesta es para la casilla de verificación con texto como a continuación, donde desea cambiar el tamaño de la casilla de verificación dibujable y el texto por separado.

ingrese la descripción de la imagen aquí

Necesita dos PNG cb_checked.png y cb_unchechecked.png para agregarlos a la carpeta dibujable

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

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

Luego crea un selector 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>

Ahora defínalo como su layout.xml

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

0

Si desea agregar una imagen personalizada a la casilla de verificación, establezca el botón en nulo y simplemente agregue el fondo a la casilla de verificación que se resuelve

 <CheckBox
    android:layout_width="22dp"
    android:layout_height="22dp"
    android:layout_marginLeft="-10dp"
    android:button="@null"
    android:background="@drawable/memory_selector"/>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.