Help us understand the problem. What is going on with this article?

Androidでダークモード対応のアプリを作ってみる

Androidでダークモード対応のアプリを作ってみる

by Taku24
1 / 13

はじめに

  • このスライドは最近流行っている?ダークテーマに ついてまとめてみたので情報整理として記録したものです。
  • 参考ソース:ダークテーマ|Android Developers

ダークテーマとは

  • Android Qから登場した黒を基調としたUI
  • iOSでも13から対応
  • アプリ以外ではすでに取り入れられているサービスもある
    • Android StudioとかmacOS、Windowsとか

ダークモードのメリット(個人的に)

  • 目に優しい
    • ディスプレイの明るさと画面の白さを組み合わせたらあかん
  • コーディングの際文字が見やすい
    • 黒板に文字を書いているイメージ
  • バッテリーの消費量を抑えれる(条件あり)

Androidの場合

  • 通常モードとダークテーマでは以下のように変わる

Androidの場合

  • 通常モードとダークテーマでは以下のように変わる
    • 色設定をしていない部分が切り替わる?

設定方法(開発側)

<!-- 通常のダークテーマ-->
<style name="AppTheme" parent="Theme.AppCompat.DayNight">

<!-- MaterialComponentsのダークテーマ-->
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
  • Android Manifestに上記を記述
    • アプリのテーマとして設定をする
  • 最低SDKバージョン(minSDK)についての記載は確認できず
    • 筆者は17で動作確認しましたが特にエラーはなかったです

設定方法(ユーザ側)

  • Android Qを載せた端末で設定 -> ディスプレイ -> ダークテーマをON

未対応OSとの混合について

  • OSがダークテーマ未対応の場合、 通常のレイアウトとして表示される。
    • 現段階では影響なしと筆者は判断

使用する際の注意点

  • アプリ起動時にダークテーマの切り替えを行うと アクティビティが再生成される
    • ライフサイクルには注意
  • 切り替え時のタイミングで処理をしたい時は別途設定が必要

切り替わりのタイミングをハンドリングする

<activity android:name=".MainActivity"
    android:configChanges="uiMode">
  • AndroidManifestでハンドリングを行いたいActivityで上記を記述

切り替わりのタイミングをハンドリングする

override fun onConfigurationChanged(newConfig: Configuration) {
    super.onConfigurationChanged(newConfig)

    // ダークテーマがOS側で設定されているか調べる
    val isDarkTheme = newConfig.uiMode and Configuration.UI_MODE_NIGHT_MASK
    when (isDarkTheme) {
        Configuration.UI_MODE_NIGHT_NO -> Log.d("msg", "通常モード")
        Configuration.UI_MODE_NIGHT_YES -> Log.d("msg", "ダークテーマ")
    }
}
  • onConfigurationChangedメソッドを宣言し、適宜処理を行う。

まとめ

  • いくつかの項目さえ気を付ければ、ダークテーマの導入は簡単
    • ライフサイクル、色の相性など
  • ただQ自身がまだシェアは低そうなので急いで対応する必要はなさそう
  • 黒いテーマがもっと普及するといいね!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした