Understanding WindowInsets

Talk given at Google I/O Connect Bengaluru 2023

1. Understanding WindowInsets Subhrajyoti Sen Software Engineer, Android GDE
2. What are WindowInsets? WindowInsets in Views WindowInsets in Compose Agenda Section 02 Section 01 Section 03
3. What are WindowInsets? Section 01
4. Section 01 Common types of Window Insets: 1. Navigation bar 2. Status bar 3. IME 4. System Gestures 5. Mandatory System Gestures 6. Caption Bar
5. Section 01 Status bar Navigation bar
6. Section 01 IME
7. WindowInsets in Views Section 02
8. Section 02
9. Section 02
10. Section 02
11. (Palmer penguins; Horst et al.) class MainActivity: Activity { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) WindowCompat.setDecorFitsSystemWindows(window, false) } } Section 02
12. (Palmer penguins; Horst et al.) class MainActivity: Activity { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) WindowCompat.setDecorFitsSystemWindows(window, false) } } Section 02
13. (Palmer penguins; Horst et al.) class MainActivity: Activity { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) window.statusBarColor = Color.TRANSPARENT window.navigationBarColor = Color.TRANSPARENT } } Section 02
14. Section 02
15. Section 02
16. Section 02
17. (Palmer penguins; Horst et al.) binding.root.setOnApplyWindowInsetsListener { _, insets -> val windowInsetsCompat = WindowInsetsCompat.toWindowInsetsCompat(insets) val navBarInsets = windowInsetsCompat.getInsets(WindowInsetsCompat.Type.navigationBars()) (binding.root.layoutParams as? ViewGroup.MarginLayoutParams)?.bottomMargin = navBarInsets.bottom insets } Section 02
18. (Palmer penguins; Horst et al.) binding.root.setOnApplyWindowInsetsListener { _, insets -> val windowInsetsCompat = WindowInsetsCompat.toWindowInsetsCompat(insets) val navBarInsets = windowInsetsCompat.getInsets(WindowInsetsCompat.Type.navigationBars()) (binding.root.layoutParams as? ViewGroup.MarginLayoutParams)?.bottomMargin = navBarInsets.bottom insets } Section 02
19. (Palmer penguins; Horst et al.) binding.root.setOnApplyWindowInsetsListener { _, insets -> val windowInsetsCompat = WindowInsetsCompat.toWindowInsetsCompat(insets) val navBarInsets = windowInsetsCompat.getInsets(WindowInsetsCompat.Type.navigationBars()) (binding.root.layoutParams as? ViewGroup.MarginLayoutParams)?.bottomMargin = navBarInsets.bottom insets } Section 02
20. (Palmer penguins; Horst et al.) binding.root.setOnApplyWindowInsetsListener { _, insets -> val windowInsetsCompat = WindowInsetsCompat.toWindowInsetsCompat(insets) val navBarInsets = windowInsetsCompat.getInsets(WindowInsetsCompat.Type.navigationBars()) (binding.root.layoutParams as? ViewGroup.MarginLayoutParams)?.bottomMargin = navBarInsets.bottom insets } Section 02
21. Section 02
22. (Palmer penguins; Horst et al.) WindowCompat.getInsetsController(window, window.decorView) .show(WindowInsetsCompat.Type.ime()) Section 02 Show soft keyboard (IME)
23. (Palmer penguins; Horst et al.) WindowCompat.getInsetsController(window, window.decorView) .hide(WindowInsetsCompat.Type.ime()) Section 02 Hide soft keyboard (IME)
24. (Palmer penguins; Horst et al.) binding.root.setOnApplyWindowInsetsListener { _, insets -> val visible = WindowInsetsCompat .toWindowInsetsCompat(insets) .isVisible(WindowInsetsCompat.Type.ime()) } Section 02 Check IME Visibility
25. WindowInsets in Compose Section 03
26. 26 Section 03 Box( modifier = Modifier.windowInsetsPadding() ) { Toolbar("Android") }
27. 27 Section 03 Box( modifier = Modifier.windowInsetsPadding(WindowInsets.statusBars) ) { Toolbar("Android") }
28. 28 Section 03 Box( modifier = Modifier.statusBarPadding() ) { Toolbar("Android") }
29. 29 Section 03 Box( modifier = Modifier .fillMaxSize() .background(Color.Black) ) { Box( modifier = Modifier .fillMaxSize() .statusBarsPadding() .background(Color.Gray)) { Box( modifier = Modifier.statusBarsPadding() .background(Color.Red) .size(50.dp) ) } }
30. 30 Section 03 Box( modifier = Modifier .fillMaxSize() .background(Color.Black) ) { Box( modifier = Modifier .fillMaxSize() .statusBarsPadding() .background(Color.Gray)) { Box( modifier = Modifier .statusBarsPadding() .background(Color.Red) .size(50.dp) ) } }
31. 31 Section 03
32. 32 Section 03 Scaffold( modifier = Modifier .fillMaxSize() .background(Color.Black) ) { contentPadding -> Box( modifier = Modifier .fillMaxSize() .padding(contentPadding) .background(Color.Gray)) { Box( modifier = Modifier .background(Color.Red) .size(50.dp) ) } }
33. 33 Section 03 Scaffold( modifier = Modifier .fillMaxSize() .background(Color.Black) ) { contentPadding -> Box( modifier = Modifier .fillMaxSize() .padding(contentPadding) .background(Color.Gray)) { Box( modifier = Modifier .background(Color.Red) .size(50.dp) ) } }
34. 34 Section 03 Scaffold( modifier = Modifier .fillMaxSize() .background(Color.Black) ) { contentPadding -> Box( modifier = Modifier .fillMaxSize() .padding(contentPadding) .background(Color.Gray)) { Box( modifier = Modifier .statusBarsPadding() .background(Color.Red) .size(50.dp) ) } }
35. 35 Section 03 Scaffold( modifier = Modifier .fillMaxSize() .background(Color.Black) ) { contentPadding -> Box( modifier = Modifier .fillMaxSize() .padding(contentPadding) .background(Color.Gray)) { Box( modifier = Modifier .statusBarsPadding() .background(Color.Red) .size(50.dp) ) } }
36. 36 Section 03 TextField( value = textFieldValue, onValueChange = { textFieldValue = it }, modifier = Modifier .align(Alignment.BottomCenter) .size(50.dp), )
37. 37 Section 03 TextField( value = textFieldValue, onValueChange = { textFieldValue = it }, modifier = Modifier .align(Alignment.BottomCenter) .imePadding() .size(50.dp), )
38. Section 03 Multiplatform WindowInsets Source: insetsx GitHub https://github.com/mori-atsushi/insetsx
39. Thank You Subhrajyoti Sen Software Engineer, Android GDE