f:id:akatsuki174:20200813172747p:plain:w500

こんにちは。先月東京から神奈川に引っ越して自然多めの生活を送っている@akatsuki174です。普通の道端にきのこが生えているのにはびっくりしました。

Fammは先日ついにAndroidもダークテーマに対応したので、どのようなことを行ったのか書きます。

※ちなみに公式のダークテーマ対応ガイドはこちら。

完成品

このような見栄えになりました。かっこよい。

f:id:akatsuki174:20200813174305p:plain:w280 f:id:akatsuki174:20200813174323p:plain:w280

対応したこと

夜間用リソースの準備

night/styles.xml, night/colors.xmlの2つを新たに用意して、ダークテーマの時にだけ使われるstyleとcolorを定義しました。

night/styles.xmlには<style name="AppTheme" parent="Theme.AppCompat.DayNight">を記述し、ダークテーマをサポートするようにしました。

themeの指定

night/styles.xml, styles.xmlの両方にstyle name="AppTheme" を定義したのち、AndroidManifest.xmlでthemeを指定しました。

<application
    android:theme="@style/AppTheme"
    ... >

メニューのアイコンカラーの修正

今まではtintで色を付けず素材そのままの黒を活かしていたため、ダークテーマにすると非常に見づらい問題が発生しました。AppThemeにiconTintの定義を追加したら想定通りの色になりました。

f:id:akatsuki174:20200814092410p:plain:w280

「2階層目」への対応

「今まではelevationで階層の区別がわかっていたところ」はダークテーマにするとわりとわかりづらかったので、「2階層目の黒」を定義して適宜使いました。この黒はTheme.AppCompat.DayNight.Dialog.Alertの背景色と同じにしました。

f:id:akatsuki174:20200813181410p:plain:w280 f:id:akatsuki174:20200813181425p:plain:w280

ハイライト

前項の「2階層目」の色をあてようとした部分がすでにbackgroundを持っているケースがありました。ググったところ、このような場合は通常時の背景色をbackgroundに、タップされたときの色をforegroundにしたらうまくいきました。

before

android:background="?android:selectableItemBackground"

after

android:background="@color/famm_secondary_background"
android:foreground="?android:selectableItemBackground"

RecyclerViewのdividerの色指定

ListViewのdividerは何もしなくても大丈夫なんですが、自分で引いていた＆色の指定を固定にしてしまっていたRecyclerViewのdividerは対応が必要でした。DividerItemDecorationを継承した独自クラスを作り、そこでdividerの色設定を行いました。

class FammDividerItemDecoration(context: Context, orientation: Int) : DividerItemDecoration(context, orientation) {
    init {
        ContextCompat.getDrawable(context, R.drawable.divider_item)?.let {
            setDrawable(it)
        }
    }
}

色を直指定しているところの修正

@color/whiteなど色が直接指定されているところがあったので、colors.xmlで定義した色に変えました。

不備がある画像の差し替え

画像の一部が透過になってないケースがいくつかあったので差し替えました。

Tips

Android Studio上でダークテーマでの表示をすぐ確認できます。便利やん。

f:id:akatsuki174:20200813125441p:plain:w350 f:id:akatsuki174:20200813125455p:plain:w350

とはいえ稀に「プレビューではおかしいけど実際は大丈夫」ということもありました（下図はTabLayoutの部分が白になってしまっている）。最終的には実機確認が必要ですね。

f:id:akatsuki174:20200814095904p:plain:w400 f:id:akatsuki174:20200814095922p:plain:w280

苦労した、時間がかかったこと

確認作業

対応漏れがあるといけないのでQAさん、デザイナーさんにも手伝ってもらい、すべての画面をチェックしました（たぶん）。様々なユーザの状態でチェックするの大変だった…。

「なんでこの画面だけうまくいかないんだろう？」と思ったら、そのActivityがAppThemeではなく別のthemeを使っているのにAppThemeに対して変更を加えていた、なんてこともありました。

Lightモードのデグレチェック

調子に乗って色々変えていると、たまにLightモードでの表示がおかしくなってました。status barとかnavigation barとかをちょいちょいデグレさせてました。

感想

意外とAndroidでダークテーマ対応しているアプリがない＆ダークテーマの実装に関する記事が少なく、わりと手探りの状態でやっていたので不安だらけでした。でもかっこいい見た目になったし、何より自分がダークテーマに対応されたFammアプリを使いたいと思っていたのでやって良かったなと思っています。

余談

Timers勢、ダミー画像にわりと猫画像を使いがちな気がするんですが、私は家に猫様がいるわけでもないので飯テロ画像を中心にしてみました。美味しそうな肉だろう。美味かったぞう。

PR

子育て家族アプリFammを運営するTimers inc.では、現在エンジニアを積極採用中！
急成長中のサービスの技術の話を少しでも聞いてみたい方、スタートアップで働きたい方など、是非お気軽にご連絡ください！
採用HP: http://timers-inc.com/engineerings

Tech Blog

グローバルな家族アプリFammを運営するTimers inc (タイマーズ) の公式Tech Blogです。弊社のエンジニアリングを支える記事を随時公開。エンジニア絶賛採用中！→ https://timers-inc.com/engineering

ダークテーマ対応がまあまあ大変だった話 #Android

完成品