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?

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>

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);