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?

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

Thanks Nick 🙂

@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?

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

Yea, an annotation similar to

@CheckResult

for lambda params that would warn if you don't use them could be helpful here.

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

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.

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

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 :-)