Toggleボタンのカスタマイズ

Toggleボタンのカスタマイズ

まずは、ToggleButtonの背景画像の用意

ToggleButtonのON/OFFの切り替えは
1つのリソースでは表現できないため
Selecter要素を使うことで状況に応じて表示するようにする

つまり、OFFの時の画像
ONの時の画像を用意する

リソースファイルは
Selecter_toggle_background.xml

ソースは

<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="@color/FlatLightAqua"/>
<item android:state_checked="false" android:drawable="@color/FlatLightPink"/>
</selector>

次に、作成した背景用のリソースを
background=””を使って実際のViewへ反映させる

<ToggleButton
android:id="@+id/tbtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/ Selecter_toggle_background"/>

ちなみに、Switchの場合は
ToggleButtonと違って
スイッチ部分と
スイッチ部分の裏にある背景とで
リソースが分かれる

まずは、switch_background.xml
というようにリソースファイルを用意

<selector
 xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/switch_bg_disabled_holo_dark" 
android:state_enabled="false"/>

<item android:drawable="@drawable/switch_bg_focused_holo_dark"
android:state_focused="true"/>
<item android:drawable="@drawable/switch_bg_holo_dark"/>
</selector>

次に、switch用のリソースの準備
これも別ファイルで用意
今回は、selector_switch_thumb.xml
定義するのは4つで
無効状態
有効状態
OFFの状態
Onの状態

ソースにすると

[/xml]

ここまでできたら、レイアウトファイルで
背景用リソースを
thumb属性を使ってViewへ反映させる
指定するのはリソースファイル名

<Switch
android:id="@+id/switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:thumb="selector_switch_thumb
"
android:track="@drawable/selector_switch_background"/>

となる

カスタマイズに使うリソースは
drawableリソースなら何でも使えるけど
shapeリソースや
9patchリソースでない場合、
デバイスのディスプレイサイズや解像度の違いが影響し
デザイン崩れが起こることがあるので注意