Understanding WindowInsets

Transcript

1. Understanding WindowInsets KeepTruckin Subhrajyoti Sen CodeAid
2. What are Insets?
3. Insets - Types
4. Insets - Types • Status Bars
5. Insets - Types • • Status Bars Navigation Bars
6. Insets - Types • • • Status Bars Navigation Bars Caption Bar
7. Insets - Types • • • • Status Bars Navigation Bars Caption Bar IME
8. Insets - Types • • • • • Status Bars Navigation Bars Caption Bar IME System Gestures
9. Insets - Types • • • • • • Status Bars Navigation Bars Caption Bar IME System Gestures Display Cutouts
10. Insets Status Bar Navigation Bar
11. Improving the UI
13. Going Full Screen view.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
14. Going Full Screen view.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN On API 30+
15. Going Full Screen window.setDecorFitsSystemWindows(false) On API 30+
16. Going Full Screen WindowCompat.setDecorFitsSystemWindows(window, false) On API 30+ (backward compatible till API 21)
17. Now we have full screen...but
18. Before After
19. Fetching WindowInsets
20. Fetching WindowInsets binding.root.setOnApplyWindowInsetsListener { _, insets -> }
21. Fetching WindowInsets binding.root.setOnApplyWindowInsetsListener { _, insets -> val navigationBarHeight = insets.getInsets() }
22. Fetching WindowInsets binding.root.setOnApplyWindowInsetsListener { _, insets -> val navigationBarHeight = insets.getInsets( WindowInsets.Type.navigationBars() ) }
23. Fetching WindowInsets binding.root.setOnApplyWindowInsetsListener { _, insets -> val navigationBarHeight = insets.getInsets( WindowInsets.Type.navigationBars() ).bottom }
24. Fetching WindowInsets binding.root.setOnApplyWindowInsetsListener { _, insets -> val navigationBarHeight = insets.getInsets( WindowInsets.Type.navigationBars() ).bottom (binding.root.layoutParams as? ViewGroup.MarginLayoutParams)?. bottomMargin = navigationBarHeight }
25. Fetching WindowInsets insets.getInsets(WindowInsets.Type.navigationBars()).bottom On API 29+
26. Fetching WindowInsets On API 21+
27. Fetching WindowInsets WindowInsetsCompat .toWindowInsetsCompat(insets) .getInsets( WindowInsetsCompat.Type.navigationBars() ).bottom On API 21+
28. Insetter to the rescue
29. Insetter to the rescue Insetter.builder() .marginBottom(windowInsetTypesOf(navigationBars = true)) .applyToView(rootView)
30. Done
31. Not yet...
33. Introduce a notch
35. Padding for Notch (Display Cutout) binding.root.setOnApplyWindowInsetsListener { _, insets -> notchHeight = WindowInsetsCompat.toWindowInsetsCompat(insets) .getInsets(WindowInsetsCompat.Type.displayCutout()) .top }
36. Padding for Notch (Display Cutout) binding.root.setOnApplyWindowInsetsListener { _, insets -> notchHeight = WindowInsetsCompat.toWindowInsetsCompat(insets) .getInsets(WindowInsetsCompat.Type.displayCutout()) .top }
37. Padding for Notch (Display Cutout) binding.root.setOnApplyWindowInsetsListener { _, insets -> notchHeight = WindowInsetsCompat.toWindowInsetsCompat(insets) .getInsets(WindowInsetsCompat.Type.displayCutout()) .top }
38. Padding for Notch (Display Cutout) binding.root.setOnApplyWindowInsetsListener { _, insets -> notchHeight = WindowInsetsCompat.toWindowInsetsCompat(insets) .getInsets(WindowInsetsCompat.Type.displayCutout()) .top binding.toolbar.updatePadding(top= notchHeight) insets }
39. Doing more with WindowInsets API
40. Status Bar Appearance (Earlier) val decor = window.decorView decor.systemUiVisibility = decor.systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR Light status bar
41. Status Bar Appearance (Earlier) val decor = window.decorView decor.systemUiVisibility = decor.systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv() Dark status bar
42. Status Bar Appearance (Earlier) val decor = window.decorView decor.systemUiVisibility = decor.systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv() On API 30+
43. Status Bar Appearance WindowCompat.getInsetsController( window, window.decorView )?.isAppearanceLightStatusBars = false On API 21+
44. Show/Hide keyboard
45. Show keyboard val controller = WindowCompat.getInsetsController( window, window.decorView ) controller?.show(WindowInsetsCompat.Type.ime())
46. Hide keyboard val controller = WindowCompat.getInsetsController( window, window.decorView ) controller?.hide(WindowInsetsCompat.Type.ime())
47. Hide status bar val controller = WindowCompat.getInsetsController( window, window.decorView ) controller?.hide(WindowInsetsCompat.Type.statusBars())
48. Check keyboard visibility binding.root.setOnApplyWindowInsetsListener { _, insets -> val visible = WindowInsetsCompat.toWindowInsetsCompat(insets) .isVisible(WindowInsetsCompat.Type.ime()) }
49. @iamsubhrajyoti