Becoming a master window fitter (Droidcon NYC 2017)

Window insets have long been a source of confusion to developers, and that’s because they are indeed very confusing! The system dispatches insets for many reasons, such as drawing behind navigation bars, full-screen immersive modes or handling round displays.

This session will deep-dive on the situations where you need to consider Window Insets, and how you can handle them without resorting to copying random code from StackOverflow. You will learn the answers to questions such as:

‘How do I handle these in my custom view?’, ‘How do I draw behind the status bar?’ and ‘What was the developer of AppBarLayout thinking?!’

Video: https://chris.banes.me/talks/2017/becoming-a-master-window-fitter-nyc/

Transcript

1. BECOMING A MASTER WINDOW FITTER @chrisbanes
2. BECOMING A MASTER WINDOW FITTER chris.banes.me/dcnyc17
3. What’s a window?
5. 12:00
6. 12:00
7. 12:00
8. 12:00 Window
9. 12:00 Activity Window Activities have a Window Activity#getWindow()
10. 12:00 Window Activity Dialogs have a Window too Dialog#getWindow() Dialog
11. 12:00 Activity
12. 12:00 Activity Activity
13. Why do I have to
 fit them?
14. 12:00
16. S
23. Inset
24. Inset How the system tells you where the system ui currently is, or may later be displayed
25. BECOMING A MASTER WINDOW FITTER History
26. Pre-KitKat
27. Pre-KitKat
28. Pre-KitKat Window is placed within system bars
29. Pre-KitKat Window is placed within system bars
30. Pre-KitKat setSystemUiVisibility() Window is placed within system bars
31. setSystemUiVisibility()
32. SYSTEM_UI_FLAG_VISIBLE SYSTEM_UI_FLAG_LOW_PROFILE SYSTEM_UI_FLAG_HIDE_NAVIGATION SYSTEM_UI_FLAG_FULLSCREEN SYSTEM_UI_FLAG_IMMERSIVE_STICKY SYSTEM_UI_FLAG_IMMERSIVE SYSTEM_UI_FLAG_LIGHT_STATUS_BAR SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR SYSTEM_UI_FLAG_LAYOUT_STABLE SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
33. SYSTEM_UI_FLAG_VISIBLE SYSTEM_UI_FLAG_LOW_PROFILE SYSTEM_UI_FLAG_HIDE_NAVIGATION SYSTEM_UI_FLAG_FULLSCREEN SYSTEM_UI_FLAG_IMMERSIVE_STICKY SYSTEM_UI_FLAG_IMMERSIVE SYSTEM_UI_FLAG_LIGHT_STATUS_BAR SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR SYSTEM_UI_FLAG_LAYOUT_STABLE SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
34. SYSTEM_UI_FLAG_VISIBLE SYSTEM_UI_FLAG_LOW_PROFILE SYSTEM_UI_FLAG_HIDE_NAVIGATION SYSTEM_UI_FLAG_FULLSCREEN SYSTEM_UI_FLAG_IMMERSIVE_STICKY SYSTEM_UI_FLAG_IMMERSIVE SYSTEM_UI_FLAG_LIGHT_STATUS_BAR SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR SYSTEM_UI_FLAG_LAYOUT_STABLE SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
35. SYSTEM_UI_FLAG_VISIBLE SYSTEM_UI_FLAG_LOW_PROFILE SYSTEM_UI_FLAG_HIDE_NAVIGATION SYSTEM_UI_FLAG_FULLSCREEN SYSTEM_UI_FLAG_IMMERSIVE_STICKY SYSTEM_UI_FLAG_IMMERSIVE SYSTEM_UI_FLAG_LIGHT_STATUS_BAR SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR SYSTEM_UI_FLAG_LAYOUT_STABLE SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
36. SYSTEM_UI_FLAG_VISIBLE SYSTEM_UI_FLAG_LOW_PROFILE SYSTEM_UI_FLAG_HIDE_NAVIGATION SYSTEM_UI_FLAG_FULLSCREEN SYSTEM_UI_FLAG_IMMERSIVE_STICKY SYSTEM_UI_FLAG_IMMERSIVE SYSTEM_UI_FLAG_LIGHT_STATUS_BAR SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR SYSTEM_UI_FLAG_LAYOUT_STABLE SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
37. SYSTEM_UI_FLAG_VISIBLE SYSTEM_UI_FLAG_LOW_PROFILE SYSTEM_UI_FLAG_HIDE_NAVIGATION SYSTEM_UI_FLAG_FULLSCREEN SYSTEM_UI_FLAG_IMMERSIVE_STICKY SYSTEM_UI_FLAG_IMMERSIVE SYSTEM_UI_FLAG_LIGHT_STATUS_BAR SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR SYSTEM_UI_FLAG_LAYOUT_STABLE SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN chris.banes.me/systemuihelper
38. indow lag W F ransform T s View.SYSTEM_UI_FLAG_LAYOUT_STABLE View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
39. W F T s View.SYSTEM_UI_FLAG_LAYOUT_STABLE View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
40. myView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
41. myView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
42. KitKat
43. KitKat
44. KitKat Translucent system bars
45. KitKat Translucent system bars
46. KitKat Translucent system bars android:windowTranslucentStatus android:windowTranslucentNavigation
47. Translucent system bars WTFs are implied KitKat
48. Translucent system bars WTFs are implied System bar backgrounds are drawn by WindowManager KitKat
49. Lollipop
50. Lollipop
51. Lollipop android:windowDrawsSystemBarBackgrounds System bar backgrounds are placed in Window
53. android:navigationBarColor getWindow().setNavigationBarColor()
54. android:statusBarColor getWindow().setStatusBarColor()
55. Lollipop WTFs are not implied
56. Lollipop They take precedence over custom colors Translucent system bars They disable windowDrawsSystemBarBackgrounds
57. BECOMING A MASTER WINDOW FITTER How can you handle this?
58. android:fitSystemWindows="true"
59. android:fitSystemWindows="true" Uses padding to move child views within insets Default View.java behavior:
60. 12:00
61. 12:00 android:fitSystemWindows="true"
62. 12:00 android:fitSystemWindows="true" systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
63. 12:00 android:fitSystemWindows="true" systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
64. 12:00 android:fitSystemWindows="true" systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN Padding Padding
65. Rule of thumb You probably want to avoid the default behavior of android:fitSystemWindows
66. But the docs say to use it?!
67. But the docs say to use it?! DrawerLayout CoordinatorLayout AppBarLayout CollapsingToolbarLayout
68. DrawerLayout Sets the WTFs for you on API 21+ 12:00
69. 12:00 <DrawerLayout layout_height="match_parent" layout_width="match_parent" <NavigationView layout_height="match_parent" layout_width="match_parent"
 layout_gravity="end" /> <LinearLayout layout_height="match_parent" layout_width="match_parent">
 <!— toolbar and other content —> </LinearLayout> </DrawerLayout> >
70. 12:00 > fitSystemWindows="true" <DrawerLayout layout_height="match_parent" layout_width="match_parent" <NavigationView layout_height="match_parent" layout_width="match_parent"
 layout_gravity="end" /> <LinearLayout layout_height="match_parent" layout_width="match_parent">
 <!— toolbar and other content —> </LinearLayout> </DrawerLayout>
71. <DrawerLayout layout_height="match_parent" layout_width="match_parent" <NavigationView layout_height="match_parent" layout_width="match_parent"
 layout_gravity="end" /> <LinearLayout layout_height="match_parent" layout_width="match_parent"> <!— toolbar and other content —> </LinearLayout> </DrawerLayout> 12:00 fitSystemWindows="true">
72. DrawerLayout Sets the WTFs for you on API 21+ 12:00 Use fitSystemWindows as a signal from children
73. 12:00 <DrawerLayout layout_height="match_parent" layout_width="match_parent" <NavigationView layout_height="match_parent" layout_width="match_parent"
 layout_gravity="end" <LinearLayout layout_height="match_parent" layout_width="match_parent"> <!— toolbar and other content —> </LinearLayout> </DrawerLayout> fitSystemWindows="true"> />
74. 12:00 <DrawerLayout layout_height="match_parent" layout_width="match_parent" <NavigationView layout_height="match_parent" layout_width="match_parent"
 layout_gravity="end" <LinearLayout layout_height="match_parent" layout_width="match_parent"> <!— toolbar and other content —> </LinearLayout> </DrawerLayout> fitSystemWindows="true"> />
75. <DrawerLayout layout_height="match_parent" layout_width="match_parent" <NavigationView layout_height="match_parent" layout_width="match_parent"
 layout_gravity="end" <LinearLayout layout_height="match_parent" layout_width="match_parent"> <!— toolbar and other content —> </LinearLayout> </DrawerLayout> fitSystemWindows="true"> /> fitSystemWindows="true" 12:00
76. <DrawerLayout layout_height="match_parent" layout_width="match_parent" <NavigationView layout_height="match_parent" layout_width="match_parent"
 layout_gravity="end" <LinearLayout layout_height="match_parent" layout_width="match_parent"> <!— toolbar and other content —> </LinearLayout> </DrawerLayout> fitSystemWindows="true"> /> fitSystemWindows="true" 12:00
77. <DrawerLayout layout_height="match_parent" layout_width="match_parent" <NavigationView layout_height="match_parent" layout_width="match_parent"
 layout_gravity="end" <LinearLayout layout_height="match_parent" layout_width="match_parent"> <!— toolbar and other content —> </LinearLayout> </DrawerLayout> fitSystemWindows="true"> /> fitSystemWindows="true" 12:00
78. fitSystemWindows="true"> /> fitSystemWindows="true" <DrawerLayout layout_height="match_parent" layout_width="match_parent" <NavigationView layout_height="match_parent" layout_width="match_parent"
 layout_gravity="end" <LinearLayout layout_height="match_parent" layout_width="match_parent"> <!— toolbar and other content —> </LinearLayout> </DrawerLayout> 12:00
79. fitSystemWindows="true"> /> fitSystemWindows="true" <DrawerLayout layout_height="match_parent" layout_width="match_parent" <NavigationView layout_height="match_parent" layout_width="match_parent"
 layout_gravity="end" <LinearLayout layout_height="match_parent" layout_width="match_parent"> <!— toolbar and other content —> </LinearLayout> </DrawerLayout> 12:00
80. fitSystemWindows="true"> /> fitSystemWindows="true" <DrawerLayout layout_height="match_parent" layout_width="match_parent" <NavigationView layout_height="match_parent" layout_width="match_parent"
 layout_gravity="end" <LinearLayout layout_height="match_parent" layout_width="match_parent" <!— toolbar and other content —> </LinearLayout> </DrawerLayout> > 12:00
81. fitSystemWindows="true"> /> fitSystemWindows="true" <DrawerLayout layout_height="match_parent" layout_width="match_parent" <NavigationView layout_height="match_parent" layout_width="match_parent"
 layout_gravity="end" <LinearLayout layout_height="match_parent" layout_width="match_parent" <!— toolbar and other content —> </LinearLayout> </DrawerLayout> fitSystemWindows="true"> 12:00
82. fitSystemWindows="true"> /> fitSystemWindows="true" <DrawerLayout layout_height="match_parent" layout_width="match_parent" <NavigationView layout_height="match_parent" layout_width="match_parent"
 layout_gravity="end" <LinearLayout layout_height="match_parent" layout_width="match_parent" <!— toolbar and other content —> </LinearLayout> </DrawerLayout> 12:00 fitSystemWindows="true">
83. <DrawerLayout layout_height="match_parent" layout_width="match_parent" <NavigationView layout_height="match_parent" layout_width="match_parent"
 layout_gravity="end" <LinearLayout layout_height="match_parent" layout_width="match_parent" <!— toolbar and other content —> </LinearLayout> </DrawerLayout> 12:00 fitSystemWindows="true"> fitSystemWindows="true"> /> fitSystemWindows="true"
84. CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout
85. 12:00 Sets the WTFs for you on API 21+ Use fitSystemWindows as a signal from children CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout
86. <CoordinatorLayout layout_height="match_parent" layout_width="match_parent"> <AppBarLayout layout_height="match_parent" layout_width="wrap_content" /> <CollapsingToolbarLayout> <ImageView id="@+id/poster" /> </CollapsingToolbarLayout> </AppBarLayout> </CoordinatorLayout>
87. <CoordinatorLayout layout_height="match_parent" layout_width="match_parent" fitSystemWindows="true"> <AppBarLayout layout_height="match_parent" layout_width="wrap_content" fitSystemWindows="true" /> <CollapsingToolbarLayout fitSystemWindows="true"> <ImageView id="@+id/poster" fitSystemWindows="true" /> </CollapsingToolbarLayout> </AppBarLayout> </CoordinatorLayout>
88. BECOMING A MASTER WINDOW FITTER Manual handling
89. BECOMING A MASTER WINDOW FITTER What not to do…
90. Fixed dimension for status bar What not to do…
91. <dimen name="status_bar_size"> 24dp </dimen>
92. <dimen name="status_bar_size"> 24dp </dimen> res/values-v23 <dimen name="status_bar_size"> 25dp </dimen> res/values
93. What if the status bar size changes?
94. <Toolbar android:layout_marginTop="24dp" />
96. What happens if devices have different status bar sizes?
97. 53dp 24dp
98. Retrieve internal system resources What not to do…
99. <resources> <!-- The width that is used when creating thumbnails of applications. --> <dimen name="thumbnail_width">192dp</dimen> <!-- The height that is used when creating thumbnails of applications. --> <dimen name="thumbnail_height">192dp</dimen> <!-- The amount to scale a fullscreen screenshot thumbnail. --> <item name="thumbnail_fullscreen_scale" type="fraction">60%</item> <!-- The width used to calculate scale for full screen thumbnail on TV --> <integer name="thumbnail_width_tv">240</integer> <!-- The standard size (both width and height) of an application icon that will be displayed in the app launcher and elsewhere. --> <dimen name="app_icon_size">48dip</dimen> <dimen name="toast_y_offset">64dip</dimen> <!-- Height of the status bar --> <dimen name="status_bar_height">24dp</dimen> <!-- Height of the bottom navigation / system bar. --> <dimen name="navigation_bar_height">48dp</dimen> <!-- Height of the bottom navigation bar in portrait; often the same as
 @dimen/navigation_bar_height --> <dimen name="navigation_bar_height_landscape">48dp</dimen> <!-- Width of the navigation bar when it is placed vertically on the screen --> <dimen name="navigation_bar_width">48dp</dimen> <!-- Height of the bottom navigation / system bar in car mode. --> frameworks/base/core/res/values/dimens.xml
100. frameworks/base/core/res/values/dimens.xml <resources> <!-- The width that is used when creating thumbnails of applications. --> <dimen name="thumbnail_width">192dp</dimen> <!-- The height that is used when creating thumbnails of applications. --> <dimen name="thumbnail_height">192dp</dimen> <!-- The amount to scale a fullscreen screenshot thumbnail. --> <item name="thumbnail_fullscreen_scale" type="fraction">60%</item> <!-- The width used to calculate scale for full screen thumbnail on TV --> <integer name="thumbnail_width_tv">240</integer> <!-- The standard size (both width and height) of an application icon that will be displayed in the app launcher and elsewhere. --> <dimen name="app_icon_size">48dip</dimen> <dimen name="toast_y_offset">64dip</dimen> <!-- Height of the status bar --> <dimen name="status_bar_height">24dp</dimen> <!-- Height of the bottom navigation / system bar. --> <dimen name="navigation_bar_height">48dp</dimen> <!-- Height of the bottom navigation bar in portrait; often the same as
 @dimen/navigation_bar_height --> <dimen name="navigation_bar_height_landscape">48dp</dimen> <!-- Width of the navigation bar when it is placed vertically on the screen --> <dimen name="navigation_bar_width">48dp</dimen> <!-- Height of the bottom navigation / system bar in car mode. -->
101. var resourceId = resources.getIdentifier(
 "status_bar_height", "dimen", "android")
 return resources.getDimensionPixelSize(resourceId)
102. What happens if the internal resource name changes?
104. What if the device does not let you draw behind the status bar?
108. BECOMING A MASTER WINDOW FITTER The supported way: WindowInsets
109. BECOMING A MASTER WINDOW FITTER WindowInsets getSystemWindowInsetLeft() getSystemWindowInsetTop() getSystemWindowInsetRight() getSystemWindowInsetBottom()
110. BECOMING A MASTER WINDOW FITTER WindowInsets getSystemWindowInsetLeft() getSystemWindowInsetTop() getSystemWindowInsetRight() getSystemWindowInsetBottom() Compat
111. 12:00 getSystemWindowInsetLeft() getSystemWindowInsetTop() getSystemWindowInsetRight() getSystemWindowInsetBottom()
112. 12:00 getSystemWindowInsetLeft() getSystemWindowInsetTop() getSystemWindowInsetRight() getSystemWindowInsetBottom() 0
113. 12:00 getSystemWindowInsetLeft() getSystemWindowInsetTop() getSystemWindowInsetRight() getSystemWindowInsetBottom() 72 0
114. 12:00 getSystemWindowInsetLeft() getSystemWindowInsetTop() getSystemWindowInsetRight() getSystemWindowInsetBottom() 72 0 0
115. 12:00 getSystemWindowInsetLeft() getSystemWindowInsetTop() getSystemWindowInsetRight() getSystemWindowInsetBottom() 144 72 0 0
116. BECOMING A MASTER WINDOW FITTER myView.setOnApplyWindowInsetsListener { view, insets -> // TODO handle insets return insets.consumeSystemWindowInsets() }
117. BECOMING A MASTER WINDOW FITTER ViewCompat.setOnApplyWindowInsetsListener(view) { view, insets -> // TODO handle insets return insets.consumeSystemWindowInsets() }
118. BECOMING A MASTER WINDOW FITTER class CustomLayout : LinearLayout { // yadda yadda override fun onApplyWindowInsets( insets: WindowInsets): WindowInsets { // TODO handle the insets return insets.consumeSystemWindowInsets() } }
119. BECOMING A MASTER WINDOW FITTER class CustomLayout : LinearLayout { // yadda yadda override fun onApplyWindowInsets( insets: WindowInsets): WindowInsets { // TODO handle the insets return insets.consumeSystemWindowInsets() } }
120. BECOMING A MASTER WINDOW FITTER WindowInsets will be passed down until it has been consumed
121. BECOMING A MASTER WINDOW FITTER Window Decor LinearLayout Child Child dispatchApplyWindowInsets()
122. BECOMING A MASTER WINDOW FITTER Window Decor dispatchApplyWindowInsets() LinearLayout Child Child
123. BECOMING A MASTER WINDOW FITTER Window Decor LinearLayout Child Child Left: Top: Right: Bottom: 0 72 0 144 dispatchApplyWindowInsets()
124. BECOMING A MASTER WINDOW FITTER Window Decor LinearLayout Child Child Left: Top: Right: Bottom: 0 72 0 144 onApplyWindowInsets()
125. BECOMING A MASTER WINDOW FITTER Window Decor LinearLayout Child Child Left: Top: Right: Bottom: 0 0 0 144 onApplyWindowInsets() Consumes top
126. BECOMING A MASTER WINDOW FITTER Window Decor LinearLayout Child Child WindowInsets.isConsumed() Left: Top: Right: Bottom: 0 0 0 144 false
127. BECOMING A MASTER WINDOW FITTER Window Decor LinearLayout Child Child dispatchApplyWindowInsets() Left: Top: Right: Bottom: 0 0 0 144
128. BECOMING A MASTER WINDOW FITTER Window Decor LinearLayout Child Child Left: Top: Right: Bottom: 0 0 0 144 onApplyWindowInsets()
129. BECOMING A MASTER WINDOW FITTER Window Decor LinearLayout Child Child Left: Top: Right: Bottom: 0 0 0 144 WindowInsets.isConsumed() false
130. BECOMING A MASTER WINDOW FITTER Window Decor LinearLayout Child Child dispatchApplyWindowInsets() Left: Top: Right: Bottom: 0 0 0 144
131. BECOMING A MASTER WINDOW FITTER Window Decor LinearLayout Child Child Left: Top: Right: Bottom: 0 0 0 144 onApplyWindowInsets()
132. BECOMING A MASTER WINDOW FITTER Window Decor LinearLayout Child Child Left: Top: Right: Bottom: 0 0 0 0 WindowInsets.isConsumed() true
133. BECOMING A MASTER WINDOW FITTER TL;DW
134. BECOMING A MASTER WINDOW FITTER If you’re using DrawerLayout or CoordinatorLayout Use android:fitSystemWindows="true" on direct children which you want to be displayed behind the system bars
135. BECOMING A MASTER WINDOW FITTER Avoid translucent system bars <item name="android:statusBarColor">#80000000 </item> <item name="android:navigationBarColor">#80000000 </item>
136. BECOMING A MASTER WINDOW FITTER If you need to get access to the status bar size myView.setOnApplyWindowInsetsListener { view, insets -> val statusBarSize = insets.systemWindowInsetTop return insets }
137. BECOMING A MASTER WINDOW FITTER Repeat once per week I will never store or retrieve the status bar size from resources ever again
138. Over and out… @chrisbanes