Display Cutout

Transcript

1. Introducing DisplayCutout Shibuya.apk #24

2. About Me • Matthew Vern / Panini • Twitter: @callipan

   Github: panpanini • Mercari, Inc • Android Engineer (US) • Kotlin可愛い

3. Display Cutout support For devices like Essential Phone, or iPhone

   X which have a cutout in the display (for camera, etc).

4. Display Cutout emulator Access from Developer options

5. Display Cutout emulator Mode: None - standard

6. Display Cutout emulator Mode: Narrow display cutout

7. Display Cutout emulator Mode: Tall display cutout

8. Display Cutout emulator Mode: Wide display cutout

9. Display Cutout emulator Cutout only covers status bar, so there

   should be little affect to apps not using Fullscreen Activity
10. None

11. Important Point Status bar height has changed!

12. Important Point Clock has moved!

13. Important Point Clock has moved! Notifications only show on the

    left

14. Important Point Clock has moved! Notifications only show on the

    left Notifications will be hidden behind ..

15. LAYOUT_IN_DISPLAY_CUTOUT_MODE There are three layout modes for handling the cutout

    in a fullscreen Activity: LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER

16. LAYOUT_IN_DISPLAY_CUTOUT_MODE DEFAULT NEVER ALWAYS

17. WindowInsetListener // API Level 20+ view.setOnApplyWindowInsetsListener { view, windowInsets ->

    val cutout: DisplayCutout? = windowInsets.displayCutout // Adjust view position based on cutout windowInsets.consumeDisplayCutout() }

18. WindowInsetListener // API Level 20+ view.setOnApplyWindowInsetsListener { view, windowInsets ->

    val cutout: DisplayCutout? = windowInsets.displayCutout cutout?.bounds?.bounds?.let { view.translationX = it.right.toFloat() view.translationY = it.exactCenterY() - (view.measuredHeight() / 2) } windowInsets.consumeDisplayCutout() }

19. WindowInsetListener

20. Summary • Most apps don’t need to worry about DisplayCutout

    • Status bar height can change • WindowInsetListener to get cutout position • LAYOUT_IN_DISPLAY_CUTOUT_MODE for fullscreen Activities • Clock & Notifications only shown on the left-hand side of status bar

21. Introducing DisplayCutout Shibuya.apk #24