ButtonでDarkThemeへ切り替え(Android)
概要
先日インターンシップでアプリを実装した際に, アプリを拡張をするということでDark Themeの実装にチャレンジしました.
という訳で今回のテーマは
ボタンでLightThemeとDarkThemeを切り替えられるように実装したい
です.
なお,初めての記事なので読みづらい点が多いと思いますが, お許しくださいませ.
何やったの
- gradle: material designを使うよと定義
- xml: res/night-valueを追加
- kotlin: アプリのモードを取得して処理をする
具体的に何すればいいの
build.gradle(app)
build.gradle(app)のdependenciesに以下を追加
//material design implementation 'com.google.android.material:material:1.1.0-alpha09'
XML
DayNightを継承する
DayNightのテーマを継承するため下記のどちらかを継承してあげる.
- App Compat
<style name="AppTheme" parent="Theme.AppCompat.DayNight">
- Material Components(自分はこっち)
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
res/values-night
res/values(デフォルトである)と別にres/values-nightを作成. values-night内にcolor.xmlなりを定義してあげる. (自分はstyle.xmlをvaluesのみしか定義しなかったのですが, values-nightにも定義した方が良いのでしょうか... できてるからいいんですかね...)
一部のみ掲載します.
- res/values/color.xml
<!-- 青系 --> <color name="colorPrimary">#2196f3</color> <color name="colorPrimaryDark">#0069c0</color> <color name="colorPrimaryLight">#6ec6ff</color>
- res/values-night/color.xml
<!-- 紫系 --> <color name="colorPrimary">#4527a0</color> <color name="colorPrimaryDark">#000070</color> <color name="colorPrimaryLight">#7953d2</color>
Kotlin
以下でNightThemeを選択するか否かを指定することができる.
AppCompatDelegate.MODE_NIGHT_YES AppCompatDelegate.MODE_NIGHT_NO
反映させるには以下に先ほど指定した状態を渡してあげる.
AppCompatDelegate.setDefaultNightMode()
こちらで実装できました.
//モードの初期化(LightThemeで) var mode: Int = AppCompatDelegate.MODE_NIGHT_NO nightbutton.setOnClickListener { //ボタン押すと... //現在のモードを取得できる var currentNightMode = resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK when (currentNightMode) { Configuration.UI_MODE_NIGHT_NO -> { // LightThemeの時の処理 mode = AppCompatDelegate.MODE_NIGHT_YES } Configuration.UI_MODE_NIGHT_YES -> { // DarkThemeの時の処理 mode = AppCompatDelegate.MODE_NIGHT_NO } } AppCompatDelegate.setDefaultNightMode(mode) }
スクリーンショット
色味などのエグみは今回は許してください笑
とりあえず切り替えはできたよとのことでよろしくお願いします.
- Light Mode
- Dark Mode
感想
今回は初めてのOUTPUTということで, 不慣れなところがご覧いただけると思いますが, これからも頑張ってちょいちょい記事書けたらなと思いますので, よろしくお願いします.
なお, コードやどんな些細なことでもアドバイスしていただけることがあれば, お待ちしております.