Understanding WindowInsets

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

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

Slide 19

Slide 19 text

Slide 20

Slide 20 text

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