Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Understanding WindowInsets

Understanding WindowInsets

Talk given at Google I/O Connect Bengaluru 2023

Subhrajyoti Sen

September 07, 2023
Tweet

More Decks by Subhrajyoti Sen

Other Decks in Technology

Transcript

  1. 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
  2. (Palmer penguins; Horst et al.) class MainActivity: Activity { override

    fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) WindowCompat.setDecorFitsSystemWindows(window, false) } } Section 02
  3. (Palmer penguins; Horst et al.) class MainActivity: Activity { override

    fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) WindowCompat.setDecorFitsSystemWindows(window, false) } } Section 02
  4. (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
  5. (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
  6. (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
  7. (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
  8. (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
  9. (Palmer penguins; Horst et al.) binding.root.setOnApplyWindowInsetsListener { _, insets ->

    val visible = WindowInsetsCompat .toWindowInsetsCompat(insets) .isVisible(WindowInsetsCompat.Type.ime()) } Section 02 Check IME Visibility
  10. 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) ) } }
  11. 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) ) } }
  12. 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) ) } }
  13. 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) ) } }
  14. 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) ) } }
  15. 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) ) } }
  16. 36 Section 03 TextField( value = textFieldValue, onValueChange = {

    textFieldValue = it }, modifier = Modifier .align(Alignment.BottomCenter) .size(50.dp), )
  17. 37 Section 03 TextField( value = textFieldValue, onValueChange = {

    textFieldValue = it }, modifier = Modifier .align(Alignment.BottomCenter) .imePadding() .size(50.dp), )