AndroidのToggleButton

トグルボタンはON/OFFを切り替えるためのボタンだ。
ON/OFF時に表示スタイルが替わって現在の状態がわかりやすいので
2つあるステータスを切り替えるような動作をさせるときにはトグルボタンを使うのが良い。

トグルボタンをビューに配置するにはレイアウトファイルに次のように記述する。

    <ToggleButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOn="ON"
        android:textOff="OFF"
        android:checked="false"/>

android:checkedはステータスの初期値である。ボタンを押す度にtrueとfalseが切り替わる。

表示はこのようになる。

このトグルボタンの背景色を変えたいときはbackgroundにdrawableを指定する。
#FFFFFF等のカラーコードを指定しても反映されるが、その場合ONでもOFFでも同じ背景になってしまいトグルらしくない。

トグルボタンのDrawable

トグルボタンのスタイルを変更するにはres/drawableに3つのxmlファイルを作成する。
ONとOFFの状態を持つボタンtoggle_button.xml、OFF状態のスタイルを指定するtoggle_status_off.xml、ON状態のスタイルを指定するtoggle_status_on.xmlだ。
※toggle_button.xmlからその他2つのスタイルを参照するので、その整合が取れていればファイルの名前はなんでもよい。

res/drawable/toggle_button.xml

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

    <item
        android:drawable="@drawable/toggle_status_off"
        android:state_checked="false"
        />
</selector>

res/drawable/toggle_status_off.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- ボタンの形と色 -->
    <item>
        <shape android:shape="rectangle">
            <stroke
                android:color="#666666"
                android:width="5dp"
                />
        </shape>
    </item>
    <item android:bottom="5dp">
        <shape android:shape="rectangle">
            <solid android:color="#dddddd"/>
        </shape>
    </item>
</layer-list>

res/drawable/toggle_status_on.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- ボタンの形と色、OFFのときと下線の色を変える -->
    <item>
        <shape android:shape="rectangle">
            <stroke
                android:color="#2ca9e1"
                android:width="5dp"
                />
            <size
                android:width="160dp"
                android:height="40dp" />
        </shape>
    </item>
    <item android:bottom="5dp">
        <shape android:shape="rectangle">
            <solid android:color="#dddddd"/>
        </shape>
    </item>
</layer-list>

ToggleButtonの背景にDrawableを指定

上記のように定義したdrawableをToggleButtonのandroid:backgroundに指定すると背景のスタイルが変更される。

    <ToggleButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOn="ON"
        android:textOff="OFF"
        android:checked="false"
        android:background="@drawable/toggle_button"
    />