Hey everyone, I'm having issues with my vertical s...

# compose

[Yamila Gammeri]

Hey everyone, I'm having issues with my vertical scroll while using a scaffold. Some of the items on my screen are going behind my tab bar. Was wondering what is the best practice to prevent that?

[nickbutcher]

Are you applying the InnerPadding that Scaffold passes to bodyContent? Like this https://github.com/android/compose-samples/blob/master/JetNews/app/src/main/java/com/example/jetnews/ui/home/HomeScreen.kt#L99

[Yamila Gammeri]

Thanks Nick 🙂

[Zach Klippenstein (he/him) [MOD]]

@nickbutcher This question seems to come up regularly here, the API is unusual and seems pretty confusing to a lot of people. Why can't the scaffold composable just measure the body with the correct size by default?

[nickbutcher]

@matvei

[matvei]

That's a wonderful question 🙂
the reason is that when you have cutout in bottom bar or it's semitrasparent or it's hiding on scroll (not yet implemented), you want to allow content to scroll behind bottomAppBar. So the scrolling occur there, but content will be padded at the end so you can see everything and bottom app bar doesn't obscure content. Usually content is scrollable, so that's pretty important to get right. Same would be true for top app bar when we will be able to hide it on scroll

Now, I agree that this is a problem and I have this in backlog to figure out smth better than slot param, but also what I think is important is to teach people that sometimes you have to expect certain things to be passed as parameters in your @Composable slot and that's totally legit usecase.

One of the solutions to this might be tooling, which will prevent you from using it and hiding lambda param for you. Instead, it might say to you that you have a param, so it will be easier to notice.

The other solution I had in mind and even prototyped is to have LazyItems / scroller inside Scaffold. It makes all these kinds of problems disappear, but it scales poorly for now, unfortunatelly

[Zach Klippenstein (he/him) [MOD]]

Yea, an annotation similar to @CheckResult for lambda params that would warn if you don't use them could be helpful here.

[matvei]

Yep, that might be good enough probably, I need to make this happen and see if this confusion continues

[Zach Klippenstein (he/him) [MOD]]

Could Scaffold also be smarter about this though, If it knows it's not going to hide bits of itself, and they're not translucent? Although I guess there's no way to determine if the app bars are fully opaque or not.

[matvei]

It's tricky imo. This could work and, frankly speaking, translucent bars are quite rare. But the issue here it that it might be dangerous or even more confusing to change behaviour based or params. Like ,when you have no cutout, you don't need to apply this innerpadding, and when you decide to add cutoff, you need to change other parts as well (pass innerPadding). This might lead to even more problems. So there're tradeoffs to be made.

Ideally, I would like to just handle this automatically all the time regardless of hiding, cutouts or translucency and avoid this innerPadding param 🙂 But for now it appears very hard to solve without loosing scalability and composability of scaffold slots

[matvei]

Also there's a smaller, but even more confusing requirement to add this padding not to scroller, but to direct child of the Scroller. This will be solved with ScrollableColumn(innerPadding = innerPadding) which will land soon

https://android-review.googlesource.com/c/platform/frameworks/support/+/1355660/8/ui/ui-material/samples/src/main/java/androidx/ui/material/samples/ScaffoldSamples.kt

[Timo Drick]

Just see here one use case of scaffold with cutouts and also with translucent app bars:
Interestingly is that i do apply the padding. But the VerticalList is drawing over the bounds. But still the first element in list is correctly aligned. So for me a little bit magic :-)

device-2020-07-11-100551.webm