John O'Reilly

    John O'Reilly

    2 years ago
    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)....
    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

    matvei

    2 years ago
    bodyContent
    lambda has a parameter
    innerPadding
    , please, apply it as a
    contentPadding
    parameter in the
    LazyColumnFor
    and it should work
    Later we will figure out how to make this automatically, but for now manual wiring is required unfortunatelly
    bodyContent = { innerPadding -> 
                LazyColumnFor(
       contentPadding = innerPadding, 
       items = stationsState.value) { station ->
                    StationView(station)
                }
            },
    John O'Reilly

    John O'Reilly

    2 years ago
    thanks @matvei, that did the trick
    matvei

    matvei

    2 years ago
    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

    Josh Feinberg

    2 years ago
    @matvei - i was using the inner padding as a modifier before
    Modifier.padding(innerPadding)
    , Is there benefit of
    contentPadding
    over this?
    ah, doesn't look like it. the innerPadding just ends up being used in a modifier anyways
    manueldidonna

    manueldidonna

    2 years ago
    contentPadding is like padding + clipToPadding=false on Recyclerview
    matvei

    matvei

    2 years ago
    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