LoginSignup
17
17

More than 3 years have passed since last update.

@genky

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

Last updated at Posted at 2019-06-01

はじめに

switchのカスタマイズをしたいけど思ったようにできない。コピペで時間を取られずカスタマイズができると幸せです。 theme変更、画像、drawable（xml）それぞれの方法でやってみます。
　　
デフォルトSwitch


サンプル１

サンプル２

サンプル３

目次

１.themeの変更
　１.１ styleで変更したい
　１.２ 長さを変更したい
２.　thumb、backgroundの変更
　２.１ ボタンの変更したい
　２.２ 背景を変更したい
　２.３ 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>


実際は、ボタン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>

２.１ ボタンの変更

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>


デフォルトのSwitchは非常に短いのですが画像に合わせて全体の大きさも変わりました。
四角いイメージなら四角くなります。丸いイメージなら丸くなります。

　　

２.２ 背景の変更

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

タッチフィードバックを残したい場合は　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


左がOFF右がONの時の背景イメージです
このイメージを背景をbackgroundで指定します。
ただ、このまま背景を指定すると、デフォルトのボタンの通り道の色（track）がかぶさり下のようになります。

これを解決するためには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>

#ecececOFFのボタンの色に合わせています。

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>

２.３ 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>

#ecececOFFのボタンの色に合わせています。

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>

３.１ サンプル１

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>


シンプル。

３.２ サンプル２

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>


　　
gradientとか影の部分をxmlに付け足すとくぼみとか表現できそうだけどやらない。

３.３ サンプル３

素材を画像で準備して作ります。
画像ファイル
switch_track_on.svg swithc_track_on.png
switch_track_off.svg swithc_bg_on.png
switch_thumb.svg

元画像の比率や完成度が低いのは気にしない。私にそんなスキルはないのだ。
表示するために画像は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>

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

おわりに

他の項目もコピペしたい。
　　

17
17
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
17
17