Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Display Cutout
Panini
April 13, 2018
Programming
1
360
Display Cutout
Panini
April 13, 2018
Tweet
Share
More Decks by Panini
See All by Panini
panini
0
200
panini
0
130
panini
0
57
panini
2
200
panini
2
1.7k
panini
1
530
panini
0
690
panini
2
650
panini
1
930
Other Decks in Programming
See All in Programming
inoue2002
0
270
ufoo68
1
170
akatsukinewgrad
0
180
thatjeffsmith
0
400
yosuke_furukawa
PRO
14
3.7k
yshrsmz
1
450
siketyan
1
110
saki4869
0
190
makicamel
1
170
77web
0
210
nbkouhou
9
4.6k
hanakla
2
3k
Featured
See All Featured
smashingmag
229
18k
chriscoyier
684
180k
roundedbygravity
84
7.8k
hannesfritz
27
930
bkeepers
321
53k
marktimemedia
6
330
nonsquared
81
3.3k
bkeepers
408
57k
addyosmani
1348
190k
danielanewman
200
19k
mthomps
39
2.3k
moore
125
21k
Transcript
Introducing DisplayCutout Shibuya.apk #24
About Me • Matthew Vern / Panini • Twitter: @callipan
Github: panpanini • Mercari, Inc • Android Engineer (US) • Kotlin可愛い
Display Cutout support For devices like Essential Phone, or iPhone
X which have a cutout in the display (for camera, etc).
Display Cutout emulator Access from Developer options
Display Cutout emulator Mode: None - standard
Display Cutout emulator Mode: Narrow display cutout
Display Cutout emulator Mode: Tall display cutout
Display Cutout emulator Mode: Wide display cutout
Display Cutout emulator Cutout only covers status bar, so there
should be little affect to apps not using Fullscreen Activity
None
Important Point Status bar height has changed!
Important Point Clock has moved!
Important Point Clock has moved! Notifications only show on the
left
Important Point Clock has moved! Notifications only show on the
left Notifications will be hidden behind ..
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
LAYOUT_IN_DISPLAY_CUTOUT_MODE DEFAULT NEVER ALWAYS
WindowInsetListener // API Level 20+ view.setOnApplyWindowInsetsListener { view, windowInsets ->
val cutout: DisplayCutout? = windowInsets.displayCutout // Adjust view position based on cutout windowInsets.consumeDisplayCutout() }
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() }
WindowInsetListener
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
Introducing DisplayCutout Shibuya.apk #24