[android] Android: How to change CheckBox size?

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

use this code.

in layout:

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

add a new 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"/>

and end create 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"/>

and too, 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"/>

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

Starting with API Level 11 there is another approach exists:

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

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

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

(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

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

Step 3: Set that drawable into check box

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

Now its like:

You can change its width and height or viewportHeight and viewportWidth and fillColor also

Hope it will help!

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

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

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

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!

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.

If you want to add a custom image to checkbox then set button to null and just add background to checkbox that's solve

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

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

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

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.

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

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

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

Then create a 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>

Now define it your layout.xml like this

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

Assume your original xml is:

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

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