Android: come modificare le dimensioni del CheckBox?

Vorrei rendere CheckBox un po 'più piccolo / più grande, come posso farlo?

Devi solo impostare i relativi drawables e impostarli nella casella di controllo:

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

Il trucco sta nel come impostare i drawables. Ecco un buon tutorial su questo .

A partire dal livello API 11 esiste un altro approccio:

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

Ecco una soluzione migliore che non ritaglia e / o sfoca il disegnabile, ma funziona solo se la casella di controllo non ha il testo stesso (ma puoi ancora avere del testo, è solo più complicato, vedi alla fine).

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

Il risultato:

Qual è l' aspetto scaleXe l' scaleYaspetto della soluzione precedente :

Puoi avere una casella di controllo di testo aggiungendo un TextViewaccanto ad essa e aggiungendo un listener di clic sul layout principale, quindi attivando la casella di controllo a livello di programmazione.

Bene, ho trovato molte risposte, ma funzionano bene senza testo quando abbiamo bisogno di testo anche con la casella di controllo come nella mia interfaccia utente

Qui, secondo il mio requisito dell'interfaccia utente, non posso non aumentare TextSize, quindi un'altra opzione che ho provato è scaleX e scaleY (Strach la casella di controllo) e selettore xml personalizzato con immagini .png (sta anche creando problemi con diverse dimensioni dello schermo)

Ma abbiamo un'altra soluzione per questo, che è Vector Drawable

Fallo in 3 passaggi.

Passaggio 1: copia questi tre Vector Drawable nella cartella drawable

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

( Nota se stai lavorando con Android Studio, puoi anche aggiungere questi Vector Drawable da lì, fare clic con il pulsante destro del mouse sulla cartella disegnabile, quindi su Nuovo / Asset vettoriale, quindi selezionare questi disegnabili da lì )

Passaggio 2: creare un selettore XML per 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>

Passaggio 3: imposta quel disegnabile nella casella di controllo

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

Ora è come:

È possibile modificare la larghezza e l'altezza o anche viewportHeight e viewportWidth e fillColor

Spero che possa aiutare!

Io uso

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

per regolare la dimensione della casella di controllo

quindi ho impostato i margini in questo modo

android:layout_marginLeft="-10dp"

per regolare la posizione della casella di controllo.

Ecco cosa ho fatto, primo set:

android:button="@null"

e anche impostare

android:drawableLeft="@drawable/selector_you_defined_for_your_checkbox"

quindi nel tuo codice Java:

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

Funziona per me, e spero che funzioni anche per te!

AGGIORNAMENTO : funziona solo dall'API 17 in poi ...

Per aggiungere alle altre risposte brillanti già fornite, puoi solo rendere la casella di controllo piccola quanto lo consente la dimensione del testo.

Secondo la mia risposta su questa domanda: - come possiamo ridurre le dimensioni della casella di controllo per favore dammi un'idea

CheckBox deriva la sua altezza dal TESTO e dall'immagine.

Imposta queste proprietà nel tuo XML:

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

Ovviamente funziona solo se non vuoi testo (ha funzionato per me).

Senza questi cambiamenti, CheckBoxmi dava un grande margine intorno alla mia immagine, come menzionato da Joe

È possibile provare la seguente soluzione per modificare le dimensioni custom checkboximpostando le seguenti proprietà Checkboxnel file di layout. Ha funzionato per me

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

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

aggiungi le seguenti righe al file disegnabile

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

Ho trovato un modo per farlo senza creare le tue immagini. In altre parole, l'immagine del sistema viene ridimensionata. Non pretendo che la soluzione sia perfetta; se qualcuno conosce un modo per abbreviare alcuni passaggi, sarò felice di scoprire come.

Innanzitutto, inserisco quanto segue nella classe di attività principale del progetto (WonActivity). Questo è stato preso direttamente da Stack Overflow - grazie ragazzi !

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

In secondo luogo, ho creato una classe per "ridimensionare un disegnabile". Si noti che è completamente diverso dallo ScaleDrawable standard.

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

Infine, ho definito una classe di checkbox.

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

Questo è tutto. Se metti un WonCheckBox nella tua vista e applichi setHeight (), l'immagine della casella di controllo avrà la dimensione giusta.

usa questo codice.

nel layout:

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

aggiungi un nuovo 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 alla fine crea 2 disegnabili:

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

Supponi che il tuo xml originale sia:

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

quindi rimuovi semplicemente android:button="@drawable/xml_above"nella tua casella di controllo xml ed esegui il ridimensionamento disegnabile programmaticamente in java (riduci la 150dimensione grande al dp desiderato):

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

il convertDpToPixelmetodo:

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

Non sono riuscito a trovare la risposta pertinente per la mia esigenza che ho capito. Quindi, questa risposta è per la casella di controllo con il testo come di seguito in cui si desidera ridimensionare la casella di controllo disegnabile e il testo separatamente.

Hai bisogno di due PNG cb_checked.png e cb_unchechecked.png per aggiungerli alla cartella disegnabile

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

Quindi creare un selettore 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>

Ora definiscilo il tuo layout.xml in questo modo

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

Se desideri aggiungere un'immagine personalizzata alla casella di controllo, imposta il pulsante su null e aggiungi semplicemente lo sfondo alla casella di controllo che è stata risolta

 <CheckBox
    android:layout_width="22dp"
    android:layout_height="22dp"
    android:layout_marginLeft="-10dp"
    android:button="@null"
    android:background="@drawable/memory_selector"/>