So, I've created a Chip composable and using it in a LazyRow like this:
LazyRow(
modifier = modifier,
horizontalArrangement = Arrangement.spacedBy(16.dp),
){
items.forEach { it ->
item {
CustomChip(
item = it,
isSelected = it == currentItem,
onItemChanged = {
onItemChanged(it)
}
)
}
}
}
But, I want to attain a layout like the above mentioned image. I.e, If number of chips reaches end of screen, then the new chips should come in new line.
Update. Now you can use system FlowRow
:
val words = LoremIpsum(10).values.first()
.split(" ", "\n")
FlowRow(
horizontalArrangement = Arrangement.spacedBy(7.dp),
verticalArrangement = Arrangement.spacedBy(7.dp),
modifier = Modifier
.padding(7.dp)
) {
words.forEach { word ->
Text(
word,
modifier = Modifier
.background(color = Color.Gray, shape = CircleShape)
.padding(vertical = 3.dp, horizontal = 5.dp)
)
}
}
Original answer. If you are interested in building something like this yourself, you can do it with Layout
:
@Composable
fun ChipVerticalGrid(
modifier: Modifier = Modifier,
spacing: Dp,
content: @Composable () -> Unit
) {
Layout(
content = content,
modifier = modifier
) { measurables, constraints ->
var currentRow = 0
var currentOrigin = IntOffset.Zero
val spacingValue = spacing.toPx().toInt()
val placeables = measurables.map { measurable ->
val placeable = measurable.measure(constraints)
if (currentOrigin.x > 0f && currentOrigin.x + placeable.width > constraints.maxWidth) {
currentRow += 1
currentOrigin = currentOrigin.copy(x = 0, y = currentOrigin.y + placeable.height + spacingValue)
}
placeable to currentOrigin.also {
currentOrigin = it.copy(x = it.x + placeable.width + spacingValue)
}
}
layout(
width = constraints.maxWidth,
height = placeables.lastOrNull()?.run { first.height + second.y } ?: 0
) {
placeables.forEach {
val (placeable, origin) = it
placeable.place(origin.x, origin.y)
}
}
}
}
Usage:
val words = LoremIpsum(10).values.first()
.split(" ", "\n")
ChipVerticalGrid(
spacing = 7.dp,
modifier = Modifier
.padding(7.dp)
) {
words.forEach { word ->
Text(
word,
modifier = Modifier
.background(color = Color.Gray, shape = CircleShape)
.padding(vertical = 3.dp, horizontal = 5.dp)
)
}
}
Result: