I am building an app fully compose and used LazyColum + StickyHeader to display the elements I need to. However, the stickyHeader is not moving at the same pace. It stays on screen untli the next header arrives. I put a link to the video below:

I used the code below to do it:

   Column(modifier
        .padding(horizontal = 36.dp)) {
        LazyColumn(modifier
            .padding(top = 36.dp)) {
            list.forEach { category ->
                stickyHeader {
                    CategoryHeader(title = category.type)
                }
                items(category.transactions) { transaction ->
                    ItemRow(navController, transaction)
                }
            }
        }
    }

Any idea how to make sure that the header is scrolling when the items are scrolling >

I am building an app fully compose and used LazyColum + StickyHeader to display the elements I need to. However, the stickyHeader is not moving at the same pace. It stays on screen untli the next header arrives. I put a link to the video below:

https://photos.app.goo.gl/LbWTrSwfRQVze9ce7

I used the code below to do it:

   Column(modifier
        .padding(horizontal = 36.dp)) {
        LazyColumn(modifier
            .padding(top = 36.dp)) {
            list.forEach { category ->
                stickyHeader {
                    CategoryHeader(title = category.type)
                }
                items(category.transactions) { transaction ->
                    ItemRow(navController, transaction)
                }
            }
        }
    }

Any idea how to make sure that the header is scrolling when the items are scrolling >

• android
• kotlin
• android-jetpack-compose
• android-jetpack

• 1 That is the 'sticky' part of sticky headers, yes. If you don't want the sticky part, why are you using stickyHeader and not just using item? – ianhanniballake Commented Jan 29 at 19:24
• @ianhanniballake because I didn't know we can use item. Thanks – Seb Commented Jan 30 at 0:09

2 Answers 2

The sticky header behavior is working as expected. Try putting the header inside the items function and try again.

items(...) {
    Column {
        CategoryHeader(...)
        ItemRow(...)
    }
}

As pointed out by @ianhanniballake, you can use the item() extension function of LazyListScope if you want to add one specific Compsable to the LazyColumn:

LazyColumn(
    modifier.padding(top = 36.dp)
) {
    list.forEach { category ->
        item {
            CategoryHeader(title = category.type)
        }
        items(category.transactions) { transaction ->
            ItemRow(navController, transaction)
        }
    }
}

The stickyHeader is meant to stick to the top of the LazyColumn until the next stickyHeader appears.