Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題

# 発表イベント
potatotips
https://potatotips.connpass.com/event/331173/

# ブログ
https://blog.cybozu.io/entry/2024/10/21/080000

Transcript

1. Android 15 でアクション バー表示時にステータスバー が白くなってしまう問題 potatotips #89
2. @tonionagauzzi potatotips #89 2
3. https://blog.cybozu.io/entry/2024/10/21/080000 以下のブログの内容を発表します！ potatotips #89 3
4. Android 14 potatotips #89 4
5. targetSdk 34 → 35 potatotips #89 5
6. Android 15 potatotips #89 6
7. レイアウトを調整 override fun onCreate(savedInstanceState: Bundle?) { ... // View をステータスバーの高さぶん下へずらす ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.root_view)) { view, windowInsets -> val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars()) view.setPadding(insets.left, insets.top, insets.right, insets.bottom) WindowInsetsCompat.CONSUMED } // Android 14以下でもEdge-to-edgeにする（任意） enableEdgeToEdge( statusBarStyle = SystemBarStyle.dark(Color.TRANSPARENT), navigationBarStyle = SystemBarStyle.dark(Color.TRANSPARENT) ) } potatotips #89 7
8. Android 15 potatotips #89 8
9. しかし… potatotips #89 9
10. いくつかの画面は ステータスバーが白い… potatotips #89 10
11. 背景色を設定してみた <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:background="#a1a1a1" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".view.SampleActivity"> potatotips #89 11
12. 白いまま… なぜ？ potatotips #89 12
13. レイアウト構成を確認 potatotips #89 13
14. 謎の 56dp potatotips #89 14
15. ここが アプリ外領域に なっている… potatotips #89 15
16. アクションバーを消すと potatotips #89 16
17. 0dpになった potatotips #89 17
18. どうやら、アクションバーの 問題らしい potatotips #89 18
19. 最初に思いついた対策 potatotips #89 19
20. ステータスバーに背景色を付ける ここを黒く塗る potatotips #89 20
21. setStatusBarColor deprecated... 適切な背景を使いなさいと言われた potatotips #89 21
22. Edge-to-edgeは、ウィンドウ全域を 活用してコンテンツを表示するもの potatotips #89 22
23. ステータスバーに色を塗るよりも レイアウトを変えたほうがよい potatotips #89 23
24. でも古いレイアウトほど 書き換えコストは高い… potatotips #89 24
25. 本題：アクションバー利用者は どうすればよいか potatotips #89 25
26. 以下の2通り 1. Edge-to-edge を無効化する 2. アクションバーを消す potatotips #89 26
27. 1. Edge-to-edge を無効化する <!-- styles.xml --> <?xml version="1.0" encoding="utf-8"?> <resources xmlns:tools="http://schemas.android.com/tools"> <style name="Theme.AppCompat.Light.DarkActionBar.OptOutEdgeToEdge" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="android:windowOptOutEdgeToEdgeEnforcement" tools:targetApi="35">true</item> </style> </resources> <!-- AndroidManifest.xml --> <activity android:name=".view.SampleActivity" android:exported="true" android:theme="@style/Theme.AppCompat.Light.DarkActionBar.OptOutEdgeToEdge"> ... </activity> potatotips #89 27
28. これまでの見た目を維持！ この方式は将来廃止される https://developer.android.com/reference/android/R.attr#windowOptOutEdge ToEdgeEnforcement potatotips #89 28
29. 2. アクションバーを消す 方法はいくつかある o ツールバーに置き換える（XML） o TopAppBarに置き換える（Compose） o アプリバーを自作する o アプリバーを使わない見た目にする 対応例はブログにて紹介 https://blog.cybozu.io/entry/2024/10/21/080000#2- %E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%90%E3%83%BC%E3% 82%92%E6%B6%88%E3%81%99 potatotips #89 29
30. まとめ potatotips #89 30
31. • targetSdk=35でアクションバー使うと、 ステータスバーの背景を設定できない • Edge-to-edge を無効化するのは一時しの ぎ • アクションバーではない方法でアプリバー を表示するか、レイアウトを変えよう！ potatotips #89 31
32. 一緒に働くメンバーを募集中です！ https://cybozu.co.jp/recruit/entry/career/android-engineer.html 興味ある方は、カジュアル面談可能です！ potatotips #89 32
33. ありがとうございました！ potatotips #89 33