[Android] SwitchCompat スイッチのカスタマイズ

SwitchCompatのthumbやtrackの色や形をカスタマイズしてみます

1x1.trans - [Android] SwitchCompat スイッチのカスタマイズ


Android Studio
2021.2.1




SwitchCompat

 
SwitcCompatの基本的なところは、こちらで確認しました
 

as2021 switchcompat 00 100x100 - [Android] SwitchCompat スイッチのカスタマイズ
切り替えボタンとしてはSwitchというのもありますが、SwitchCompatの方が使いまわしがよさそうです つまみとかトラックのカスタ...

 
簡単な色の変更もselectorを使ってできましたが
つまみを画像にしたり、形をshapeを使って変えてみたりすることも可能です
 

 

thumbを画像に変える

 
この画像を使ってみます

1x1.trans - [Android] SwitchCompat スイッチのカスタマイズlocked.png
1x1.trans - [Android] SwitchCompat スイッチのカスタマイズunlock.png

変更点はthumbだけですが
状態の遷移をstateからselectorで設定することもできますが
コードではこちらを使うことができます

SwitchCompatがcheckされるとthumbにそれぞれの画像を設定するようにします

レイアウトはデフォルトでのthumbを入れておきます

1x1.trans - [Android] SwitchCompat スイッチのカスタマイズ

 

thumb と track の色を変更する

 
thumbだけでなくtrackもカスタマイズして変更してみます

offとon用にshapeを使って形と色をカスタマイズします

custom_thumb_off.xml

custom_thumb_on.xml

custom_track_off.xml

custom_track_on.xml

これらを res\drawable\ 以下に配置します
デフォルトでのカスタマイズを有効にするため
以下を追加しておきます
android:thumb=”@drawable/custom_thumb_off” app:track=”@drawable/custom_track_off”

 
四角いthumbで緑と黄色にカスタマイズできました
1x1.trans - [Android] SwitchCompat スイッチのカスタマイズ

stateによって分けるselectorを使うこともできます
 

as2021 switch 00 100x100 - [Android] SwitchCompat スイッチのカスタマイズ
Switch はよく設定などで使われるON/OFFのウィジェットの1つです

 

 

サンプルコード

 
2つをまとめてみました

MainActivity.java

activity_main.xml

strings.xml

custom_thumb_off.xml

custom_thumb_on.xml

custom_track_off.xml

custom_track_on.xml

これで実行させてみましょう

References:
切り替えボタン | Android デベロッパー
SwitchCompat – Android Developers




シェアする

  • このエントリーをはてなブックマークに追加

フォローする