Checkbox text displays on top of box

Question

The following XML shows a series of checkboxes for selection of languages. It looks fine in JB 4.2, however the same layout on JB 4.1 has the text on top of the checkbox. Like so:

enter image description here

Anything I am not doing as per standard?

Code :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">


    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Language Setup"
            android:id="@+id/textView1"
            android:layout_gravity="center"
            android:textSize="30dp"
            android:paddingBottom="10dp"/>
    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Please select the languages you would like :"
            android:id="@+id/textView"
            android:layout_marginLeft="10dp"/>

    <CheckBox android:id="@+id/chkInstallArabic"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Arabic"
              android:checked="true"
              android:enabled="false"
              android:paddingLeft="10dp"
              android:layout_marginLeft="10dp"/>

    <CheckBox android:id="@+id/chkInstallEnglish"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="English"
              android:checked="false"
              android:paddingLeft="10dp"
              android:layout_marginLeft="10dp"/>

    <CheckBox android:id="@+id/chkInstallUrdu"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Urdu"
              android:checked="false"
              android:paddingLeft="10dp"
              android:layout_marginLeft="10dp"/>

    <CheckBox android:id="@+id/chkInstallIndonesian"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Indonesian"
              android:checked="false"
              android:paddingLeft="10dp"
              android:layout_marginLeft="10dp"/>

    <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="I am happy!"
            android:id="@+id/btnInstall"
            android:onClick="onRunButtonClicked"
            />
</LinearLayout>

Sorry I had done so, SO didnt pick it up for some reason, reformatted now you can see it. — sprocket12, Nov 12 '13 at 23:09
What happens when you remove the `android:paddingLeft="10dp"` and `android:layout_marginLeft="10dp"` from ` — Shobhit Puri, Nov 12 '13 at 23:11
Mostly because you overrode the padding attribute. Read this: http://stackoverflow.com/questions/4037795/android-spacing-between-checkbox-and-text . It will help you understand the reason :) — Shobhit Puri, Nov 12 '13 at 23:16
@ShobhitPuri you are spot on, it even mentions that the behaviour changed in 4.2 many thanks. I will try and read more before posting next time. — sprocket12, Nov 12 '13 at 23:19

score 2 · Accepted Answer · edited May 23 '17 at 12:06

2

Quoting Android - Spacing between CheckBox and text , the problem seems to be that Android's CheckBox control already uses the android:paddingLeft property to get the text where it is. If you override it, it might it messes up the layout. So, if you remove the android:paddingLeft="10dp" and android:layout_marginLeft="10dp", it should do the trick.

edited May 23 '17 at 12:06

Community

1
1

answered Nov 12 '13 at 23:20

Shobhit Puri

25,769
11
95
124

score 1 · Answer 2 · answered Nov 12 '13 at 23:05

1

Increase the padding Left in your checkbox

<CheckBox
    android:id="@+id/chkInstallArabic"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:checked="true"
    android:paddingLeft="40dp"
    android:text="Arabic" />

answered Nov 12 '13 at 23:05

Wajdi Hh

785
3
9

Yes I can add padding, but it seems a bit of a hack, will it affect my layout on phones on which it would have look ok without this? – sprocket12 Nov 12 '13 at 23:10
If you are worry about multi-reolution screen, there is no problem, because 40 dp can't affect the main organisation of your layout – Wajdi Hh Nov 12 '13 at 23:20

score 0 · Answer 3 · answered Oct 28 '14 at 12:43

0

Adding the following value to the checkbox solved the problem in my case

android:gravity="center"

answered Oct 28 '14 at 12:43

zstart

19
2
7

Checkbox text displays on top of box

3 Answers3