https://kotlinlang.org logo
#compose
Title
# compose
r

Rooparsh

05/02/2020, 2:04 PM
Hi, just a newbie to Compose. Trying to show a list of data with bottom app bar. I have used scaffold as a parent with AdapterList as body content and bottomappbar. The problem is my AdapterList is being overlapped with bottomappbar and I can't seem to find any way around it. I am using dev09 . I know its childish mistake.
k

Kazemihabib1996

05/02/2020, 2:25 PM
Please, share your code.
r

Rooparsh

05/02/2020, 2:28 PM
@Kazemihabib1996 please find my code sample attached.
@Kazemihabib1996 Also attaching a screenshot for reference. Also found out that the list is not scrolable
k

Kazemihabib1996

05/02/2020, 2:57 PM
It seems to be a bug, you can add some padding to the you content untill compose fix this problem: `Column(modifier = Modifier.padding(start = 20.dp, end = 20.dp, bottom = 56.dp)) {1
And I think your list not scrolls because you don't have enough items in your list to make it scrollable, try adding some items, I think that would fix it
r

Rooparsh

05/02/2020, 3:47 PM
@Kazemihabib1996 currently I have 50 items in the list
k

Kazemihabib1996

05/02/2020, 3:47 PM
about the content I was wrong
I read the source of Scaffold, it works like this it calculates the
BottomAppBar
size and calls the body content with a
modifier.padding(bottom = ..)
so the correct way is to do it like this: bodyContent = { modifier -> Content(modifier, list = ... }) },
and
Copy code
fun Content(modifier: Modifier, list: List<String>?) {
    Column(modifier = modifier.padding(start = 20.dp, end = 20.dp)) {
s

SaurabhS

05/02/2020, 3:51 PM
AdapterList not scrolling is a bug in recent versions. It's fixed in the latest snapshots.
r

Rooparsh

05/02/2020, 3:54 PM
@Kazemihabib1996 Thanks. It works and also this makes the list scrollable.
👍 1
k

Kazemihabib1996

05/02/2020, 3:58 PM
It was in the documentation and it's weird I've never read that before 🙂 * @param bodyContent content of your screen. The lambda receives a Modifier that should be * applied to the content root to get the desired behavior. If you're using VerticalScroller, * apply this modifier to the child of the scroller, and not on the scroller itself.
👍 1
r

Rooparsh

05/02/2020, 4:01 PM
Even I missed that
l

Leland Richardson [G]

05/02/2020, 9:12 PM
yep. That modifier is passed through precisely because this bug will happen if you don’t… we aren’t exactly happy with this solution, but have been struggling to find a better way. My fear is that most people will do exactly what you did and completely miss the fact that a parameter is passed in here.
👍 1
k

Kazemihabib1996

05/03/2020, 8:23 AM
@Leland Richardson [G] would you mind explain it a little more why you can't be apply that modifier inside the Scaffold? I mean what are the challenges of that approach?
l

Leland Richardson [G]

05/03/2020, 4:13 PM
Well the problem is that the modifier really needs to be passed into the scroller
but we didn’t want Scaffold to create its own scroller, since that will usually be a component that you want to control explicitly
also you could have the scroller be nested in a few other composables, so won’t necessarily be a direct child
k

Kazemihabib1996

05/03/2020, 4:57 PM
Oh, right, thank you
@Leland Richardson [G] I like to understand everything, sorry if I'm asking too many questions. And why you can't just wrap the bodyContent inside a box and apply the modifier to that box? what problems it might cause?
l

Leland Richardson [G]

05/03/2020, 5:02 PM
no worries at all!
🙏 1
honestly i don’t know all of the specifics here, but my understanding is it had to be applied to the scrollable element
👍 1
2 Views