Add separator in LazyColum in jetpack compose

Question

I am learning LazyColum in jetpack compose. I want to add Separator in my each item in some condition, please have a look on below MessageList() function. Also I'll add a screenshot to clearly understand what I want. Please make a function reusable. Condions are as follow:-

1. Top and Bottom Separator.

2 Without separator in both Top and Bottom

But problem is that I don't know in idiomatic way in jetpack compose. I did this in Xml using Recyclerview.

import androidx.compose.foundation.lazy.items

@Composable
fun MessageList(messages: List<Message>) {
    LazyColumn {
        items(messages) { message ->
            MessageRow(message)
        }
    }
}

Can you guys help me on this? Many Thanks

Check also https://stackoverflow.com/questions/67139925/how-to-add-dividers-between-items-in-a-lazycolumn-jetpack-compose/67140450#67140450 — Gabriele Mariotti, Nov 24 '22 at 09:03

Stephan · Answer 1 · 2022-11-24T08:52:27.390

1

Just make it part of your item

LazyColumn {

    items(messages) { message ->
        MessageRow(message)
        Box(Modifier.fillMaxWidth().height(1.dp).background(Color.Red)) //for after every element
    }
}

If you want to add it only on the top/bottom of the list you can use item:

LazyColumn {
    item { Box(Modifier.fillMaxWidth().height(1.dp).background(Color.Red)) }
    items(messages) { message ->
        MessageRow(message)
    }
}

To make it conditional use itemsIndexed

LazyColumn {
    itemsIndexed(messages) { index, message ->
        if(index == 0) {
        //First element, either show divider or don't
        }
        ....
        MessageRow(message)
        ....
        if (index == messages.size) {
        // last item, show divider or don't
        }
    }
}

edited Nov 24 '22 at 08:52

answered Nov 24 '22 at 08:34

Stephan

15,704
7
48
63

I really appreciate your help. But I need the logic to work on each item. I want a function to reusable. I don't think 2nd option is fit on my conditon. Thanks – Kotlin Learner Nov 24 '22 at 08:37
Then you can use `itemsIndexed` and add the logic accordingly. I added an example which explains how to use it. – Stephan Nov 24 '22 at 08:48
Your 3rd option solve my 2nd problem, but how can I solve my 1st problem? – Kotlin Learner Nov 24 '22 at 09:03

score 0 · Answer 2 · answered Nov 24 '22 at 08:37

You just have to add Divider composable to your MessageRow :

@Composable
fun MessageRow(message:Message){
    Column(){
        Divider(Modifier.fillMaxWidth(), thickness = 1.dp, color = Color.LightGray) //above your row
        Row(Modifier.fillMaxWidth){
            
        }
    }
}

score 0 · Answer 3 · answered Nov 24 '22 at 09:56

I solve like this to show border or hide border.

package com.abc.app.common.composables

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.material.Divider
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.tooling.preview.Preview
import com.abc.app.R
import com.abc.app.theme.Cloudy
import com.abc.app.theme.AbcTheme
import com.abc.app.theme.Red

@Composable
fun <T : Any> LazyListScopeColumn(
    itemList: List<T>,
    content: @Composable (T: Any) -> Unit,
    dividerColor: Color = Cloudy,
    dividerThickness: Int = R.dimen.separator_height_width,
    showDivider: Boolean = true,
) {
    LazyColumn(modifier = Modifier.fillMaxWidth()) {
        itemsIndexed(itemList) { index, item ->
            if (index == 0 && showDivider) {
                Divider(color = dividerColor, thickness = dimensionResource(dividerThickness))
            }
            content(item)
            if (index <= itemList.lastIndex && showDivider) {
                Divider(color = dividerColor, thickness = dimensionResource(dividerThickness))
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun LazyColumnListScopePreview() {
    AbcTheme {
        Column {
            Spacer(modifier = Modifier.height(10.dp)
            LazyListScopeColumn(
                listOf("item 1", "item 2"),
                content = { item ->
                    Text(
                        text = "$item",
                        modifier = Modifier.padding(vertical = 10.dp)
                    )
                },
                dividerColor = Red,
            )
            Spacer(modifier = Modifier.height(10.dp))
        }
    }
}

@Preview(showBackground = true)
@Composable
fun LazyColumnListScopePreviewNoBorder() {
    AbcTheme {
        Column {
            Spacer(modifier = Modifier.height(10.dp)
            LazyListScopeColumn(
                listOf("item 1", "item 2"),
                content = { item ->
                    Text(
                        text = "$item",
                        modifier = modifier = Modifier.padding(vertical = 10.dp))
                },
                dividerColor = Red,
                showDivider = false,
            )
            Spacer(modifier = Modifier.height(10.dp))
        }
    }
}

Add separator in LazyColum in jetpack compose

3 Answers3