Android Kotlin基礎講座 10.3:利用者に向けたデザイン

タスク：ナイトモードをサポートする

ナイトモードは端末の設定でナイトモードが有効になっているときなどに、アプリをダークテーマに変更するものです。ナイトモードでは、アプリはデフォルトはライト背景をダークに変更し、その他すべての画面要素もそれに従って変更します。

ステップ1：ナイトモードを有効にする

アプリ用のダークテーマを提供するためには、テーマをLightテーマからDayNightというテーマに変更する必要があります。DayNightテーマはモードに応じてライトかダークになります。

1. styles.xml内、AppThemeのparentをLightからDayNightに変更してください。

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

2. MainActivityのonCreate()メソッド内でAppCompatDelegete.setDefaultNightMode()を呼び出して、プログラムからダークテーマをONにします。

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

3. アプリを起動して、ダークテーマに切り替わっていることを確認してください。

ステップ2：自身のダークテーマカラーパレットを生成する

ダークテーマをカスタマイズするには、-night修飾子のついたフォルダーを使用するダークテーマ用に作成します。例えば、values-nightというフォルダを作成して、ナイトモードのカラーを指定することができます。

1. material.io color picker toolを開き、ナイトテーマ用のカラーパレットを作成してください。例えば、ダークブルーなどをベース色にします。
   
2. colors.xmlファイルを生成・ダウンロードしてください。
   
3. Android StudioでProject Filesビューに切り替えて、プロジェクト内の全てのフォルダを表示させてください。
   
4. resフォルダを見つけたら、それを展開してください。
   
5. res/values-nightフォルダを作成してください。
   
6. colors.xmlファイルをres/values-nightフォルダに追加してください。
   
7. アプリを起動してナイトモードが有効になっているとき、res/values-nightフォルダに定義した色が使われていることを確認してください。チップには作成したカラーパレットのセカンダリーカラーが使われていることを確認してください。

完成済みプロジェクト

お疲れさまでした。完成済みプロジェクトは以下からダウンロードできます。

GDGFinderFinal