Is there a way add a visible scrollbar to a `Column` so the user can know instantly that he can scro...

# compose

[Pablo]

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:

val scrollState = rememberScrollState() 
Column( modifier = Modifier.verticalScroll(scrollState)) {
    repeat(100) { Text(text = stringResource(R.string.help)) }
}

[Alex Styl]

what do you mean by always visible? there is no scrollbar support afaik

[Stylianos Gakis]

I don't see a scroll bar in the provided code 👀

[Pablo]

This enables the scrollbar: Modifier.verticalScroll(scrollState)
I mean that the right scrollbar on a column becomes visible always

[Stylianos Gakis]

Are you on desktop?

[Pablo]

no, android

[Stylianos Gakis]

And you see a scroll bar with that code? Are you sure?

[Pablo]

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

[Pablo]

stylianos, it is the only code I found that makes the column scrollable

[Stylianos Gakis]

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.

[Stylianos Gakis]

Can you send a video of that scroll bar you're talking about?

[Pablo]

there is no visible scrollbar

[Pablo]

the content is scrollable if you add that line to a column

[Pablo]

but the scrolbar is not visible

[Pablo]

in the video you will not see any scrollbar

[Pablo]

I'm trying to find how to achieve that, how to present the scrolbar visible to the user on a Column

[Pablo]

In views it was done with this:
android:fadeScrollbars="false" in xml which is equivalent to ScrollView.setScrollbarFadingEnabled(false);

[Stylianos Gakis]

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?

[Pablo]

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

[Stylianos Gakis]

Yeah, as Alex said, this is not supported on Android compose out of the box atm

[Stylianos Gakis]

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.

[Pablo]

oh, it's strange they have not added it, compose is here for some years now

[Pablo]

thank you for offering me that good library

[Pablo]

I prefeer to try using system provided components if possible

[Pablo]

but I'll consider it

[Stylianos Gakis]

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 🤷

[Pablo]

yes, it's supposedly this: "androidx.compose.foundation.VerticalScrollbar"

[Stylianos Gakis]

For anyone else also curious, code seems to be here https://github.com/JetBrains/compose-multiplatform-core/blob/69272f3d00e4def144a8e[…]skikoMain/kotlin/androidx/compose/foundation/Scrollbar.skiko.kt

[Alex Styl]

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.