Custom checkboxes for CheckBoxPreferences on Android - Logan676/seadroid GitHub Wiki

For an App I'm writing I need to use custom checkboxes in a PreferenceScreen. I want to use the CheckboxPreferences as it's designed for that. Many searches lead to StackOverflow, but caused me a stack overflow as well as they didn't work. In this (short) post I outline my findings and provide a working solution step by step.

Step 1 You need a custom checkbox. This can be defined in a drawable. In this case I've called the file checkbox.xml and placed it in the drawable folder. The code defines the images for two states: if the checkbox is enabled and when it's disabled. For this file looks like this. <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:drawable="@drawable/checkbox_checked" /> <!-- checked --> <item android:state_checked="false" android:drawable="@drawable/checkbox_unchecked" /> <!-- default --> </selector> Step 2

We need a layout for customized preferences. This layout defines the same stuff as the ' regular' preference does (text, summary etc.). Note the last part in the following file (called checkbox_preference.xml and placed in the layout folder). It loads our custom checkbox! `

<RelativeLayout android:layout_width="wrap_content"
    android:layout_height="wrap_content" android:layout_marginLeft="15dip"
    android:layout_marginRight="6dip" android:layout_marginTop="6dip"
    android:layout_marginBottom="6dip" android:layout_weight="1">

    <TextView android:id="@+android:id/title"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:singleLine="true" android:textAppearance="?android:attr/textAppearanceLarge"
        android:ellipsize="marquee" android:fadingEdge="horizontal" />

    <TextView android:id="@+android:id/summary"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_below="@android:id/title" android:layout_alignLeft="@android:id/title"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:maxLines="4" />

</RelativeLayout>

` Step 3

Now the code below is the actual layout which you inflate with your SharedPreferences in your Activity. The layout attribute is used to put the custom layout with the custom checkbox as an item in there. `

<PreferenceCategory
	android:title="@string/category_title">
	
<CheckBoxPreference
android:key="preferenceKey"
android:title="@string/preferenceTitle"
android:defaultValue="false"
android:layout="@layout/checkbox_preference"
/>
</PreferenceCategory>

` Step 4

There is no step 4. You're done! It shouldn't be that hard to find and use these things. Unfortunately many same questions, but more different (and often not / not completely working replies / solutions) are posed on sites like StackOverflow which makes it harder to find the real solution. Hopefully this post is a worthy addition to the interwebs and a valuable resource for Android designers facing the same problem.

Be Sociable, Share!