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