Checkbox style in listview is incorrect

Question

I am having a problem with the styling in my checkboxes which appear in listviews. The theme my app uses is Holo, but the checkboxes appear with the old style. Checkboxes that appear elsewhere look fine. I am not doing anything fancy such as creating my own style. Screenshots:

The checkboxes are supposed to look like those on the right picture. This is on v4.0.3. The checkboxes look like they should on another device I tried with v4.4.2.

XML for listview row:

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

    <CheckBox android:id="@+id/ListRow_Task_TaskComplete" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="6sp"
        android:focusable="false" />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:paddingTop="7dip"
        android:paddingBottom="7dip"
        android:layout_toRightOf="@+id/ListRow_Task_TaskComplete"
        android:layout_centerVertical="true" >

        <TextView android:id="@+id/ListRow_Task_Name" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:textSize="16sp" />

        // next two textviews are programmatically hidden right now
        <TextView android:id="@+id/ListRow_Task_Deadline" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:text=""
            android:textSize="12sp" />

        <TextView android:id="@+id/ListRow_Task_Tags" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/icon_tag"
            android:drawablePadding="4dip"
            android:textSize="12sp" />  

    </LinearLayout>

</RelativeLayout>

How can I make the checkboxes on the left look like they are supposed to?

Whaler

did u figured out the main reason?! I have similar issue and I just wonder which phone was making u funny troubles.. Samsung Galaxy S4 that is.. – Sergei

I don't fully remember the reason or if I even figured it out. I just ended up using a copy of the checkbox art from Holo. Sorry... – Whaler

The phone I was using that it did not look right on was a Galaxy S2 and the one that worked correctly was a Nexus 7 – Whaler

Answer 1

Copy the Holo checkbox images out of the android drawable folder for all dpis and resolutions. Then set the android:button attribute to the new selector xml. This way you will have complete control of how it looks on target device.

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true" android:state_focused="true"
            android:drawable="@drawable/btn_check_on_focused_holo_light" /> 
    <item android:state_checked="false" android:state_focused="true"
            android:drawable="@drawable/btn_check_off_focused_holo_light" />
    <item android:state_checked="false"
            android:drawable="@drawable/btn_check_off_holo_light" />
    <item android:state_checked="true"
            android:drawable="@drawable/btn_check_on_holo_light" />
</selector>

Digitalin

To have consistent look & feel in all devices & all version, you have to customize it as mention above. – Atcliffe

This seems to be the best solution, especially considering @CRSardar's comment. Thank you. – Whaler

Answer 2

I recently came across the same issue and found real solution, not just a workaround.

When you inflate your views in getView() method:

public View getView(int position, View convertView, ViewGroup parent) { return inflater.inflate(R.layout.list_item, parent, false); }

you need to make sure that inflater that you use contains Activity context and not Application context because Activity context is aware of the theme you use and Application is not.

So make sure you create inflater in one of the following or similar ways:

• LayoutInflater.from(activity);
• getLayoutInflater(); // from within activity
• LayoutInflater.from(parent.getContext());

In order to quickly check this solution, just replace:

return inflater.inflate(R.layout.list_item, parent, false);

with:

return LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false);

Mckenna

Answer 3

I also had this problem. I am using Samsung Galaxy S4, and CheckBox in my app appears old school type. If I run the same app in "Android Emulator", it appears fine the way I want.

Best thing I suggest, don't worry about it. Just upload the app in market place and it should be fine.

Sulfapyrazine

Answer 4

Try setting the targetSdkVersion in your AndroidManifest.xml file to the latest one (make sure you have that sdk version downloaded):

android:targetSdkVersion="19"

Bogosian

this actually can't be source of issue because he tried same app with same manifest on two different devices.. – Sergei