Android: 如何更改 CheckBox 的大小？

我想让 CheckBox 变得更小/更大一些，我该怎么做呢？

144434 次浏览
小开
最佳答案

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.

小开

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

小开

Starting with API Level 11 there is another approach exists:

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

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.

小开

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!

小开

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

小开

Well i have found many answer, But they work fine without text when we require text also with checkbox like in my UIenter image description here

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:

enter image description here

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

Hope it will help!

小开

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

小开

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

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;
}
小开

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.

enter image description here

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

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

提交答案