[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







アプリ開発が上達するお勧め

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンラインのプログラミングスクールがいいでしょう。

TECH ACADEMY
オンライン説明会



Code Camp
現役エンジニアによるオンラインプログラミングスクール【CodeCamp】


直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。



侍エンジニア塾
侍エンジニア塾 無料体験レッスン


とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


シェアする

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

フォローする