Android: Comment changer la taille de CheckBox?


92

Je voudrais rendre CheckBox un peu plus petit / plus grand, comment puis-je faire cela?

Réponses:


57

Il vous suffit de définir les drawables associés et de les définir dans la case à cocher:

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

L'astuce consiste à définir les drawables. Voici un bon tutoriel à ce sujet .


11
Gardez à l'esprit que différents appareils peuvent avoir des thèmes personnalisés installés. Si vous ajustez la taille en plaçant votre propre image personnalisée, assurez-vous de remplacer toutes les cases à cocher de l'application (même s'il n'y a pas de changement de taille), sinon vous risquez de vous retrouver avec un mélange de styles sur certains appareils.
DougW

142

À partir du niveau d'API 11, il existe une autre approche:

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

5
Cette technique redimensionnera également l'étiquette de texte. Pour compenser cela, j'ai ajusté la taille du texte comme suit checkBox.TextSize = (int) (TEXT_SIZE / SCALE_FACTOR);
samis

5
Si je fais cela pour augmenter, par exemple le mettre à l'échelle à "2.0", alors il s'agrandit, mais l'image est tronquée, je vois la moitié droite de la case à cocher et la moitié gauche du texte. Un moyen de contourner cela?
Al Lelopath

4
sympa, ça prend quand même le même espace. Pour résoudre ce problème, j'ai utilisé des marges -ve, comme: android: layout_marginLeft = "- 10dp"
M. Usman Khan

Je ne serai probablement pas affiché dans l'aperçu de l'EDI, mais CheckBox sera mis à l'échelle au moment de l'exécution
Leo Droidcoder

Montre pour moi en vue AS Design. Solution simple pour quelque chose qui ne devrait pas avoir besoin d'une solution.Je pense que l'API ou l'appareil affecte. en utilisant le dispositif Gennymotion à l'API 22, il semble que 0,8 soit le Y le plus élevé (mise en page linéaire horizontale), tandis qu'el cheapo, Onix Tablet ne se
coupe

97

Voici une meilleure solution qui ne découpe et / ou ne rend pas flou le dessinable, mais ne fonctionne que si la case à cocher ne contient pas de texte lui-même (mais vous pouvez toujours avoir du texte, c'est juste plus compliqué, voir à la fin).

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

Le résultat:

À quoi ressemblait la solution précédente scaleXet à quoi scaleYressemblait:

Vous pouvez avoir une case à cocher de texte en ajoutant une à TextViewcôté et en ajoutant un écouteur de clic sur la mise en page parent, puis en déclenchant la case par programme.


2
L'utilisation de l'arrière-plan ne fonctionne pas si votre case à cocher contient du texte.
Zach Green

@ZachGreen oui en effet. Je n'ai pas pensé à la possibilité que cela ne fonctionnerait pas si la case à cocher contenait du texte, la mienne ne l'avait pas fait.
Mettra à

4
C'est une bien meilleure réponse que celle acceptée.
vtlinh le

à 160dp ressemble à du granuleux. Il semble que la résolution soit trop basse
Gianluca Demarinis

comment définir la teinte pour une telle case à cocher?
YTerle

16

Eh bien, j'ai trouvé de nombreuses réponses, mais elles fonctionnent bien sans texte lorsque nous avons besoin de texte également avec une case à cocher comme dans mon interface utilisateurentrez la description de l'image ici

Ici, selon mes exigences d'interface utilisateur, je ne peux pas ne pas augmenter TextSize, donc une autre option que j'ai essayée est scaleX et scaleY (Strach la case à cocher) et un sélecteur XML personnalisé avec des images .png (cela crée également un problème avec une taille d'écran différente)

Mais nous avons une autre solution pour cela, c'est Vector Drawable

Faites-le en 3 étapes.

Étape 1: Copiez ces trois Vector Drawable dans votre dossier Drawable

vérifié.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>

( Notez que si vous travaillez avec Android Studio, vous pouvez également ajouter ces Vector Drawable à partir de là, faites un clic droit sur votre dossier dessinable puis New / Vector Asset, puis sélectionnez ces dessinables à partir de là )

Étape 2: créer un sélecteur XML pour la case à cocher

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>

Étape 3: Définissez ce dessinable dans la case à cocher

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

Maintenant c'est comme:

entrez la description de l'image ici


Vous pouvez modifier sa largeur et sa hauteur ou viewportHeight et viewportWidth et fillColor également


J'espère que cela aidera!


2
Dans mon cas, j'ai dû définir android:button="@null"et android:background="@drawable/check_box_selector"faire ajuster la taille de la case à cocher.
Artur Szymański

cette approche brise les paddings
Oleh Liskovych

9

j'utilise

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

pour ajuster la taille de la case à cocher

puis je fixe des marges comme ça

android:layout_marginLeft="-10dp"

pour ajuster l'emplacement de la case à cocher.


Frère, même si cela le réduit - la marge ne fonctionne pas dans mon cas. Mes images de case à cocher sont de 173 x 93 - la taille de la case à cocher occupe toujours cet espace. Antoine Bolvy est une solution plus flexible à mon avis.
Alexey Shevelyov

6

Voici ce que j'ai fait, premier set:

android:button="@null"

et aussi définir

android:drawableLeft="@drawable/selector_you_defined_for_your_checkbox"

puis dans votre code Java:

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

Cela fonctionne pour moi et j'espère que cela fonctionnera pour vous!


4

MISE À JOUR : cela ne fonctionne qu'à partir de l'API 17 ...


Pour ajouter aux autres réponses brillantes déjà données, vous ne pouvez que la case à cocher aussi petite que la taille du texte le permet.

Selon ma réponse à cette question: - comment pouvons-nous réduire la taille de la case à cocher s'il vous plaît me donner une idée


CheckBox tire sa hauteur du TEXTE ainsi que de l'image.

Définissez ces propriétés dans votre XML:

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

Bien sûr, cela ne fonctionne que si vous ne voulez pas de texte (a fonctionné pour moi).

Sans ces changements, le CheckBoxme donnait une grande marge autour de mon image, comme mentionné par Joe


2

Vous pouvez essayer la solution suivante pour modifier la taille de custom checkboxen définissant les propriétés suivantes sur Checkboxdans votre fichier de disposition. A travaillé pour moi

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

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

ajouter les lignes suivantes au fichier dessinable

<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

J'ai trouvé un moyen de le faire sans créer vos propres images. En d'autres termes, l'image système est mise à l'échelle. Je ne prétends pas que la solution est parfaite; si quelqu'un connaît un moyen de raccourcir certaines étapes, je serai heureux de savoir comment.

Tout d'abord, je place ce qui suit dans la classe d'activité principale du projet (WonActivity). Cela a été tiré directement de Stack Overflow - merci les gars !

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

Deuxièmement, j'ai créé une classe pour «mettre à l'échelle un dessinable». Veuillez noter qu'il est complètement différent du 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);
  }
}

Enfin, j'ai défini une classe de case à cocher.

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

C'est tout. Si vous mettez un WonCheckBox dans votre vue et appliquez setHeight (), l'image de la case à cocher sera de la bonne taille.


0

utilisez ce code.

dans la mise en page:

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

ajouter un nouveau dessinable: 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"/>

et fin créer 2 dessinables:

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

et aussi, 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

Supposons que votre xml d'origine est:

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

puis supprimez simplement android:button="@drawable/xml_above"dans votre case à cocher xml, et effectuez une mise à l'échelle dessinable par programmation en java (diminuez la 150grande taille à votre dp souhaité):

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

la convertDpToPixelméthode:

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

Je n'ai pas pu trouver la réponse pertinente à mon besoin que je l'ai compris. Donc, cette réponse est pour la case à cocher avec du texte comme ci-dessous où vous souhaitez redimensionner la case à cocher dessiné et le texte séparément.

entrez la description de l'image ici

Vous avez besoin de deux PNG cb_checked.png et cb_unchechecked.png pour les ajouter au dossier dessinable

Créez maintenant 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>

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

Créez ensuite un sélecteur 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>

Maintenant, définissez votre layout.xml comme ceci

<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 vous souhaitez ajouter une image personnalisée à la case à cocher, définissez le bouton sur null et ajoutez simplement un arrière-plan à la case à cocher qui résout

 <CheckBox
    android:layout_width="22dp"
    android:layout_height="22dp"
    android:layout_marginLeft="-10dp"
    android:button="@null"
    android:background="@drawable/memory_selector"/>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.