How to make a checkbox look better in android

Question

This is my XML for my check box:

<CheckBox
                android:id="@+id/atm_checkbox"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:background="@color/input_color" />

And it looks like this:

http://imageshack.us/photo/my-images/528/47342915.png/

This is what i found on internet:

<CheckBox
        android:id="@+id/chkAndroid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chk_android"
        android:checked="true" />

which looks like this

how to change my checkbox to look like the one i found on internet. As my rep is <10 i cant upload image of my checkbox, or can anyone help me how to style checkbox to make it look better

I think both the xmls have similar code, but why are they looking so different?

Please share the link of images: how your checkbox look like now and how do you want to display it? — GAMA, Jun 15 '12 at 06:58

score 1 · Accepted Answer · edited Jun 15 '12 at 09:16

1

If you want custom the look of checkbox see this tutorial and find everything.

By the way, the checkbox from your link is for Android3.0 and above.

edited Jun 15 '12 at 09:16

GAMA

5,958
14
79
126

answered Jun 15 '12 at 07:09

Trung Nguyen

7,442
2
45
87

by "your link" you mean what i am currently getting? – Archie.bpgc Jun 15 '12 at 07:14
Your tutorial link. You want your checkbox like that? – Trung Nguyen Jun 15 '12 at 07:22
yeah i want like that, i am using 2.3 so this is all i can get?? :( – Archie.bpgc Jun 15 '12 at 07:23
So you can follow my link. Find checkbox style in android3.0 folder and apply to your checkbox. That tutorial is so clear – Trung Nguyen Jun 15 '12 at 07:34
but in the link which i posted in the question says "P.S This project is developed in Eclipse 3.7, and tested with Android 2.3.3." – Archie.bpgc Jun 15 '12 at 07:35
Did you read my link? Checkbox appearance not depent on Android version. It's just image+ selector. You can find the resource in android3.0 and copy to your project. – Trung Nguyen Jun 15 '12 at 07:41
i could solve my problem by changing the width and height to wrap content, don't know how this mattered – Archie.bpgc Jun 15 '12 at 08:07
AFAIK, checkbox and radio button has fixed size so if you specify height and width, it makes your checkbox is clipped. So that my tutorial link is useful for anyone who want to customize. – Trung Nguyen Jun 15 '12 at 08:42

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

CheckBox derive from Button class, so you can set a background image like button. See this link, may be it is what you are looking for.

edited May 23 '17 at 12:07

Community

1
1

answered Jun 15 '12 at 06:51

orchidrudra

1,172
1
12
30

using the code in the link given (adding image), gave me a similar checkbox, but instead of a square there is a start now, which is not visible 100%, some 10% of it is cut to the right, is this because i am not using width = "wrap content" ? – Archie.bpgc Jun 15 '12 at 07:11

ChuongPham · Answer 3 · 2013-10-06T18:29:52.863

If you want a clean design without codes, use:

<CheckBox
   android:id="@+id/checkBox1"
   android:layout_height="wrap_content"
   android:layout_width="wrap_content"
   android:drawableLeft="@android:color/transparent"
   android:drawablePadding="10dp"
   android:text="CheckBox"/>

The trick is to set colour to transparent for android:drawableLeft and assign a value for android:drawablePadding. Also, transparency allows you to use this technique on any background colour without the side effect - like colour mismatch.

How to make a checkbox look better in android

3 Answers3