Advanced Sticky Headers

Compose Multiplatform library for adding advanced sticky headers to lazy lists and grids.

Preview

Getting started

implementation("me.gingerninja.lazy:sticky-headers:0.1.0-alpha04")

Setup for multiplatform projects

If you target a subset of the library supported platforms, add the library to your common source set:

kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("me.gingerninja.lazy:sticky-headers:0.1.0-alpha04")
            // ...
        }
    }
    // ...
}

If you have targets that are not supported by the library, add the library separately to each supported target:

kotlin {
    val desktopMain by getting {
        dependencies {
            implementation("me.gingerninja.lazy:sticky-headers:0.1.0-alpha04")
            // ...
        }
    }
    androidMain.dependencies {
        implementation("me.gingerninja.lazy:sticky-headers:0.1.0-alpha04")
        // ...
    }
    // other targets...
}

Usage

StickyHeaders(
    state = listState, // from rememberLazyListState()
    key = {
        // sample keys: every 2 items will be grouped
        it.index / 2
    }
) { key ->
    Text("Key: $key")
}

The StickyHeaders is a container that holds the sticky items. This can be placed anywhere, such as in a Box overlaying the list items or in a Row / Column to align next to / over / under the list.

⚠️ It is important to set the list state on both the StickyHeaders and the LazyColumn / LazyRow.

Example: usage with a LazyColumn in a Row

val listState = rememberLazyListState()

Row {
    StickyHeaders(
        state = listState,
        key = {
            it.index / 2
        },
    ) {
        Text("Key: ${it.key}")
    }

    LazyColumn(
        modifier = Modifier.weight(1f),
        state = listState,
    ) {
        items(count = 100) {
            Card {
                Text("Item $it", modifier = Modifier.padding(20.dp))
            }
        }
    }
}

See the demo app for more elaborate samples.

Known issues

• missing overscroll effect: #1

License

Copyright 2024 Gergely Kőrössy

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.