【Android】CheckBoxPreferenceをカスタマイズ

CheckBoxPreferenceの見た目をカスタマイズします。
タイトルやサマリーの文字サイズ・色の変更や、チェックボックスを画像に変える方法を紹介します。
(確認環境:Android4.1)

まずプリファレンスのレイアウトです。
(例：preferences.xml。res/xml/に作成)

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:switchpref="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <PreferenceCategory
        android:key="hogefuga"
        android:title="カテゴリー" >

        <CheckBoxPreference
            android:key="hoge_checkbox"
            android:summary="@string/hoge_string"
            android:title="タイトル"
            android:layout="@layout/custom_checkbox_preference"
            android:widgetLayout="@layout/custom_checkbox" />
        
    </PreferenceCategory>

</PreferenceScreen>

上記の「custom_checkbox_preference」でカスタムレイアウトを指定し、
「custom_checkbox」でチェックボックスの画像を変更します。

custom_checkbox_preference.xmlです。res/layoutに作成します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:minHeight="?android:attr/listPreferredItemHeight"
    android:paddingRight="?android:attr/scrollbarSize"
    android:baselineAligned="false" >

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

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

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

    <LinearLayout
        android:id="@+android:id/widget_frame"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:minWidth="80dip"
        android:gravity="center_vertical"
        android:orientation="vertical" >
    </LinearLayout>

</LinearLayout>

RelativeLayoutのTextViewがありますので、そちらで文字色や文字サイズを変更できます。

続いてcustom_checkbox.xmlです。こちらもres/layoutに作成します。

<?xml version="1.0" encoding="utf-8"?>
<CheckBox xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+android:id/checkbox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/selector_custom_checkbox"
    android:clickable="false"
    android:focusable="false" />

あとはselector_custom_checkbox.xmlを用意して、
画像名を指定してあげるとチェックボックスを画像に変更できます。
例えば下記のようにします。

<?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/btn_on" />
    <item android:state_checked="false"
        android:drawable="@drawable/btn_off" />
    <item android:drawable="@drawable/btn_off" />
</selector>

以上です。