Understanding WindowInsets

Talk given at Google I/O Connect Bengaluru 2023

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