A brief tutorial on easy methods to use FlowLayout in Jetpack Compose
In Exyte, we attempt to contribute to the open supply engineering neighborhood by sharing our information and experience. We usually write tutorials and launch libraries to assist different builders enhance their expertise and create higher software program. We increase our information base with up-to-date traits and applied sciences in software program growth, similar to SwiftUI And Jetpack Compose.
Our newest tutorial is on Android FlowLayout the place we present easy methods to create versatile layouts to show views in a flow-like method.
In case you’ve been updated with the most recent updates in Jetpack Compose, you might have heard of the brand new function. FlowRow And FlowColumn synthesizers had been lately added to Jetpack Compose 1.4.1. In fact, it has been revealed in Chaperone for some time (a gaggle of libraries designed to complement Jetpack Compose with options which are generally requested by builders however aren’t obtainable but). However now they’re obtainable within the base framework and it is nice to see what they can be utilized for.
An important thought on this format is that we will lay out gadgets in a container when the scale of the gadgets or the container is unknown or dynamic. For instance, right here we’ve chips (playing cards) which we place in random order. The “Plant Meals” chip doesn’t match and strikes on to the subsequent line.
FlowRow {
chipsInRow.forEach {
Chip(textual content = it.textual content, pointColor = it.pointColor)
}
}
For a FlowColumnit’d appear to be this:
FlowColumn {
cardsInColumn.forEach { cardData ->
Card(cardData)
}
}
Check out the API:
horizontalArrangement helps to rearrange the weather horizontally in a sure order.
verticalAlignment helps to align parts if they’ve completely different heights (though this isn’t a typical case).
maxItemsInEachRow signifies the utmost variety of parts we will put in a row. That is very handy to make use of together with weight adjustment instruments.
enjoyable FlowRow(
modifier: Modifier = Modifier,
horizontalArrangement: Association.Horizontal = Association.Begin,
verticalAlignment: Alignment.Vertical = Alignment.Prime,
maxItemsInEachRow: Int = Int.MAX_VALUE,
content material: @Composable RowScope.() -> Unit
)
Give FlowColumn the parameters work the identical means, aside from vertical rotation.
verticalAlignment offering 3 completely different choices is apparent:
horizontalArrangementhowever, there are extra choices with some not so apparent:
The excellence between SpaceEvenly And SpaceAround is probably not clear. The principle distinction is SpaceEvenlybecause the title implies, offers even spacing, together with main and trailing margins. SpaceAround works the identical means, however the margins will take up half the area of the area between the weather inside. Alternatively, you need to use an absolute worth to maintain the look fixed when selecting an RTL (Proper to Left) format: Association.Absolute
If you wish to add spacing between parts, you need to use this assemble:
Association.spacedBy(5.dp, Alignment.CenterHorizontally)
maxItemsInEachRow can be utilized together with weight modifiers to create one thing like this:
All nodes have weight set to 1 besides node zero whose weight is ready to 2.
FlowRow(maxItemsInEachRow = 4) {
buttons.forEach {
FlowButton(
modifier = Modifier
.aspectRatio(1 * it.weight)
.clip(CircleShape)
.background(it.coloration)
.weight(it.weight),
textual content = it.textual content,
textColor = it.textColor,
)
}
}
As you’ll be able to see, for easy examples, FlowRow And FlowColumn composables are straightforward to make use of – they’re a robust and versatile format engine for dynamic or indeterminate sizes. This makes them particularly helpful for dynamic and responsive interfaces that adapt to completely different display sizes and orientations. We anticipate the examples above to cowl most developer wants, however we nonetheless wished to create a extra complicated instance utilizing these new layouts and attainable animation transitions. happens throughout including, eradicating, or repositioning parts. So keep tuned for the subsequent article on Movement Format! Within the meantime, you’ll be able to try our different articles on Android growth: copy dribble or Directions for composing Androidview&Jetpack.