sorry if this has been covered before but .....am ...

# compose

[John O'Reilly]

sorry if this has been covered before but .....am using Scaffold and the LazyColumnFor looks to be overlapping with BottomAppBar ...is there some modifier etc I should be using in this case (will add more code in thread)....

[John O'Reilly]

Scaffold(
        topBar = {
            TopAppBar(title = { Text("Bike Share") })
        },
        bodyContent = {
            LazyColumnFor(items = stationsState.value) { station ->
                StationView(station)
            }
        },
        bottomBar = {
            BottomAppBar(content = {
                BottomNavigationItem(icon = { Icon(Icons.Default.LocationOn) }, label = { Text("Galway") },
                    selected = bottomBarSelectedIndex == 0,
                    onSelect = {
                        bottomBarSelectedIndex = 0
                        bikeShareViewModel.setCity("galway")
                    })

                BottomNavigationItem(icon = { Icon(Icons.Default.LocationOn) }, label = { Text("Oslo") },
                    selected = bottomBarSelectedIndex == 1,
                    onSelect = {
                        bottomBarSelectedIndex = 1
                        bikeShareViewModel.setCity("oslo-bysykkel")
                    })
            })
        }
    )

[matvei]

bodyContent lambda has a parameter innerPadding, please, apply it as a contentPadding parameter in the LazyColumnFor and it should work

[matvei]

Later we will figure out how to make this automatically, but for now manual wiring is required unfortunatelly

[matvei]

bodyContent = { innerPadding -> 
            LazyColumnFor(
   contentPadding = innerPadding, 
   items = stationsState.value) { station ->
                StationView(station)
            }
        },

[John O'Reilly]

thanks @matvei, that did the trick

[matvei]

No problem!

It's needed to make sure you content scrolls under the bottomBar in case it's semi-transparent or has a cutout, so with this contentPadding you will be able to see all content when scrolled down, but content will scroll under the bottomBar anyway

[Josh Feinberg]

@matvei - i was using the inner padding as a modifier before Modifier.padding(innerPadding) , Is there benefit of contentPadding over this?

[Josh Feinberg]

ah, doesn't look like it. the innerPadding just ends up being used in a modifier anyways

[manueldidonna]

contentPadding is like padding + clipToPadding=false on Recyclerview

[matvei]

Basically

ScrollableRow(contentPadding = innerPadding) {
     text.forEach { Text(it) }
}

is equals to

ScrollableRow() {
    Row(modifier=Modifier.padding(innerPadding)) {
         text.forEach { Text(it) }
    }
}

but without additional Row.

We provide this shortcut so it's easier to use with Scaffold and you don't need additional layout strategy inside the ScrollableRow