Is there a way add a visible scrollbar to a `Colum...
# compose
p
Is there a way add a visible scrollbar to a
Column
so the user can know instantly that he can scroll the content? This is the normal code for make a
Column
scrollable, but the scrollbar is not visible, but I can't find in the docs how to make it visible:
Copy code
val scrollState = rememberScrollState() 
Column( modifier = Modifier.verticalScroll(scrollState)) {
    repeat(100) { Text(text = stringResource(R.string.help)) }
}
a
what do you mean by always visible? there is no scrollbar support afaik
s
I don't see a scroll bar in the provided code 👀
p
This enables the scrollbar:
Modifier.verticalScroll(scrollState)
I mean that the right scrollbar on a column becomes visible always
s
Are you on desktop?
p
no, android
s
And you see a scroll bar with that code? Are you sure?
p
in some device heights, the next line of content is exactly below the bottom of the column, and as the scrollbar is not visible, the user doesn't notice he can scroll it
stylianos, it is the only code I found that makes the column scrollable
s
Am I going crazy here, or does one of the new compose versions add scroll bars support? Just making a column scrollable doesn't make it also add a scroll bar in compose by default afaik.
Can you send a video of that scroll bar you're talking about?
p
there is no visible scrollbar
the content is scrollable if you add that line to a column
but the scrolbar is not visible
in the video you will not see any scrollbar
I'm trying to find how to achieve that, how to present the scrolbar visible to the user on a Column
In views it was done with this:
android:fadeScrollbars="false"
in xml which is equivalent to
ScrollView.setScrollbarFadingEnabled(false);
s
So when you say "always visible" you don't mean that it's only sometimes visible, you mean that it's never there to begin with, even if you scroll a bit, correct?
p
exactly, sorry, but in views it was visible when you move it, and I forgot that here is not visible even when you move it
s
Yeah, as Alex said, this is not supported on Android compose out of the box atm
You can try a library he wrote https://composeunstyled.com/scrollarea/ , try to find any other library which does the same, write it all yourself or go back to using views. Those are your 4 options afaik.
👀 1
🫶 1
p
oh, it's strange they have not added it, compose is here for some years now
thank you for offering me that good library
I prefeer to try using system provided components if possible
but I'll consider it
s
Well in this case there isn't one, so it's up to you. You can also go into the jetbrains compose for desktop code and try to copy their code, if you want to do it yourself. They have a scroll bar implementation in compose for desktop. It should be transferable to android with some work probably 🤷
p
yes, it's supposedly this: "androidx.compose.foundation.VerticalScrollbar"
👍 1
a
Compose Unstyled does use the Jetbrains one internally. I changed the public api so that you can use it on mobile and have overscroll (bouncy) effects, and ofc style it You can of course do this work on your own (copy paste all the files from the link Stylianos shared) but iirc it looks a bit off on Android/iOS as the effect is not there.
👍 1