Android How to change CheckBox size

Question

I would like to make CheckBox a bit smaller bigger  how can I do this

User · Answer

I use  android scaleX  0 70  android scaleY  0 70   to ajust the size of checkbox  then I set margins like this  android layout marginLeft  -10dp    to adjust ths location of the checkbox

User · Answer

You just need to set the related drawables and set them in the checkbox    lt 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    gt    The trick is on how to set the drawables  Here s a good tutorial about this

User · Answer

Here was what I did  first set   android button   null    and also set   android drawableLeft   drawable selector you defined for your checkbox    then in your Java code   Drawable d   mCheckBox getCompoundDrawables   0   d setBounds 0  0  width you prefer  height you prefer   mCheckBox setCompoundDrawables d  null  null  null     It works for me  and hopefully it will work for you

User · Answer

UPDATE  this only works from API 17 onwards       To add to the other brilliant answers already given  you can only make the checkbox as small as the text size allows   As per my answer on this question   - how can we reduce the size of checkbox please give me an idea    CheckBox derives its height from the TEXT as well as the image   Set these properties in your XML   android text    android textSize  0sp    Of course this only works if you want no text  worked for me    Without these changes  the CheckBox was giving me a big margin around my image  as mentioned by Joe

User · Answer

I found a way to do it without creating your own images   In other words  the system image is being scaled   I don t pretend that the solution is perfect  if anyone knows a way to shorten some of the steps  I ll be happy to find out how   First  I put the following in the main activity class of the project  WonActivity     This was taken directly from Stack Overflow -- thank you guys       get the default drawable for the check box    Drawable getDefaultCheckBoxDrawable       int resID   0     if  Build VERSION SDK INT  lt   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       Second  I created a class to  scale a drawable    Please notice that it is completely different from the standard ScaleDrawable   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           Finally  I defined a checkbox class   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           That s it   If you put a WonCheckBox in your view and apply setHeight    the check-box image will be of the right size

User · Answer

Well i have found many answer  But they work fine without text when we require text also with checkbox like in my UI   Here as per my UI requirement i can t not increase TextSize so other option i tried is scaleX and scaleY  Strach the check box  and custom xml selector with  png Images its also creating problem with different screen size      But we have another solution for that  that is Vector Drawable   Do it in 3 steps   Step 1  Copy these three Vector Drawable to your drawable folder   checked xml   lt vector xmlns android  http   schemas android com apk res android  android width  16dp  android height  16dp  android viewportHeight  24 0  android viewportWidth  24 0  gt   lt 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    gt   lt  vector gt    un checked xml   lt vector xmlns android  http   schemas android com apk res android  android width  16dp  android height  16dp  android viewportHeight  24 0  android viewportWidth  24 0  gt   lt 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    gt   lt  vector gt     Note if you are workiong with Android Studio  you can also add these Vector Drawable from there  Right click on your drawable folder then New Vector Asset  then select these drawable from there   Step 2  Create XML selector for check box  check box selector xml   lt  xml version  1 0  encoding  utf-8   gt    lt selector xmlns android  http   schemas android com apk res android  gt   lt item android drawable   drawable checked  android state checked  true    gt   lt item android drawable   drawable un checked    gt   lt  selector gt    Step 3  Set that drawable into check box   lt 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    gt    Now its like          You can change its width and height or viewportHeight and viewportWidth   and fillColor also     Hope it will help

User · Answer

You can try the following solution to change the size of custom checkbox by setting the following properties to Checkbox in your layout file  Worked for 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    add following lines to drawable file    lt selector xmlns android  http   schemas android com apk res android  gt    lt item android state checked  false        android drawable   drawable unchecked img    gt   lt item android state checked  true        android drawable   drawable checked img    gt   lt  selector gt

User · Answer

use this code   in layout    lt CheckBox         android layout width  wrap content          android layout height  wrap content          android button   drawable my checkbox       here         android checked  true   gt    add a new drawable    my checkbox xml   lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt    lt item     android state checked  false      android drawable   drawable checkbox off background   gt    lt item     android state checked  true      android drawable   drawable checkbox on background   gt      and end create 2 drawable    checkbox off background xml   lt  xml version  1 0  encoding  utf-8   gt   lt layer-list     xmlns android  http   schemas android com apk res android  gt    lt item gt       lt shape android shape  rectangle  gt           lt size             android height  25dp        your size             android width  25dp   gt       lt  shape gt   lt  item gt    lt item android drawable   android drawable checkbox off background   gt      and too  checkbox on background xml   lt  xml version  1 0  encoding  utf-8   gt   lt layer-list     xmlns android  http   schemas android com apk res android  gt    lt item gt       lt shape android shape  rectangle  gt           lt size             android height  25dp              android width  25dp   gt       lt  shape gt   lt  item gt    lt item android drawable   android drawable checkbox on background   gt

User · Answer

If you want to add a custom image to checkbox then set button to null and just add background to checkbox that s solve   lt CheckBox     android layout width  quot 22dp quot      android layout height  quot 22dp quot      android layout marginLeft  quot -10dp quot      android button  quot  null quot      android background  quot  drawable memory selector quot   gt

User · Answer

I could not find the relevant answer for my requirement which I figured it out  So  this answer is for checkbox with text like below where you want to resize the checkbox drawable and text separately     You need two PNGs cb checked png and cb unchechecked png add them to drawable folder  Now create cb bg checked xml   lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns tools  http   schemas android com tools      xmlns android  http   schemas android com apk res android  gt       lt item android drawable   drawable cb checked          android height  22dp   lt  -- This is the size of your checkbox -- gt          android width  22dp    lt  -- This is the size of your checkbox -- gt          android right  6dp     lt  -- This is the padding between cb and text -- gt          tools targetApi  m          tools ignore  UnusedAttribute    gt   lt  layer-list gt    And  cb bg unchecked xml    lt  xml version  1 0  encoding  utf-8   gt       lt layer-list xmlns android  http   schemas android com apk res android          xmlns tools  http   schemas android com tools  gt           lt item android drawable   drawable cb unchechecked              android height  22dp   lt  -- This is the size of your checkbox -- gt              android width  22dp    lt  -- This is the size of your checkbox -- gt              android right  6dp     lt  -- This is the padding between cb and text -- gt              tools targetApi  m              tools ignore  UnusedAttribute    gt       lt  layer-list gt    Then create a selector XML checkbox xml   lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android drawable   drawable cb bg checked  android state checked  true   gt       lt item android drawable   drawable cb bg unchecked  android state checked  false   gt   lt  selector gt    Now define it your layout xml like this   lt 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    gt   lt  -- Here you can resize text -- gt

User · Answer

Assume your original xml is    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state checked  true          android drawable   drawable tick img    gt       lt item android state checked  false          android drawable   drawable untick img    gt   lt  selector gt    then simply remove android button   drawable xml above  in your checkbox xml  and do drawable scaling programmatically in java  decrease the 150 big size to your desired dp    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  amp  amp  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       the convertDpToPixel method   public static float convertDpToPixel float dp  Context context        Resources resources   context getResources        DisplayMetrics metrics   resources getDisplayMetrics        float px   dp    metrics densityDpi   160f       return px

User · Answer

Starting with API Level 11 there is another approach exists    lt CheckBox             android scaleX  0 70      android scaleY  0 70    gt

User · Answer

Here is a better solution which does not clip and or blur the drawable  but only works if the checkbox doesn t have text itself  but you can still have text  it s just more complicated  see at the end     lt CheckBox     android id    id item switch      android layout width  160dp      lt  -- This is the size you want -- gt      android layout height  160dp      android button   null      android background   android attr listChoiceIndicatorMultiple   gt    The result         What the previous solution with scaleX and scaleY looked like         You can have a text checkbox by adding a TextView beside it and adding a click listener on the parent layout  then triggering the checkbox programmatically

[android] Android: How to change CheckBox size?

Examples related to android

Examples related to checkbox