• Stars
    star
    161
  • Rank 233,470 (Top 5 %)
  • Language
    Kotlin
  • License
    MIT License
  • Created over 3 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Android Jetpack Compose LazyColumn scrollbar implementation

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.10.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