Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Understanding WindowInsets Subhrajyoti Sen Software Engineer, Android GDE
Slide 2
Slide 2 text
What are WindowInsets? WindowInsets in Views WindowInsets in Compose Agenda Section 02 Section 01 Section 03
Slide 3
Slide 3 text
What are WindowInsets? Section 01
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
Section 01 Status bar Navigation bar
Slide 6
Slide 6 text
Section 01 IME
Slide 7
Slide 7 text
WindowInsets in Views Section 02
Slide 8
Slide 8 text
Section 02
Slide 9
Slide 9 text
Section 02
Slide 10
Slide 10 text
Section 02
Slide 11
Slide 11 text
(Palmer penguins; Horst et al.) class MainActivity: Activity { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) WindowCompat.setDecorFitsSystemWindows(window, false) } } Section 02
Slide 12
Slide 12 text
(Palmer penguins; Horst et al.) class MainActivity: Activity { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) WindowCompat.setDecorFitsSystemWindows(window, false) } } Section 02
Slide 13
Slide 13 text
(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
Slide 14
Slide 14 text
Section 02
Slide 15
Slide 15 text
Section 02
Slide 16
Slide 16 text
Section 02
Slide 17
Slide 17 text
(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
Slide 18
Slide 18 text
(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
Slide 19
Slide 19 text
(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
Slide 20
Slide 20 text
(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
Slide 21
Slide 21 text
Section 02
Slide 22
Slide 22 text
(Palmer penguins; Horst et al.) WindowCompat.getInsetsController(window, window.decorView) .show(WindowInsetsCompat.Type.ime()) Section 02 Show soft keyboard (IME)
Slide 23
Slide 23 text
(Palmer penguins; Horst et al.) WindowCompat.getInsetsController(window, window.decorView) .hide(WindowInsetsCompat.Type.ime()) Section 02 Hide soft keyboard (IME)
Slide 24
Slide 24 text
(Palmer penguins; Horst et al.) binding.root.setOnApplyWindowInsetsListener { _, insets -> val visible = WindowInsetsCompat .toWindowInsetsCompat(insets) .isVisible(WindowInsetsCompat.Type.ime()) } Section 02 Check IME Visibility
Slide 25
Slide 25 text
WindowInsets in Compose Section 03
Slide 26
Slide 26 text
26 Section 03 Box( modifier = Modifier.windowInsetsPadding() ) { Toolbar("Android") }
Slide 27
Slide 27 text
27 Section 03 Box( modifier = Modifier.windowInsetsPadding(WindowInsets.statusBars) ) { Toolbar("Android") }
Slide 28
Slide 28 text
28 Section 03 Box( modifier = Modifier.statusBarPadding() ) { Toolbar("Android") }
Slide 29
Slide 29 text
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) ) } }
Slide 30
Slide 30 text
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) ) } }
Slide 31
Slide 31 text
31 Section 03
Slide 32
Slide 32 text
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) ) } }
Slide 33
Slide 33 text
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) ) } }
Slide 34
Slide 34 text
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) ) } }
Slide 35
Slide 35 text
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) ) } }
Slide 36
Slide 36 text
36 Section 03 TextField( value = textFieldValue, onValueChange = { textFieldValue = it }, modifier = Modifier .align(Alignment.BottomCenter) .size(50.dp), )
Slide 37
Slide 37 text
37 Section 03 TextField( value = textFieldValue, onValueChange = { textFieldValue = it }, modifier = Modifier .align(Alignment.BottomCenter) .imePadding() .size(50.dp), )
Slide 38
Slide 38 text
Section 03 Multiplatform WindowInsets Source: insetsx GitHub https://github.com/mori-atsushi/insetsx
Slide 39
Slide 39 text
Thank You Subhrajyoti Sen Software Engineer, Android GDE