Kotlin jetpack compose, Divider before my first item with LazyColumn and Surface

Question

i'am new to jetpack compose and i really liked it. But ran into a problem : I want to create a card and inside of it, i would like to display a list of item with divider between them. I was almost able to achieved it :

And here is my code :

Box(modifier = Modifier.background(Color(0xFFf4f4f4))
    .fillMaxSize()
    .padding(top = 20.dp)) {
    Card(
        modifier = Modifier
            .fillMaxWidth(),
        shape = RoundedCornerShape(20.dp),
        elevation = 5.dp
    ) {
        val colorNamesList = listOf("Red", "Green", "Blue", "Indigo")
        LazyColumn() {
            itemsIndexed(colorNamesList) { index, item ->
                Surface(modifier = Modifier.clickable { println(item) }, color = Color(0xFFf2f2f2)) {
                    println(item + index)
                    Text("Item at  $item", modifier = Modifier.height(50.dp).align(Alignment.Center).padding(top = 15.dp), color = Color.Black)
                        Divider(color = Color.Black.copy(alpha = 0.2f), modifier = Modifier.padding(horizontal = 80.dp))
                }
            }
        }
    }
}

The problem is that i dont know why but i got a divider on the top of my card before my first item, i searched a lot and tried few things but i couldn't find how to remove it.

i want divider between my items, meaning i just want to remove the one on top of my card before the first item — XCarb, Jun 08 '22 at 11:02

Abhimanyu · Accepted Answer · 2022-06-08T11:22:14.700

Changed Surface to Column and added a condition to show Divider only in between items.

@Composable
fun DividerCard() {
    Box(
        modifier = Modifier
            .background(Color(0xFFf4f4f4))
            .fillMaxSize()
            .padding(top = 20.dp),
    ) {
        Card(
            modifier = Modifier
                .fillMaxWidth(),
            shape = RoundedCornerShape(20.dp),
            elevation = 5.dp,
        ) {
            val colorNamesList = listOf("Red", "Green", "Blue", "Indigo")
            LazyColumn {
                itemsIndexed(
                    colorNamesList,
                ) { index, item ->
                    Column(
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = Alignment.CenterHorizontally,
                        modifier = Modifier
                            .background(
                                color = Color(0xFFf2f2f2),
                            )
                            .clickable {
                                println(item)
                            },
                    ) {
                        println(item + index)
                        Text(
                            text = "Item at  $item",
                            modifier = Modifier
                                .fillMaxWidth()
                                .height(50.dp)
                                .padding(top = 15.dp),
                            textAlign = TextAlign.Center,
                            color = Color.Black,
                        )
                        if (index < colorNamesList.lastIndex) {
                            Divider(
                                color = Color.Black.copy(alpha = 0.2f),
                                modifier = Modifier
                                    .padding(horizontal = 80.dp),
                            )
                        }
                    }
                }
            }
        }
    }
}

Thanks it worked, do you know why surface didn't work ? Also do you have a solution for clean align text ? i added some description to my question, i used padding to center because i couldn't find a way to do it. — XCarb, Jun 08 '22 at 12:06
Because in the Column verticalArrangement and horizontalAlignment doesn't seem to change the text alignement — XCarb, Jun 08 '22 at 12:15
You can see here, that I have used `textAlign = TextAlign.Center,` for aligning `Text` horizontally. — Abhimanyu, Jun 08 '22 at 12:34
Kindly, create new StackOverflow questions for follow-up questions. Please don't edit the question. — Abhimanyu, Jun 08 '22 at 12:35
yes i used that but it's only align horizontally, the text is still on the top of his line. i was able to take it seem like it's center by using padding top but i would like to know if there is a cleaner way to do it ? — XCarb, Jun 08 '22 at 12:37
I am not able to get your issue. If you could create a new question with your updated code and describe the issue, it would be much easier to debug. — Abhimanyu, Jun 08 '22 at 12:42
Here is the new question if you can help me : https://stackoverflow.com/questions/72546187/kotlin-jetpack-compose-center-text-in-column-inside-a-lazycolum — XCarb, Jun 08 '22 at 13:03

Kotlin jetpack compose, Divider before my first item with LazyColumn and Surface

1 Answers1