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:

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>

Answer 1

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.

Answer 2

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

Answer 3

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

android:gravity="center"