Practical “edge-to-edge” Explanation of “edge to edge”

`edge-to-edge`とはその名の通り、システムの領域も含めた画面の "端から端" を全てアプリの領域として描画する機能です。
Googleはアプリへの没入感を高めるために、この`edge-to-edge`を推奨しています。

`edge-to-edge` を適用するには、アプリの描画が全画面になるようにフラグを設定し、システムバー（ステータスバーとナビゲーションバー）の色を設定するだけでも十分に思われます。
しかし、実際には考慮すべき点や落とし穴があるため一筋縄では適用できません。例えば、既存のアプリに適用する場合は、UIデザインの変更が必要になります。
他にも、Android デバイスによっては、システムバーに対してデバイス固有の変更が施されている場合があり、その対処も簡単ではありません。
本セッションでは、実際にコミュニケーションアプリLINE に`edge-to-edge`を適用した際に得られた知見を元に、以下の内容を紹介します。

・Googleが提唱する`edge-to-edge`の適用ポリシーについて
・UIをデザインする上での`edge-to-edge`の適用基準について
・通常のアプリとJetpack Composeで構成されたアプリそれぞれに対しての適用方法
・LINE Androidアプリに対して`edge-to-edge`を適用する際に発生した問題点・落とし穴やその解決方法について

ぜひ皆さんもこのセッションから`edge-to-edge`の知見を得て、アプリへの適用を実践してみてください！

発表者：Yuki Ando
詳細：https://droidkaigi.jp/2022/timetable/362273

Transcript

1. Practical “edge-to-edge” Explanation of “edge to edge” Yuki Ando / LINE Corporation 2022.10
2. DO YOU KNOW WHAT “EDGE-TO-EDGE” IS?
3. DO YOU KNOW WHAT “EDGE-TO-EDGE” IS?
4. Expand the screen to the edge • by overlapping the status bar • by overlapping the navigation bar 4 ※1ɿhttps://developer.android.com/develop/ui/views/layout/edge-to-edge Figure 1: System bars with edge-to-edge ※1 Edge-to-edge
5. HOW MANY APPS DO YOU THINK APPLY “EDGE TO EDGE”?
6. PROBABLY, NOT MANY 🤔
7. NOT ALL OS PRE-INSTALLED APPS ARE SUPPORTED EITHER😇
8. Official Policy Guidelines of LINE Android Client Implementations Problems and Pitfalls 01 02 03 04 Contents 8
9. Official Policy Guidelines of LINE Android Client Implementations Problems and Pitfalls 01 02 03 04 Contents 9
10. Status
 bar Navigation bar Insets Official “edge-to-edge” application policy 10
11. Policy: Navigation Bar 11 Overlap the contents Figure 2: Overlap the contents in button navigation bar
12. Policy: Navigation Bar 11 Overlap the contents Degree of transparency depends on bar type Gesture Navigation Transparent Button Navigation Translucent Figure 2: Overlap the contents in button navigation bar Figure 3: Overlap the contents in gesture navigation bar
13. Policy: Status Bar Overlap only if there is underlaying content • Background Image • Camera View • Map View 13 ※1ɿhttps://developer.android.com/develop/ui/views/layout/edge-to-edge Figure 4:Translucent status bar ※1
14. Policy: Insets 14
15. What are insets? Size of gap between the visible area and the UI container • System bars height • Width of the area where the OS accepts gestures • IME Height 15 ※1ɿhttps://developer.android.com/develop/ui/views/layout/edge-to-edge Figure 5:Translucent status bar ※1
16. Policy: Insets Set padding/margin to resolve conflict between: • Elements placed on the edge • Navigation Bar/Status Bar 16 Figure 6: FAB with required padding set Figure 5: FAB without required padding set
17. Official Policy Guidelines of LINE Android Client Implementations Problems and Pitfalls 01 02 03 04 Contents 17
18. GUIDELINES OF LINE ANDROID CLIENT
19. Why are the Guidelines required? There are problems: • Difficult to overlap on the some screens due to design reasons • Difficult to adjust padding for all screens using insets 19 If not needed, change the background color and do not overlap
20. Application options Overlap with transparent color 20 Figure 8: Opaque color navigation bar Figure 7: Transparent navigation bar No-overlap with opaque color There are two options of application method:
21. Pseudo Code for Overlap Decision (navigation) 21 fun decideShouldOverlapNavigationBar(): Color { if (isDifficultToMakeSafeArea) { return Color.OpaqueColor } if (isThereScrollableViewAtTheBottom) { return Color.TransparentColor } if (isThereOperableViewAtTheBottom || noBackgroundAtTheBottom) { return Color.OpaqueColor } return Color.TransparentColor }
22. Pseudo Code for Overlap Decision (status) 22 fun decideShouldOverlapStatusBar(): Color { if (isDifficultToMakeSafeArea) { return Color.OpaqueColor } if (isThereScrollableViewAtTheTop) { return Color.TransparentColor } if (isThereOperableViewAtTheTop || noBackgroundAtTheTop) { return Color.OpaqueColor } return Color.TransparentColor }
23. Official Policy Guidelines of LINE Android Client Implementations Problems and Pitfalls 01 02 03 04 Contents 23
24. IMPLEMENTATIONS
25. Set the color of the navigation bar and status bar Set “setDecorFitsSystemWindows” to false Set padding, margin using “ViewCompat.setOnApplyWindowInsetsListener” Hide the systembars if necessary 01 02 03 04 25 Steps to apply to a regular application
26. 01.Set the color of the system bars 26 // In activity window.navigationBarColor = ContextCompat.getColor(this, R.color.transparent) window.statusBarColor = ContextCompat.getColor(this, R.color.transparent) val windowInsetsController = WindowInsetsControllerCompat(window, rootView) windowInsetsController.isAppearanceLightStatusBars = true <!-- themes.xml --> <item name="android:navigationBarColor">@android:color/transparent</item> <!-- Optional: set to transparent if your app is drawing behind the status bar. --> <item name="android:statusBarColor">@android:color/transparent</item> <!-- Optional: set the status bar light and content dark. --> <item name="android:windowLightStatusBar">true</item> OR
27. 02.Set “setDecorFitsSystemWindows” to false 27 // In activity WindowCompat.setDecorFitsSystemWindows(window, false)
28. 03.Set padding, margin using listener 28 // In activity ViewCompat.setOnApplyWindowInsetsListener(targetView) { view, windowInsets -> val systemInsets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars()) view.updatePadding(bottom = systemInsets.bottom) windowInsets }
29. 04.Hide the system bars if necessary 29 // In activity val windowInsetsController = WindowInsetsControllerCompat(window, targetView) // Hide the system bars. windowInsetsController.hide(WindowInsetsCompat.Type.systemBars()) // Show the system bars. windowInsetsController.show(WindowInsetsCompat.Type.systemBars())
30. Set the color of the navigation bar and status bar Set “setDecorFitsSystemWindows” to false Using Modifier extension functions 01 02 03 30 Steps to apply to a Compose application
31. 01.Set the color of the system bars 31 // In activity window.navigationBarColor = ContextCompat.getColor(this, R.color.transparent) window.statusBarColor = ContextCompat.getColor(this, R.color.transparent) val windowInsetsController = WindowInsetsControllerCompat(window, rootView) windowInsetsController.isAppearanceLightStatusBars = true <!-- themes.xml --> <item name="android:navigationBarColor">@android:color/transparent</item> <!-- Optional: set to transparent if your app is drawing behind the status bar. --> <item name="android:statusBarColor">@android:color/transparent</item> <!-- Optional: set the status bar light and content dark. --> <item name="android:windowLightStatusBar">true</item> OR
32. 02.Set “setDecorFitsSystemWindows” to false 32 // In activity WindowCompat.setDecorFitsSystemWindows(window, false)
33. 03.Using Modifier extension functions 33 Box( modifier = Modifier .fillMaxSize() .background(Color(0x00000000)) ) { Box( modifier = Modifier .fillMaxSize() .windowInsetsPadding(WindowInsets.safeDrawing) .background(Color(0x00000000)) ) }
34. 03.Using Modifier extension functions 34 // Same as windowInsetsPadding(WindowInsets.safeDrawing) Box( modifier = Modifier .fillMaxSize() .safeDrawingPadding() .background(Color(0x00000000)) ) // Apply padding only partially. TopAppBar( modifier = Modifier.windowInsetsPadding( WindowInsets.safeDrawing.only(WindowInsetsSides.Top) ) ) { // ...snip }
35. Official Policy Guidelines of LINE Android Client Implementations Problems and Pitfalls 01 02 03 04 Contents 35
36. Case 1: Cannot apply in 
 button navigation mode 36 Specify background color in button navigation Solution Difficulty seeing button navigation on certain devices Problem Button navigation UI differs from device to device Cause
37. 37 Specify background color in button navigation Solution Difficulty seeing button navigation on certain devices Problem Button navigation UI differs from device to device Cause A NEW BUG HAS ARRIVED🥺 Case 1: Cannot apply in 
 button navigation mode
38. 38 Giving up support during button navigation Solution? Some devices are completely blind to button navigation. Problem Theme system with custom OS. Cause Case 1: Cannot apply in 
 button navigation mode
39. How to detect the current navigation mode 39 val navigationModeResourceId = resources.getIdentifier("config_navBarInteractionMode", "integer", "android") .takeIf { it > 0 } val navigationModeInt = try { navigationModeResourceId?.let(resources::getInteger) } catch (_: Resources.NotFoundException) { null } return navigationModeInt == 2 ☠ WARNING
40. Case 2: Issue when switching 
 the method of application in navigation mode There are two problems from Case 1: 40 Problem • Safe-area handling • Setting the navigation bar color
41. Case 2.1: Safe-area handling 41 Set padding in `onStart` function. Solution Padding with Insets is not applied correctly. Problem Set padding in `onCreate` function. Cause
42. Case 2.2: Setting the navigation bar color 42 Set navigation bar background color in `onStart` function Solution Navigation bar background color is not applied correctly Problem Set navigation bar background color in `onCreate` function Cause
43. Case 3: Device specific issues There are many problems that occur only with certain devices: 43 Problem • Mysterious padding is added when navigation mode is changed • Code to change color of navigation bar not working properly • Display cutout processing in landscape mode differs from device to device Not yet fixed as a known issue Solution?
44. Case 4: BottomSheetDialog issue 44 Create custom class that handles `fitsSystemWindows` properly Solution Unintended padding is added in the bottom sheet dialog Problem True is set to `setFitsSystemWindows` on `BottomSheetDialog` Cause
45. Handle “fitsSystemWindows” 45 override fun onAttachedToWindow() { super.onAttachedToWindow() // ...snip if (shouldOverlapSystemBars) { findViewById<View>(R.id.container)?.fitsSystemWindows = false findViewById<View>(R.id.coordinator)?.fitsSystemWindows = false } // ...snip }
46. Case 5: Another navigation modes 46 Fix navigation mode detection Solution Edge-to-edge is not applied with special gesture navigation Problem Different values were used to identify the mode Cause
47. Detect the current navigation mode 47 val gestureModeValues = setOf(2, 3) val navigationModeResourceId = resources.getIdentifier("config_navBarInteractionMode", "integer", "android") .takeIf { it > 0 } val navigationModeInt = try { navigationModeResourceId?.let(resources::getInteger) } catch (_: Resources.NotFoundException) { null } return gestureModeValues.contains(navigationModeInt) ☠ WARNING
48. Case 6: Android theme with App theme 48 Make utility class for edge-to-edge Solution Appropriate navigation bar colors are not set for each screen Problem The app has unique and complex theme Cause
49. SUMMARY
50. Summary • Follow the official policy to apply “edge-to-edge” feature • If you cannot comply with official policies, there are more things to consider • Your app experience will be better if you can apply it 50
51. LET'S APPLY IT FROM EDGE TO EDGE!
52. THANK YOU