How to do Multiline chip group in Jetpack Compose?

user_13032644 0
Viewed 2530

How to get a layout like this in Jetpack compose?

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.

android-jetpack-compose kotlin android
1 Answers

Update. Now you can use Accompanist FlowRow:

FlowRow(
    modifier = modifier,
    mainAxisSpacing = 16.dp,
    crossAxisSpacing = 16.dp,
) {
    items.forEach { it ->
        CustomChip(
            item = it,
            isSelected = it == currentItem,
            onItemChanged = {
                onItemChanged(it)
            }
        )
    }
}

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 = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    .split(" ")
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:

user_35857960
Related