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. Understanding
    WindowInsets
    Subhrajyoti Sen
    Software Engineer, Android GDE

    View Slide

  2. What are
    WindowInsets?
    WindowInsets in
    Views
    WindowInsets in
    Compose
    Agenda
    Section 02
    Section 01 Section 03

    View Slide

  3. What are
    WindowInsets?
    Section 01

    View Slide

  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

    View Slide

  5. Section 01
    Status bar
    Navigation bar

    View Slide

  6. Section 01
    IME

    View Slide

  7. WindowInsets in
    Views
    Section 02

    View Slide

  8. Section 02

    View Slide

  9. Section 02

    View Slide

  10. Section 02

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  14. Section 02

    View Slide

  15. Section 02

    View Slide

  16. Section 02

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  21. Section 02

    View Slide

  22. (Palmer penguins; Horst et al.)
    WindowCompat.getInsetsController(window, window.decorView)
    .show(WindowInsetsCompat.Type.ime())
    Section 02
    Show soft keyboard (IME)

    View Slide

  23. (Palmer penguins; Horst et al.)
    WindowCompat.getInsetsController(window, window.decorView)
    .hide(WindowInsetsCompat.Type.ime())
    Section 02
    Hide soft keyboard (IME)

    View Slide

  24. (Palmer penguins; Horst et al.)
    binding.root.setOnApplyWindowInsetsListener { _, insets ->
    val visible = WindowInsetsCompat
    .toWindowInsetsCompat(insets)
    .isVisible(WindowInsetsCompat.Type.ime())
    }
    Section 02
    Check IME Visibility

    View Slide

  25. WindowInsets in
    Compose
    Section 03

    View Slide

  26. 26
    Section 03
    Box(
    modifier = Modifier.windowInsetsPadding()
    ) {
    Toolbar("Android")
    }

    View Slide

  27. 27
    Section 03
    Box(
    modifier = Modifier.windowInsetsPadding(WindowInsets.statusBars)
    ) {
    Toolbar("Android")
    }

    View Slide

  28. 28
    Section 03
    Box(
    modifier = Modifier.statusBarPadding()
    ) {
    Toolbar("Android")
    }

    View Slide

  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)
    )
    }
    }

    View Slide

  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)
    )
    }
    }

    View Slide

  31. 31
    Section 03

    View Slide

  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)
    )
    }
    }

    View Slide

  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)
    )
    }
    }

    View Slide

  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)
    )
    }
    }

    View Slide

  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)
    )
    }
    }

    View Slide

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

    View Slide

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

    View Slide

  38. Section 03
    Multiplatform WindowInsets
    Source: insetsx GitHub
    https://github.com/mori-atsushi/insetsx

    View Slide

  39. Thank You
    Subhrajyoti Sen
    Software Engineer, Android GDE

    View Slide