ちょっとした知見置き場

Andoidアプリ開発における知見やメモをまとめておきます。

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ということで, 不慣れなところがご覧いただけると思いますが, これからも頑張ってちょいちょい記事書けたらなと思いますので, よろしくお願いします.

なお, コードやどんな些細なことでもアドバイスしていただけることがあれば, お待ちしております.