I would like to make CheckBox a bit smaller/bigger, how can I do this?
I would like to make CheckBox a bit smaller/bigger, how can I do this?
You just need to set the related drawables and set them in the checkbox:
<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" />
The trick is on how to set the drawables. Here's a good tutorial about this.
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>
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 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;
}
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"/>