【Android】コピペでできるSwitchカスタマイズ【toggle】

#はじめに
switchのカスタマイズをしたいけど思ったようにできない。コピペで時間を取られずカスタマイズができると幸せです。  **theme変更、画像、drawable（xml）**それぞれの方法でやってみます。
　　
デフォルトSwitch
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393604/d7a8c860-62eb-98de-06d2-5aefdbcac08f.jpeg" width=10%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393604/b622d673-2041-462a-319f-f377f91b28d0.jpeg" width=20%>
サンプル１
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393604/5cba8c5f-8ae3-776f-3ac6-80048c74d72a.jpeg" width=15%>
サンプル２
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393604/268dea2e-17c9-a570-c142-6117a72b110f.jpeg" width=20%>
サンプル３
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393604/fc9fdf99-3691-5636-f470-116f1d3eb353.jpeg" width=20%>

#目次
１.themeの変更
　[１.１ styleで変更したい](#１１-styleファイルへ追加)
　[１.２ 長さを変更したい](#１２-長さを変える)
２.　thumb、backgroundの変更
　[２.１ ボタンの変更したい](#２１-ボタンの変更)
　[２.２ 背景を変更したい](#２２-背景の変更)
　[２.３ trackの変更（ボタンの通り道）](#２３-trackの変更ボタンの通り道)
３. とりあえずコピペ
　[３.１ サンプル１（★）（theme変更のみ）](#３１-サンプル１)
　[３.２ サンプル２（★★）（xmlで背景（track）、ボタン作成）](#３２-サンプル２)
　[３.３ サンプル３（★★★）（画像ファイルでtrack、ボタン作成）](#３３-サンプル３)
　

※基本的にそれぞれの項目ごとに独立しています。
※★が多いと面倒です

#１.１ styleファイルへ追加
app\src\main\res\values\styles.xml

```style.xml

    <style name="CustomSwitch" parent="Theme.AppCompat.Light">

        <!--ボタンON時のボタンの通り道（透明度30%）・ボタンとタッチフィードバックカラー-->
        <item name="colorControlActivated">#ff0000</item>

        <!--ボタンOFF時のボタンの通り道（透明度30%）-->
        <item name="android:colorForeground">#0000ff</item>

        <!-- OFFボタンを押したときのタッチフィードバックカラー -->
        <item name="colorControlHighlight">#ffff00</item>

    </style>
```
`#ff0000``#0000ff``#ffff00`
style.xmlに上記を追加し、Switchのtheme属性にnameで入力した名前を指定。
　　　


```activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Switch
        android:id="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:showText="false"
        android:theme="@style/CustomSwitch"/>

</android.support.constraint.ConstraintLayout>
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393604/b622d673-2041-462a-319f-f377f91b28d0.jpeg" width=30%>
実際は、ボタンOFFの背景色（ボタンの通り道）とタッチフィードバックカラーは統一したほうがいいでしょう。
  　　


#１.２ 長さを変える
switchの長さや高さは**width,height属性とは別のところで制御されているようです。**（多分ボタンのつまみ部分の大きさに依存します。）変更してもView全体の大きさは変わりますが、**Switchの大きさは変わりません。**
長さは**switchMinWidth属性**で変更できます。



``` activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Switch
        android:id="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:showText="false"
        android:switchMinWidth="200dp"/>

</android.support.constraint.ConstraintLayout>
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393604/8db3c054-caf9-7771-2968-31ce713ab683.jpeg" width=30%>



#２.１ ボタンの変更
thumbとはつまみの部分のことです。xmlで作った形や画像にイメージを変更します。

```activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Switch
        android:id="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:showText="false"
        android:thumb="@mipmap/ic_launcher" />

</android.support.constraint.ConstraintLayout>
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393604/f5da7c87-a2d4-0245-056a-5098d578e331.jpeg" width=30%>
デフォルトのSwitchは非常に短いのですが画像に合わせて全体の大きさも変わりました。
四角いイメージなら四角くなります。丸いイメージなら丸くなります。


  　　


#２.２ 背景の変更
**背景の変更によるカスタマイズはタッチフィードバックが消失します。**

タッチフィードバックを残したい場合は　[trackの変更（ボタンの通り道）](#２３-trackの変更ボタンの通り道)へ移動
タッチフィードバックを消したい場合はこのまま背景の変更を。

backgroud変更で必要となるのは

- 背景となるイメージ画像もしくはxmlファイルの準備
- track属性でボタン通り道の色の調整（**重要**）
       
　　
まずは背景となるdrawableイメージの準備

``` switch_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- ON時 -->
    <item android:state_checked="true">
        <layer-list>
            <item android:bottom="3dp" android:top="3dp">
                <!--形のタイプ-->
                <shape android:shape="rectangle">
                    <!--角丸の半径-->
                    <corners android:radius="32dp" />
                    <!--背景色-->
                    <solid android:color="#1e90ff" />
                </shape>
            </item>
        </layer-list>
    </item>

    <!-- OFF時 -->
    <item>
        <layer-list>
            <item android:bottom="3dp" android:top="3dp">
                    <!--形のタイプ-->
                <shape android:shape="rectangle">
                    <!--角丸の半径-->
                    <corners android:radius="32dp" />
                    <!--背景色-->
                    <solid android:color="#a9a9a9"/>
                </shape>
            </item>
        </layer-list>
    </item>

</selector>

```

`#a9a9a9``#1e90ff`

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393604/8df67caf-0fc8-b2af-1c62-9d8d41f198e3.jpeg" width=30%>
左がOFF右がONの時の背景イメージです
このイメージを背景をbackgroundで指定します。
ただ、このまま背景を指定すると、デフォルトのボタンの通り道の色（track）がかぶさり下のようになります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393604/5043fa5b-b79e-70c8-ba2a-84c36c3cbaa5.jpeg" width=30%>

これを解決するためにはtrackにbackgroundと同じイメージをかぶせます。

また、ボタンの色が背景とマッチしていないのでthemeを変更します。


app\src\main\res\values\styles.xml

```style.xml

    <style name="CustomSwitch" parent="Theme.AppCompat.Light">
        <!--ボタンON時のボタンの通り道（透明度30%）・ボタンとタッチフィードバックカラー-->
        <item name="colorControlActivated">#ececec</item>

    </style>
```
`#ececec`OFFのボタンの色に合わせています。


```activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Switch
        android:id="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:showText="false"
        android:theme="@style/CustomSwitch"
        android:track="@drawable/switch_bg"
        android:background="@drawable/switch_bg"/>

</android.support.constraint.ConstraintLayout>

```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393604/3f965e0d-481b-153d-0d87-ade1b64c3649.jpeg" width=30%>



#２.３ trackの変更（ボタンの通り道）

app\src\main\res\values\styles.xml



```style.xml

    <style name="CustomSwitch" parent="Theme.AppCompat.Light">
        <!--ボタンON時のボタンの通り道（透明度30%）・ボタンとタッチフィードバックカラー-->
        <item name="colorControlActivated">#c0c0c0</item>
        <!-- OFFボタンを押したときのタッチフィードバックカラー -->
        <item name="colorControlHighlight">#c0c0c0</item>

    </style>
```
`#ececec`OFFのボタンの色に合わせています。

trackイメージの準備

```switch_track.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- ON時 -->
    <item android:state_checked="true">
        <layer-list>
            <item android:bottom="3dp" android:top="3dp">
                <!--形のタイプ-->
                <shape android:shape="rectangle">
                    <!--角丸の半径-->
                    <corners android:radius="32dp" />
                    <!--背景色-->
                    <solid android:color="#1e90ff" />
                </shape>
            </item>
        </layer-list>
    </item>

    <!--OFF時-->
    <item>
        <layer-list>
            <item android:bottom="3dp" android:top="3dp">
                <!--形のタイプ-->
                <shape android:shape="rectangle">
                    <!--角丸の半径-->
                    <corners android:radius="32dp" />
                    <!--背景色-->
                    <solid android:color="#eeeeee"/>
                </shape>
            </item>
        </layer-list>
    </item>

</selector>

```
`#a9a9a9``#1e90ff`

```activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Switch
        android:id="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:showText="false"
        android:theme="@style/CustomSwitch"
        android:track="@drawable/switch_track"/>

</android.support.constraint.ConstraintLayout>

```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393604/52191d2a-dc59-f707-62e5-54b9ccb048ed.jpeg" width=30%>




#３.１ サンプル１
themeの変更のみです。

app\src\main\res\values\styles.xml


```style.xml

    <style name="CustomSwitch" parent="Theme.AppCompat.Light">
        <!--ボタンON時のボタンの通り道（透明度30%）・ボタンとタッチフィードバックカラー-->
        <item name="colorControlActivated">#1e90ff</item>
        <!--ボタンOFF時のボタンの通り道（透明度30%）-->
        <item name="android:colorForeground">#c0c0c0</item>
        <!-- OFFボタンを押したときのタッチフィードバックカラー -->
        <item name="colorControlHighlight">#c0c0c0</item>

    </style>
```
`#1e90ff``#c0c0c0`


```activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Switch
        android:id="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:showText="false"
        android:switchMinWidth="70dp"
        android:theme="@style/CustomSwitch" />

</android.support.constraint.ConstraintLayout>
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393604/5cba8c5f-8ae3-776f-3ac6-80048c74d72a.jpeg" width=30%>
シンプル。

#３.２ サンプル２
xmlでtrackやボタンを作ります。
track&backgroundソース


```swtich_track.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- ON時 -->
    <item android:state_checked="true">
        <layer-list>
            <item android:bottom="3dp" android:top="3dp">
                <!--形のタイプ-->
                <shape android:shape="rectangle">
                    <!--角丸の半径-->
                    <corners android:radius="32dp" />
                    <!--背景色-->
                    <solid android:color="#76d672" />
                </shape>
            </item>
        </layer-list>
    </item>

    <!-- OFF時 -->
    <item>
        <layer-list>
            <item android:bottom="3dp" android:top="3dp">
                <!--形のタイプ-->
                <shape android:shape="rectangle">
                    <!--角丸の半径-->
                    <corners android:radius="32dp" />
                    <!--背景色-->
                    <solid android:color="#dcdcdc"/>
                    <!--周りの色-->
                    <stroke android:width="1dp" android:color="#d3d3d3"/>
                </shape>
            </item>
        </layer-list>
    </item>

</selector>
````

`#76d672``#dcdcdc``#d3d3d3`

thumbソース

```switch_thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- ON時 -->
    <item>
        <layer-list>
            <item android:bottom="4dp"
                android:left="2dp"
                android:right="2dp"
                android:top="4dp">
                <shape android:shape="oval" >
                    <size android:height="30dp" android:width="30dp" />
                    <solid android:color="#fefefe" />
                </shape>
            </item>
        </layer-list>
    </item>

    <!-- OFF字 -->
    <item>
        <layer-list>
            <item android:bottom="4dp"
                android:left="2dp"
                android:right="2dp"
                android:top="4dp">
                <shape android:shape="oval" >
                    <size android:height="30dp" android:width="30dp" />
                    <solid android:color="#fefefe" />
                </shape>
            </item>
        </layer-list>
    </item>

</selector>
```
`#fefefe`


```activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Switch
        android:id="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:showText="false"
        android:theme="@style/CustomSwitch"
        android:thumb="@drawable/switch_thumb"
        android:track="@drawable/switch_bg"
        android:background="@drawable/switch_bg"/>

</android.support.constraint.ConstraintLayout>
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393604/268dea2e-17c9-a570-c142-6117a72b110f.jpeg" width=35%>
　　
gradientとか影の部分をxmlに付け足すとくぼみとか表現できそうだけどやらない。

#３.３ サンプル３
素材を画像で準備して作ります。
画像ファイル
switch_track_on.svg ![swithc_track_on.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393604/951cef91-9b9e-26d3-f4fd-133474225dc0.png)
switch_track_off.svg ![swithc_bg_on.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393604/463b7aec-8c17-cafd-f32a-84434bdde74d.png)
switch_thumb.svg  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393604/e9f9cdfa-4b17-4d8f-9641-1ab79aa4bd2f.png" width=10%>

元画像の比率や完成度が低いのは気にしない。私にそんなスキルはないのだ。
表示するために画像はpng形式になっています。
　　

```switch_track.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- ON時 -->
    <item android:state_checked="true">
        <layer-list>
            <item android:drawable="@drawable/switch_track_on"/>
        </layer-list>
    </item>
    
    <!-- OFF時 -->
    <item>
        <layer-list>
            <item android:drawable="@drawable/switch_track_off"/>
        </layer-list>
    </item>

</selector>
````





app\src\main\res\values\styles.xml


```style.xml

    <style name="CustomSwitch" parent="Theme.AppCompat.Light">
        <!--ボタンON時のボタンの通り道（透明度30%）・ボタンとタッチフィードバックカラー-->
        <item name="colorControlActivated">#ffff00</item>
        <!-- OFFボタンを押したときのタッチフィードバックカラー -->
        <item name="colorControlHighlight">#ffff00</item>

    </style>
```
`#ffff00`


```activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Switch
        android:id="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:showText="false"
        android:theme="@style/CustomSwitch"
        android:thumb="@drawable/switch_thumb"
        android:track="@drawable/switch_track" />

</android.support.constraint.ConstraintLayout>
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393604/fc9fdf99-3691-5636-f470-116f1d3eb353.jpeg" width=35%>

一番大変だったのにしょぼい。。。すべて画像が元なのでON・OFFなどの文字も入れることができます。
私はSVGファイルでなぜか文字が入らず断念。とほほ



#おわりに
他の項目もコピペしたい。