Compose implementation of the scroll bar. Can drag, scroll smoothly and includes animations.
- 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
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'
}
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)
)
}
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
)
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)
)
}
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)
)
}
}
}
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
)
Copyright © 2022, nani, Released under MIT License