Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Understanding WindowInsets

Understanding WindowInsets

53b72671be580e70c9795c7eaf35ac12?s=128

Subhrajyoti Sen

June 27, 2021
Tweet

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