Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Modifiers in Compose
Search
Beatrice Kinya
November 12, 2023
Technology
0
52
Modifiers in Compose
Did you know the order of modifiers matter? And much more.
Beatrice Kinya
November 12, 2023
Tweet
Share
More Decks by Beatrice Kinya
See All by Beatrice Kinya
Event driven approach: Make your app more predictable, maintainable and easier to debug
bkinya
0
7
Now In Android
bkinya
1
25
Introduction to Kotlin
bkinya
0
14
Ask Me Anything With Droid Pwani
bkinya
0
38
Modifiers: The secret sauce of Jetpack Compose
bkinya
0
170
Android Development in 2023
bkinya
0
51
Navigation in Jetpack Compose
bkinya
0
97
Architecting Compose UI, A Deep Dive
bkinya
0
81
Handling State in Jetpack Compose
bkinya
0
93
Other Decks in Technology
See All in Technology
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
310
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
900
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
Azure AI ことはじめ
tsubakimoto_s
0
130
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
270
Featured
See All Featured
Atom: Resistance is Futile
akmur
261
25k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Side Projects
sachag
451
42k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
How to Ace a Technical Interview
jacobian
274
23k
Automating Front-end Workflow
addyosmani
1362
200k
Building Applications with DynamoDB
mza
89
5.8k
Navigating Team Friction
lara
181
13k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Transcript
Beatrice Kinya GDE for Android | Android Engineer Also, I
create content @ Droicon Academy Pro Hiker| Mountaineer… Twitter: @B__Kinya LinkedIn: Beatrice Kinya
Modifiers Jetpack Compose
Modifiers - Allow you to tweak appearance and behaviour of
composables. Image( modifier = Modifier .padding(16.dp) .offset {...} .background(color = …) .anchoredDraggable(state, …), )
Chaining Modifiers What will the following code produce? Image( modifier
= Modifier .padding(16.dp) .background(color = …) .anchoredDraggable(state, …) .offset {... }, ) A
Chaining Modifiers What will the following code produce? Image( modifier
= Modifier .padding(16.dp) .background(color = …) .anchoredDraggable(state, …) .offset {... }, ) B
Chaining Modifiers - If you chain multiple modifiers, the modifier
wraps the rest of the chain and the layout node within.
Chaining Modifiers
Constraints
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.
Constraints Box(modifier = modifier.size(300.dp)) { Image( modifier = Modifier .padding(16.dp)
.size(90.dp) …, ) }
None
None
None
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), … )
None
None
None
Constraints: This won’t work Box(modifier = modifier.width(300.dp)) { Image( modifier
= Modifier .fillMaxWidth() .padding(16.dp), … ) }
None
Modifiers that affect constraints - size - width and height
- sizeIn - requiredSize
Always provide a modifier parameter
@Composable fun VersionImage( modifier: Modifier = Modifier ) { Box(modifier
= modifier) { Image( painter = painterResource(id = R.drawable.android_14_preview), contentDescription = null) } }
@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
@Composable fun Sample2( modifier: Modifier = Modifier, ) { Box(modifier
= modifier.background(color = lightGreen)) { VersionImage( modifier = Modifier .fillMaxWidth() .padding(16.dp), ) } } B
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
Thank you!