WindowInsets, the way for Android app to offer edge-to-edge experience

Transcript

1. Window Insets
2. For offering an edge-to-edge experience Window Insets
3. Wi & e2e Table of contents
4. Wi & e2e What is a window?
5. “The backdrop for app’s user interface and the object that dispatches events to views” Wi & e2e What is a window?
6. Activity#getWindow() Dialog#getWindow() Wi & e2e What is a window?
7. Screen Every view on screen is in a window Layout Inspector Wi & e2e Window 1 (DecorView) Window 2 (DecorView) WindowManager
8. Screen Every view on screen is in a window Layout Inspector Wi & e2e Window 1 (DecorView) LinearLayout … FrameLayout … ContentFrameLayout Ac#vity/Dialog’s view setContentView(view) android.R.id.content
9. window: look and feel Wi & e2e 12:30 12:30 12:30 12:30 Edge-to-edge
10. What is Insets? “How the system tells you where the system ui currently is, or may later be displayed”
11. 16:58 Just avoid Status Bar at the top, and Bottom Navigation Bar at the bottom, quite.. ez J Status Bar Bottom Navigation Bar
12. 16:58 But in landscape mode, hmm… Cutout area
13. 16:58 How to get these values ? 🤔
14. Wi & e2e Window Insets API
15. Wi & e2e WindowInsets is an object that contains window’s insets, it’s dispatched to all views in layout tree. Window Insets
16. Wi & e2e Touch Events Window Insets vs
17. Wi & e2e Touch Events Window Insets View#onApplyWindowInsets(insets) View#onTouchEvent(event) Dispatch to childs until there’s a “consumed” view Dispatch to childs until there’s a “handled” view View#setOnApplyWindowInsetListener( listener) View#setOnTouchListener(listener)
18. Wi & e2e // onCreate or onViewCreated View.setOnApplyWindowInsetListener(view) { v, windowInsets " { // receive WindowInsets object here }
19. WindowInsets#getSystemWindowInsetLeft() #getSystemWindowInsetTop() #getSystemWindowInsetRight() #getSystemWindowInsetBottom WI API <= lv29 (Deprecated)
20. WI API <= lv29 (Deprecated) WindowInsets #getSystemWindowInset().left .top .right .bottom
21. WI API lv30 (New) WindowInsets #getInsets( WindowInsets#Type ).left .top .right .bottom
22. WI API lv30 (New) WindowInsets #getInsets( Type.systemBars() ).left .top .right .bottom
23. WI API lv30 (New) #getInsets( Type.systemBars() ).left .top .right .bottom or Type.ime() wInsets
24. Insets: top = 76 Insets: bottom = 48 Type.systemBars()
25. Insets: top = 76 Insets: bottom = 796 Type.systemBars() or Type.ime()
26. Insets: top = 0 Insets: bottom = 748 Type.ime()
27. Why Edge-to-edge ?
28. API Level E2E with Dark Theme E2E with Light Theme E2E with Gestural Navigation Light Status Bar Light Bottom Navigation Bar E2E 21 -> 22 TRANSLUCENT NO PARTIAL NO 23 -> 25 YES NO PARTIAL - 26 -> 28 - - 29 -> 30 - - Edge to edge availability
29. // 3. light or dark icons in system bars val darkIcons = true WindowInsetsControllerCompat(window, Setting up // onCreate() // 1. make system bars transparently window.navigationBarColor = Color.TRANSPARENT window.statusBarColor = Color.TRANSPARENT 12:30 // 2. ”edge-to-edge” flags WindowCompat.setDecorFitsSystemWindows(window, false)
30. // 2. ”edge-to-edge” flags WindowCompat.setDecorFitsSystemWindows(window, false) // onCreate() // 1. make system bars transparently window.navigationBarColor = Color.TRANSPARENT window.statusBarColor = Color.TRANSPARENT // 3. light or dark icons in system bars val darkIcons = true WindowInsetsControllerCompat(window, window.peekDecorView()).apply { isAppearanceLightNavigationBars = darkIcons isAppearanceLightStatusBars = darkIcons } Setting up 12:30 // 4. drawing behind the cutout area window.attributes.layoutInDisplayCutoutMode =
31. val darkIcons = true WindowInsetsControllerCompat(window, window.peekDecorView()).apply { isAppearanceLightNavigationBars = darkIcons isAppearanceLightStatusBars = darkIcons } Setting up 12:30 // 4. drawing behind the cutout area window.attributes.layoutInDisplayCutoutMode = WindowManager.LayoutParams. LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES window.requestLayout();
32. Visual overlaps
33. Fix visual overlaps // 3. listen to insets ViewCompat.setOnApplyWindowInsetsListener(view) { v, windowInsets-> val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars() windownInsets } // now add some padding or margin to conflict views …
34. Fix visual overlaps (searchButton.layoutParams as ConstraintLayout.LayoutParams) .apply { marginTop = insets.top marginRight = insets.right } requestLayout()
38. Use an “invisible view” to constraint others Safe Area Insets: top Insets: bottom
39. Use an “invisible view” to constraint others Safe Area View class SafeAreaView : View { override fun onApplyWindowInsets(insets: WindowInsets?): WindowInsets { val lp = layoutParams as ViewGroup.MarginLayoutParams? insets?.apply { lp.topMargin = systemWindowInsetTop lp.leftMargin = systemWindowInsetLeft lp.rightMargin = systemWindowInsetRight lp.bottomMargin = systemWindowInsetBottom } return super.onApplyWindowInsets(insets) }
40. Use an “invisible view” to constraint others
41. Use an “invisible view” to constraint others
42. Use an “invisible view” to constraint others app:layout_constraintStart_toStartOf="parent"" “id/safeAreaView” app:layout_constraintTop_toTopOf=“parent” " “id/safeAreaView” app:layout_constraintEnd_toEndOf=“parent” " “id/safeAreaView” app:layout_constraintEnd_toEndOf=“parent” " “id/safeAreaView” https://shorturl.at/jnHX5
43. Padding instead of margin Scrollable view ScrollView ListView RecyclerView // caching initial padding val initialPadding = view.paddingBottom // applying insets view.apply { paddingBottom = initialPadding + inset.bottom }
44. Avoid “fitsSystemWindow” android:fitsSystemWindow=“true” view.apply { paddingLeft = insets.left paddingTop = insets.top paddingRight= insets.right paddingBottom = inset.bottom } ==
45. Request window insets // Ask for a new dispatch of WindowInsets // to be performed View#requestApplyInsets()
46. For more docs • Keyword “Going edge-to-edge” • “How to become a master window fitter” – Chris bane • “Gesture Navigation and the edge-to-edge experience” – Google CodeLab • Youtube Android Developer