Deep Dive in Compose Layout, Lazy Layout, and Material Design 3 - Compose Camp x Juara Android

Transcript

1. Ahmad Arif Faizin Curriculum Developer at Dicoding Indonesia @arif_faizin Deep Dive in Compose Layout, Lazy Layout, and Material Design 3
2. Deep dive in Compose Layout
3. Column Row Box Constraint Layout
4. @Composable fun SearchResult(result: SearchResult, modifier: Modifier = Modifier) { Row(modifier = modifier .padding(8.dp) .background(MaterialTheme.colors.surface) ) { Image(modifier = Modifier.size(72.dp)) Column(modifier = Modifier .padding(16.dp) .align(Alignment.CenterVertically) ) { Text(result.title) Text(result.subtitle) } } }
5. Easy Powerful Performant
6. Layout Model
7. UI State
8. Layout UI tate Composition Drawing
9. Layout Drawing Composition
10. @Composable fun SearchResult(...) { Row(...) { Image(...) Column(...) { Text(...) Text(..) } } } Layout Drawing Composition
11. @Composable fun SearchResult(...) { Row(...) { Image(...) Column(...) { Text(...) Text(..) } } } Layout Drawing Composition SearchResult Row Image Column Text Text
12. Drawing Composition Layout
13. Composition Layout Drawing
14. Drawing Composition Layout
15. Drawing Composition Layout Measure Place
16. Measure children Drawing Composition Layout Decide own size Place children
17. @Composable fun SearchResult(...) { Row(...) { Image(...) Column(...) { Text(...) Text(..) } } } Drawing Composition SearchResult Row Image Column Text Text Layout
18. @Composable fun SearchResult(...) { Row(...) { Image(...) Column(...) { Text(...) Text(..) } } } Drawing Composition SearchResult Row Image Column Text Text Layout 1 measure
19. @Composable fun SearchResult(...) { Row(...) { Image(...) Column(...) { Text(...) Text(..) } } } Drawing Composition SearchResult Row Image Column Text Text Layout 1 measure 2 measure
20. @Composable fun SearchResult(...) { Row(...) { Image(...) Column(...) { Text(...) Text(..) } } } Drawing Composition SearchResult Row Image Column Text Text Layout 1 measure 2 measure 3 size
21. SearchResult Row Image Column Text Text @Composable fun SearchResult(...) { Row(...) { Image(...) Column(...) { Text(...) Text(..) } } } place Drawing Composition Layout 1 measure 2 measure 3 size
22. @Composable fun SearchResult(...) { Row(...) { Image(...) Column(...) { Text(...) Text(..) } } } SearchResult Row Image Column Text Text place Drawing Composition Layout 1 measure 2 measure 4 measure 3 size
23. @Composable fun SearchResult(...) { Row(...) { Image(...) Column(...) { Text(...) Text(..) } } } SearchResult Row Image Column Text Text place Drawing Composition Layout 1 measure 2 measure 4 measure 5 measure 3 size
24. @Composable fun SearchResult(...) { Row(...) { Image(...) Column(...) { Text(...) Text(..) } } } SearchResult Row Image Column Text Text place place Drawing Composition Layout 1 measure 2 measure 4 measure 5 measure 6 size 3 size
25. SearchResult Row Image Column Text Text @Composable fun SearchResult(...) { Row(...) { Image(...) Column(...) { Text(...) Text(..) } } } place place place Drawing Composition Layout 1 measure 2 measure 4 measure 5 measure 6 size 7 measure 8 size 3 size
26. @Composable fun SearchResult(...) { Row(...) { Image(...) Column(...) { Text(...) Text(..) } } } SearchResult Row Image Column Text Text place place place place Drawing Composition Layout 1 measure 2 measure 3 size 4 measure 5 measure 6 size 7 measure 8 size 9 size
27. SearchResult Row Image Column Text Text @Composable fun SearchResult(...) { Row(...) { Image(...) Column(...) { Text(...) Text(..) } } } place place place place place Drawing Composition Layout 1 measure 2 measure 4 measure 5 measure 6 size 7 measure 8 size 9 size 10 size 3 size
28. @Composable fun SearchResult(...) { Row(...) { Image(...) Column(...) { Text(...) Text(..) } } } SearchResult Row Image Column Text Text 1 measure 2 measure 4 measure 5 measure 6 size 7 measure 8 size 9 size 10 size 3 size place place place place place Drawing Composition Layout Measure Place
29. Modifiers
30. Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) )
31. Box( modifier = Modifier .size(50.dp) .background(Color.Blue) )
32. Box( modifier = Modifier .wrapContentSize(align = Alignment.Center) .size(50.dp) .background(Color.Blue) )
33. Box( modifier = Modifier .wrapContentSize() .size(50.dp) .background(Color.Blue) )
34. Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) )
35. Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) )
36. Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) w: 0–200, h: 0–300
37. Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) measure w: 0–200, h: 0–300
38. Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) measure w: 0–200, h: 0–300 val childConstraints = Constraints( minWidth = outerConstraints.maxWidth, maxWidth = outerConstraints.maxWidth, minHeight = outerConstraints.maxHeight, maxHeight = outerConstraints.maxHeight, )
39. Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) measure w: 0–200, h: 0–300 val childConstraints = Constraints( minWidth = outerConstraints.maxWidth, maxWidth = outerConstraints.maxWidth, minHeight = outerConstraints.maxHeight, maxHeight = outerConstraints.maxHeight, ) w: 200, h: 300
40. measure w: 0–200, h: 0–300 measure w: 200, h: 300 Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) )
41. measure w: 0–200, h: 0–300 measure w: 200, h: 300 Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) val childConstraints = Constraints( minWidth = 0, maxWidth = outerConstraints.maxWidth, minHeight = 0, maxHeight = outerConstraints.maxHeight, )
42. measure w: 0–200, h: 0–300 measure w: 200, h: 300 Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) val childConstraints = Constraints( minWidth = 0, maxWidth = outerConstraints.maxWidth, minHeight = 0, maxHeight = outerConstraints.maxHeight, ) w: 0–200, h: 0–300
43. measure w: 200, h: 300 w: 0–200, h: 0–300 measure measure w: 0–200, h: 0–300 Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) )
44. measure w: 200, h: 300 w: 0–200, h: 0–300 measure measure w: 0–200, h: 0–300 Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) val childConstraints = Constraints( minWidth = 50, maxWidth = 50, minHeight = 50, maxHeight = 50, )
45. measure w: 200, h: 300 w: 0–200, h: 0–300 measure measure w: 0–200, h: 0–300 Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) val childConstraints = Constraints( minWidth = 50, maxWidth = 50, minHeight = 50, maxHeight = 50, ) w: 50, h: 50
46. measure w: 0–200, h: 0–300 measure w: 200, h: 300 w: 0–200, h: 0–300 measure Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) w: 50, h: 50
47. Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) measure w: 0–200, h: 0–300 w: 50, h: 50 measure w: 200, h: 300 w: 0–200, h: 0–300 measure place 50*50
48. place 50*50 measure w: 0–200, h: 0–300 w: 50, h: 50 measure w: 200, h: 300 w: 0–200, h: 0–300 measure place 50*50 Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) )
49. place 50*50 measure w: 0–200, h: 0–300 w: 50, h: 50 place measure w: 200, h: 300 w: 0–200, h: 0–300 measure 50*50 200*300 place Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) )
50. place 50*50 measure w: 0–200, h: 0–300 w: 50, h: 50 place measure w: 200, h: 300 w: 0–200, h: 0–300 measure 50*50 200*300 place Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) )
51. place 50*50 measure w: 0–200, h: 0–300 w: 50, h: 50 place 50*50 measure w: 200, h: 300 w: 0–200, h: 0–300 measure 200*300 place place 200*300 Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) )
52. Modifier order is matter!
54. Advanced features
55. Intrinsic Measurement
56. Single Pass? Need to know all children's sizes before children assign the size. Not Always
57. Column { Text() Text() Text() Text() Text() } Menu the easy way
58. Column { Text() Text() Text() Text() Text() } Menu the easy way
59. Column { Text(Modifier.fillMaxWidth()) Text(Modifier.fillMaxWidth()) Text(Modifier.fillMaxWidth()) Text(Modifier.fillMaxWidth()) Text(Modifier.fillMaxWidth()) } Try to fix that
60. Column(Modifier.width(IntrinsicSize.Max)) { Text(Modifier.fillMaxWidth()) Text(Modifier.fillMaxWidth()) Text(Modifier.fillMaxWidth()) Text(Modifier.fillMaxWidth()) Text(Modifier.fillMaxWidth()) } Use Intrinsic Size
61. Column(Modifier.width(IntrinsicSize.Min)) { Text(Modifier.fillMaxWidth()) Text(Modifier.fillMaxWidth()) Text(Modifier.fillMaxWidth()) Text(Modifier.fillMaxWidth()) Text(Modifier.fillMaxWidth()) } Use Intrinsic Size (Min)
62. ParentData
63. Box(Modifier.size(200.dp, 300.dp)) { Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) }
64. Box(Modifier.size(200.dp, 300.dp)) { Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) }
65. @Composable inline fun Box( modifier: Modifier = Modifier, contentAlignment: Alignment = Alignment.TopStart, propagateMinConstraints: Boolean = false, content: @Composable BoxScope.() -> Unit ) { ... }
66. interface BoxScope { @Stable fun Modifier.align(alignment: Alignment): Modifier @Stable fun Modifier.matchParentSize(): Modifier }
67. Box(Modifier.size(200.dp, 300.dp)) { // this: BoxScope Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) .background(Color.Blue) ) }
68. Box(Modifier.size(200.dp, 300.dp)) { Box( modifier = Modifier .align(Alignment.Center) .size(50.dp) .background(Color.Blue) ) }
69. fun MyCustomLayout( modifier: Modifier = Modifier, content: @Composable () -> Unit ) { Layout( modifier = modifier, content = content ) { measurables: List<Measurable>, constraints: Constraints -> val placeables = measurables.map { measurable -> val parentData = measurable.parentData as? MyParentData val myConstraints = makeConstraints(parentData) measurable.measure(myConstraints) } // TODO report size and place items } }
70. Lazy layouts in Compose
71. LazyColumn LazyRow Lazy grids DONE Option 2
72. class FlowersAdapter(private val onClick: (Flower) -> Unit) : ListAdapter<Flower, FlowersAdapter.FlowerViewHolder>(FlowerDiffCallback) { class FlowerViewHolder(itemView: View, val onClick: (Flower) -> Unit) : RecyclerView.ViewHolder(itemView) { private val flowerTextView: TextView = itemView.findViewById(R.id.flower_text) ... fun bind(flower: Flower) { ... } } override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FlowerViewHolder { ... } override fun onBindViewHolder(holder: FlowerViewHolder, position: Int) { ... } }
73. <androidx.recyclerview.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutManager="LinearLayoutManager"/>
74. <LinearLayout ...> <ImageView android:id="@+id/flower_image" android:layout_width="48dp" android:layout_height="48dp" ... /> <TextView android:id="@+id/flower_text" android:layout_width="wrap_content" android:layout_height="wrap_content" ... /> </LinearLayout>
75. class FlowersListActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val flowersAdapter = FlowersAdapter { flower -> adapterOnClick(flower) } val recyclerView: RecyclerView = findViewById(R.id.recycler_view) recyclerView.adapter = flowersAdapter ... } }
76. @Composable fun FlowerList(flowers: List<Flower>) { LazyColumn { items(flowers) { flower -> FlowerItem(flower) } } } @Composable fun FlowerItem(flower: Flower) { Column { Image(flower.image) Text(flower.name) } }
77. LazyColumn { // LazyListScope block item { Text(header) } items(data) { item -> Item(item) } }
78. LazyColumn { // LazyListScope block item { Text(header) } items(data) { item -> Item(item) } }
79. LazyColumn { // LazyListScope block item { Text(header) } items(data) { item -> Item(item) } }
80. LazyColumn { // LazyListScope block item { Text(header) } itemsIndexed(data) { index, item -> Item(item, index) } } 1 2 3 4
81. LazyRow { items(data) { item -> Item(item) } }
82. LazyRow { items(data) { item -> Item(item) } }
83. LazyRow( modifier = Modifier.padding( start = 24.dp, end = 24.dp ) ) { items(data) { item -> Item(item) } }
84. LazyRow( modifier = Modifier.padding( start = 24.dp, end = 24.dp ) ) { items(data) { item -> Item(item) } }
85. LazyRow { items(data) { item -> Item(item) } }
86. LazyRow( contentPadding = PaddingValues( start = 24.dp, end = 24.dp ) ) { items(data) { item -> Item(item) } }
87. LazyRow { items(data) { item -> Item(item) } }
88. LazyRow { items(data) { item -> Item(item) } }
89. LazyRow( horizontalArrangement = Arrangement.spacedBy(8.dp) ) { items(data) { item -> Item(item) } }
91. LazyColumn( state = rememberLazyListState() ) { items(data) { item -> Item(item) } }
92. val state = rememberLazyListState() LazyColumn( state = state ) { items(data) { item -> Item(item) } }
93. 2. 3. 4. 5. 1. val state = rememberLazyListState() state.firstVisibleItemIndex state.firstVisibleItemScrollOffset
94. val state = rememberLazyListState() val showScrollToTopButton by remember { derivedStateOf { state.firstVisibleItemIndex > 0 } }
95. Common Performance Gotchas in Jetpack Compose val state = rememberLazyListState() val showScrollToTopButton by remember { derivedStateOf { state.firstVisibleItemIndex > 0 } }
96. state.layoutInfo.visibleItemsInfo state.layoutInfo.totalItemsCount state.layoutInfo.visibleItemsInfo .map { it.index }
97. state.layoutInfo.visibleItemsInfo state.layoutInfo.totalItemsCount state.layoutInfo.visibleItemsInfo .map { it.index } 2. 3. 4. 5. 1.
98. val state = rememberLazyListState() ScrollToTopButton( onClick = { } )
99. val state = rememberLazyListState() ScrollToTopButton( onClick = { // suspend function state.scrollToItem( index = 0 ) } )
100. val state = rememberLazyListState() ScrollToTopButton( onClick = { // suspend function state.animateScrollToItem( index = 0 ) } )
101. val state = rememberLazyListState() val coroutineScope = rememberCoroutineScope() ScrollToTopButton( onClick = { coroutineScope.launch { state.animateScrollToItem( index = 0 ) } } )
102. val state = rememberLazyListState() val coroutineScope = rememberCoroutineScope() ScrollToTopButton( onClick = { coroutineScope.launch { state.animateScrollToItem( index = 0 ) } } )
103. Stable in Compose 1.2 Lazy grids
104. LazyHorizontalGrid LazyVerticalGrid
105. LazyVerticalGrid( columns = GridCells.Fixed(2) ) { items(data) { item -> Item(item) } }
106. LazyVerticalGrid( columns = GridCells.Fixed(2) ) { items(data) { item -> Item(item) } }
107. LazyVerticalGrid( columns = GridCells.Fixed(2), verticalArrangement = Arrangement.spacedBy(16.dp), horizontalArrangement = Arrangement.spacedBy(16.dp) ) { items(data) { item -> Item(item) } }
108. LazyVerticalGrid( contentPadding = PaddingValues(...), state = state // LazyGridState, ... ) LazyColumn( contentPadding = PaddingValues(...), state = state // LazyListState, ... )
109. LazyVerticalGrid( state = state // LazyGridState, ... ) state.firstVisibleItemIndex // Int state.layoutInfo // LazyGridLayoutInfo LazyColumn( state = state // LazyListState, ... ) state.firstVisibleItemIndex // Int state.layoutInfo // LazyListLayoutInfo
110. LazyVerticalGrid( state = state // LazyGridState, ... ) state.firstVisibleItemIndex // Int state.layoutInfo // LazyGridLayoutInfo state.scrollToItem(...) state.animateScrollToItem(...) LazyColumn( state = state // LazyListState, ... ) state.firstVisibleItemIndex // Int state.layoutInfo // LazyListLayoutInfo state.scrollToItem(...) state.animateScrollToItem(...)
111. Available width LazyVerticalGrid( columns = GridCells.Fixed(2) ) { ... }
112. LazyVerticalGrid( columns = GridCells.Fixed(2), horizontalArrangement = Arrangements.spacedBy(24.dp) ) { ... } Available width Spacing
113. LazyVerticalGrid( columns = GridCells.Fixed(2), horizontalArrangement = Arrangement.spacedBy(24.dp), verticalArrangement = Arrangement.spacedBy(24.dp) ) { items(plants) { plant -> PlantCard(plant) } }
114. LazyVerticalGrid( columns = GridCells.Fixed(2), horizontalArrangement = Arrangement.spacedBy(24.dp), verticalArrangement = Arrangement.spacedBy(24.dp) ) { items(plants) { plant -> PlantCard(plant) } }
115. LazyVerticalGrid( columns = GridCells.Adaptive(128.dp), horizontalArrangement = Arrangement.spacedBy(24.dp), verticalArrangement = Arrangement.spacedBy(24.dp) ) { items(plants) { plant -> PlantCard(plant) } }
116. LazyVerticalGrid( columns = object : GridCells { ... } )
117. LazyVerticalGrid( columns = object : GridCells { override fun Density.calculateCrossAxisCellSizes( availableSize: Int, spacing: Int ): List<Int> { ... } } )
118. LazyVerticalGrid( columns = object : GridCells { override fun Density.calculateCrossAxisCellSizes( availableSize: Int, spacing: Int ): List<Int> { ... } } )
119. LazyVerticalGrid( columns = object : GridCells { override fun Density.calculateCrossAxisCellSizes( availableSize: Int, spacing: Int ): List<Int> { ... } } )
120. Available width Spacing LazyVerticalGrid( columns = object : GridCells { override fun Density.calculateCrossAxisCellSizes( availableSize: Int, spacing: Int ): List<Int> { ... } } )
121. LazyVerticalGrid( columns = object : GridCells { override fun Density.calculateCrossAxisCellSizes( availableSize: Int, spacing: Int ): List<Int> { val firstColumn = (availableSize - spacing) * 2 / 3 val secondColumn = availableSize - spacing - firstColumn ... } } ) Available width Spacing
122. LazyVerticalGrid( columns = object : GridCells { override fun Density.calculateCrossAxisCellSizes( availableSize: Int, spacing: Int ): List<Int> { val firstColumn = (availableSize - spacing) * 2 / 3 val secondColumn = availableSize - spacing - firstColumn return listOf(firstColumn, secondColumn) } } ) Available width Spacing
123. LazyVerticalGrid( ... ) { item(span = { GridItemSpan(maxLineSpan) }) { CategoryCard(“Fruits”) } ... }
124. maxLineSpan = 3 LazyVerticalGrid( ... ) { item(span = { // LazyGridItemSpanScope: // maxLineSpan GridItemSpan(maxLineSpan) }) { CategoryCard(“Fruits”) } ... }
125. LazyVerticalGrid( ... ) { item(span = { GridItemSpan(maxLineSpan) }) { CategoryCard(“Fruits”) } items(fruitPlants) { plant -> PlantCard(plant) } }
126. Item animations
129. LazyColumn { items(books, key = { it.id }) { Row(Modifier.animateItemPlacement()) { ... } } }
130. LazyColumn { items(books, key = { it.id }) { Row(Modifier.animateItemPlacement( tween(durationMillis = 250) )) { ... } } }
131. LazyColumn { items(books, key = { it.id }) { ... } }
132. To make the most out of your lists Lazy tips
133. Tip #1 Don’t use 0-pixel sized items
136. val childConstraints = Constraints( maxWidth = if (isVertical) constraints.maxWidth else Constraints.Infinity, maxHeight = if (!isVertical) constraints.maxHeight else Constraints.Infinity )
137. val childConstraints = Constraints( maxWidth = if (isVertical) constraints.maxWidth else Constraints.Infinity, maxHeight = if (!isVertical) constraints.maxHeight else Constraints.Infinity )
138. val childConstraints = Constraints( maxWidth = if (isVertical) constraints.maxWidth else Constraints.Infinity, maxHeight = if (!isVertical) constraints.maxHeight else Constraints.Infinity )
139. val childConstraints = Constraints( maxWidth = if (isVertical) constraints.maxWidth else Constraints.Infinity, maxHeight = if (!isVertical) constraints.maxHeight else Constraints.Infinity )
140. @Composable fun Item() { Image( painter = rememberImagePainter( data = imageUrl ), ... ) } DONE
141. @Composable fun Item() { Image( painter = rememberImagePainter( data = imageUrl ), ... ) }
142. @Composable fun Item() { Image( painter = rememberImagePainter( data = imageUrl ), modifier = Modifier.size(30.dp), ... ) }
143. Adobe Stock#243026154
144. Tip #2 Avoid nesting components scrollable in the same direction
145. // Throws IllegalStateException Column( modifier = Modifier.verticalScroll(state) ) { LazyColumn { ... } }
146. <ScrollView android:layout_width="match_parent" android:layout_height="match_parent"> ... <androidx.recyclerview.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="wrap_content" ... /> ... </ScrollView>
147. DONE <ScrollView android:layout_width="match_parent" android:layout_height="match_parent"> ... <androidx.recyclerview.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="wrap_content" ... /> ... </ScrollView>
148. LazyColumn { item { Header() } items(data) { item -> Item(item) } item { Footer() } }
149. LazyColumn { item { Header() } items(data) { item -> Item(item) } item { Footer() } }
150. val scrollState = rememberScrollState() Row( modifier = Modifier.horizontalScroll(scrollState) ) { LazyColumn { ... } }
151. val scrollState = rememberScrollState() Column( modifier = Modifier.verticalScroll(scrollState) ) { LazyColumn( modifier = Modifier.height(200.dp) ) { ... } }
152. Tip #3 Beware of putting multiple elements in one item
153. 0 1 2 3 LazyVerticalGrid( ... ) { items(count) { index -> Item(index) } }
154. 0 3 ? LazyVerticalGrid( ... ) { item { Item(0) } item { Item(1) Item(2) } item { Item(3) } ... }
155. LazyVerticalGrid( ... ) { item { Item(0) } item { Item(1) Item(2) } item { Item(3) } ... } 0 3 1 2
156. LazyVerticalGrid( ... ) { item { Item(0) } item { Item(1) Item(2) } item { Item(3) } ... } 0 3 1 2
157. LazyVerticalGrid( ... ) { item { Item(0) } item { Item(1) Item(2) } item { Item(3) } ... } 3 After a call to: scrollToItem(2)
158. 0 1 2 LazyVerticalGrid( ... ) { item { Item(0) } item { Item(1) Divider() } item { Item(2) } ... }
159. Tip #4 Consider using custom arrangements
160. 0 3 - Footer 1 2
161. LazyColumn( modifier = Modifier.fillMaxHeight(), verticalArrangement = TopWithFooter ) { ... } object TopWithFooter : Arrangement.Vertical { ... } 0 3 - Footer 1 2
162. object TopWithFooter : Arrangement.Vertical { override fun Density.arrange( totalSize: Int, sizes: IntArray, outPositions: IntArray ) { ... } } 0 3 - Footer 1 2
163. object TopWithFooter : Arrangement.Vertical { override fun Density.arrange( totalSize: Int, sizes: IntArray, outPositions: IntArray ) { var y = 0 sizes.forEachIndexed { index, size -> outPositions[index] = y y += size } ... } } 0 3 - Footer 1 2
164. object TopWithFooter : Arrangement.Vertical { override fun Density.arrange( totalSize: Int, sizes: IntArray, outPositions: IntArray ) { var y = 0 sizes.forEachIndexed { index, size -> outPositions[index] = y y += size } if (y < totalSize) { val lastIndex = outPositions.lastIndex outPositions[lastIndex] = totalSize - sizes.last() } } } 0 3 - Footer 1 2
165. Material Design
169. Material Theming Theming
170. import androidx.compose.material3.MaterialTheme @Composable fun MaterialTheme( colorScheme: ColorScheme, typography: Typography, // Updates to Shapes coming soon content: @Composable () -> Unit ) MaterialTheme Material 3
171. Color scheme Theming
172. New to M3
174. primary onPrimary primaryContainer onPrimaryContainer tertiary
175. @Composable fun Message(...) { val avatarBorderColor = if (isUserMe) { MaterialTheme.colorScheme.primary } else { MaterialTheme.colorScheme.tertiary } ... } Jetchat message
176. Dynamic color Theming
177. val dynamic = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S val colorScheme = if (dynamic) { val context = LocalContext.current if (dark) dynamiclightColorScheme(context) else dynamicDarkColorScheme(context) } else { // Use lightColorScheme, darkColorScheme, etc. } Dynamic ColorScheme
178. val dynamic = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S val colorScheme = if (dynamic) { val context = LocalContext.current if (dark) dynamiclightColorScheme(context) else dynamicDarkColorScheme(context) } else { // Use lightColorScheme, darkColorScheme, etc. } Dynamic ColorScheme
179. val dynamic = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S val colorScheme = if (dynamic) { val context = LocalContext.current if (dark) dynamiclightColorScheme(context) else dynamicDarkColorScheme(context) } else { // Use lightColorScheme, darkColorScheme, etc. } Dynamic ColorScheme
181. Typography Theming
182. M3 M2
183. import androidx.compose.material3.Typography class Typography( val displayLarge: TextStyle, val displayMedium: TextStyle, val displaySmall: TextStyle, // headlineLarge, titleMedium, bodySmall, etc. ) Typography
184. labelSmall titleMedium bodyLarge
185. Resources • Deep dive into Compose Layouts: https://youtu.be/zMKMwh9gZuI • Lazy layouts in Compose: https://youtu.be/1ANt65eoNhQ • Material You using Jetpack Compose: https://youtu.be/jrfuHyMlehc • Compose layout codelab: d.android.com/codelabs/jetpack-compose-layouts
186. Thank you! Ahmad Arif Faizin Curriculum Developer at Dicoding Indonesia @arif_faizin