androidkotlinandroid-jetpack-compose

How to do Multiline chip group in Jetpack Compose?


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.


Solution

  • 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: