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

12. None

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...

32. None

33. Introduce a notch

34. None

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