LazyColumn && Column scrollbar for jetpack compose

Compose implementation of the scroll bar. Can drag, scroll smoothly and includes animations.

Features:

• Supports LazyColumn, LazyVerticalGrid & Column
• Support sticky headers
• Support reverseLayout
• Optional current position indicator
• Multiple selection states (Disabled, Full, Thumb)
• Multiple selection actionable states (Always, WhenVisible)
• Customizable look
• Easy integration with other composables
• UI tests

Installation

Add it in your root build.gradle at the end of repositories:

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

Add it to your app build.gradle

dependencies {
        implementation 'com.github.nanihadesuka:LazyColumnScrollbar:1.9.0'
}

How to use for LazyColumn

Simply wrap the LazyColumn with it

val listData = (0..1000).toList()
val listState = rememberLazyListState()

LazyColumnScrollbar(listState) {
    LazyColumn(state = listState) {
        items(listData) {
            Text(
                text = "Item $it",
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(6.dp)
            )
        }
    }
}

indicatorContent example:

indicatorContent = { index, isThumbSelected ->
    Text(
        text = "i: $index",
        Modifier
            .padding(4.dp)
            .background(if (isThumbSelected) Color.Red else Color.Black, CircleShape)
            .padding(12.dp)
    )
}

LazyColumnScrollbar arguments

fun LazyColumnScrollbar(
    listState: LazyListState,
    rightSide: Boolean = true,
    alwaysShowScrollBar: Boolean = false,
    thickness: Dp = 6.dp,
    padding: Dp = 8.dp,
    thumbMinHeight: Float = 0.1f,
    thumbColor: Color = Color(0xFF2A59B6),
    thumbSelectedColor: Color = Color(0xFF5281CA),
    thumbShape: Shape = CircleShape,
    selectionMode: ScrollbarSelectionMode = ScrollbarSelectionMode.Thumb,
    selectionActionable: ScrollbarSelectionActionable = ScrollbarSelectionActionable.Always,
    hideDelayMillis: Int = 400,
    enabled: Boolean = true,
    indicatorContent: (@Composable (index: Int, isThumbSelected: Boolean) -> Unit)? = null,
    content: @Composable () -> Unit
)

How to use for LazyVerticalGrid

Simply wrap the LazyVerticalGrid with it

val listData = (0..1000).toList()
val lazyGridState = rememberLazyGridState()

LazyGridVerticalScrollbar(lazyGridState) {
    LazyVerticalGrid(state = lazyGridState) {
        items(listData) {
            Text(
                text = "Item $it",
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(6.dp)
            )
        }
    }
}

indicatorContent example:

indicatorContent = { index, isThumbSelected ->
    Text(
        text = "i: $index",
        Modifier
            .padding(4.dp)
            .background(if (isThumbSelected) Color.Red else Color.Black, CircleShape)
            .padding(12.dp)
    )
}

How to use for Column

Simply wrap the LazyColumn with it

val listData = (0..1000).toList()
val listState = rememberLazyListState()

ColumnScrollbar(listState) {
    Column(
        modifier = Modifier.verticalScroll(listState)
    ) {
        for (it in listData) {
            Text(
                text = "Item $it",
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp)
            )
        }
    }
}

ColumnScrollbar arguments

fun ColumnScrollbar(
    state: ScrollState,
    rightSide: Boolean = true,
    alwaysShowScrollBar: Boolean = false,
    thickness: Dp = 6.dp,
    padding: Dp = 8.dp,
    thumbMinHeight: Float = 0.1f,
    thumbColor: Color = Color(0xFF2A59B6),
    thumbSelectedColor: Color = Color(0xFF5281CA),
    thumbShape: Shape = CircleShape,
    enabled: Boolean = true,
    selectionMode: ScrollbarSelectionMode = ScrollbarSelectionMode.Thumb,
    selectionActionable: ScrollbarSelectionActionable = ScrollbarSelectionActionable.Always,
    hideDelayMillis: Int = 400,
    indicatorContent: (@Composable (normalizedOffset: Float, isThumbSelected: Boolean) -> Unit)? = null,
    content: @Composable () -> Unit
)

License

Copyright © 2022, nani, Released under MIT License