Modifiers in Compose

Did you know the order of modifiers matter? And much more.

Transcript

1. Beatrice Kinya GDE for Android | Android Engineer Also, I create content @ Droicon Academy Pro Hiker| Mountaineer… Twitter: @B__Kinya LinkedIn: Beatrice Kinya
2. Modifiers Jetpack Compose
3. Modifiers - Allow you to tweak appearance and behaviour of composables. Image( modifier = Modifier .padding(16.dp) .offset {...} .background(color = …) .anchoredDraggable(state, …), )
4. Chaining Modifiers What will the following code produce? Image( modifier = Modifier .padding(16.dp) .background(color = …) .anchoredDraggable(state, …) .offset {... }, ) A
5. Chaining Modifiers What will the following code produce? Image( modifier = Modifier .padding(16.dp) .background(color = …) .anchoredDraggable(state, …) .offset {... }, ) B
6. Chaining Modifiers - If you chain multiple modifiers, the modifier wraps the rest of the chain and the layout node within.
7. Chaining Modifiers
8. Constraints
9. Constraints - Constraints are passed down from parent to child in a UI tree. - Constraints determine the maximum and minimum bounds for a node’s width and height.
10. Constraints Box(modifier = modifier.size(300.dp)) { Image( modifier = Modifier .padding(16.dp) .size(90.dp) …, ) }
14. Constraints: This won’t work Box(modifier = modifier.width(300.dp)) { Image( modifier = Modifier .fillMaxWidth() .padding(16.dp), … ) } Image( modifier = Modifier .fillMaxWidth() .size(90.dp), … )
18. Constraints: This won’t work Box(modifier = modifier.width(300.dp)) { Image( modifier = Modifier .fillMaxWidth() .padding(16.dp), … ) }
20. Modifiers that affect constraints - size - width and height - sizeIn - requiredSize
21. Always provide a modifier parameter
22. @Composable fun VersionImage( modifier: Modifier = Modifier ) { Box(modifier = modifier) { Image( painter = painterResource(id = R.drawable.android_14_preview), contentDescription = null) } }
23. @Composable fun DraggableSample( modifier: Modifier = Modifier ) { Box(modifier = modifier) { VersionImage( modifier = Modifier .size(200.dp) .padding(16.dp) .anchoredDraggable(state, orientation = Orientation.Horizontal) .offset {... }, ) } } A
24. @Composable fun Sample2( modifier: Modifier = Modifier, ) { Box(modifier = modifier.background(color = lightGreen)) { VersionImage( modifier = Modifier .fillMaxWidth() .padding(16.dp), ) } } B
25. Resources - Docs: Constraints and Modifiers: https://developer.android.com/jetpack/compose/layouts/constraints-modifiers - Always provide a modifier parameter: https://chrisbanes.me/posts/always-provide-a-modifier/ - Twitter compose rules: https://twitter.github.io/compose-rules/rules/#modifiers
26. Thank you!