Androidで画像を使ってSwitchをカスタマイズしたい

Androidのレイアウトをカスタマイズするときの自分用メモ。
Switch編。

AppCompat v21 の SwitchCompat 使おう

Androidには Switch というコンポーネントもあるけれど、これを使うとAndroid4系とAndroid5系で表示が全然違ってくるので、両方のOSで共通のデザインを使いたいのならば android.support.v7.widget.SwitchCompat を使う。
以下のような感じ。

<android.support.v7.widget.SwitchCompat
    android:id="@+id/switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@null"
    android:thumb="@drawable/switch_thumb"
    app:track="@drawable/switch_background" />

android:background="@null" にしているのはタッチフィードバックを消したかったからです。
android:thumbがスイッチのつまみ、 app:trackがスイッチの背景の調整項目です。

つまみを変更したい

ここでは、画像素材を使って、スイッチがONの時、スイッチがOFFの時、スイッチを押した時の状態でつまみを変化させます。
btn_default がスイッチがONの時のつまみの素材
btn_disable がスイッチがOFFの時のつまみの素材
btn_hover がスイッチが押された時のつまみの素材とすると、以下のように設定できる。

switch_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/btn_hover" android:state_checked="true" android:state_pressed="true" />
    <item android:drawable="@drawable/btn_hover" android:state_focused="true" />
    <item android:drawable="@drawable/btn_disable" android:state_checked="false" />
    <item android:drawable="@drawable/btn_default" />
</selector>

android:state_checkedがスイッチのON/OFFの状態
android:state_pressedがつまみが押された状態
android:state_focusedがつまみがフォーカスされた状態
定義リストを頭から見ていって初めにマッチしたものが使われるので、定義する順番にも気をつける。

背景を変更したい

ここでは、画像素材を使って、スイッチがONの時、スイッチがOFFの時の状態で背景を変化させます。
btn_base_onがスイッチがONの状態の背景画像、
btn_base_offがスイッチがOFFの状態の背景画像とすると、以下のように設定できる。

switch_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <layer-list>
            <item android:drawable="@drawable/sound_btn_base_on" />
        </layer-list>
    </item>
    <item>
        <layer-list>
            <item android:drawable="@drawable/sound_btn_base_off" />
        </layer-list>
    </item>

</selector>

スイッチのON/OFFの状態でしか扱わないので、android:state_checkedだけで条件分岐できます。

今回は画像を使ったAndroidのスイッチのカスタマイズのメモでした。
画像を用意できれば割りと簡単にカスタマイズできます。
まぁ、マテリアルデザインが適用されているのでデフォルトのままでも十分な気はするのですけれどね。
UIパーツをアプリの世界観に合わせる必要もある場合があるので。