LazyColumn cuts off items when using with BottomNavigationView and Toolbar

Question

LazyColumn in Jetpack Compose works fine with Scaffold and its inner padding according to this link. but when I try to use it inside a Fragment, it's items cut off by Toolbar and BottomNavigationView.

should I calculate inner padding manually depending on Toolbar and BottomNavigationViewsize or is there a better solution?

here's the structure. items of lazyColumn are colorful.

as you can see blue item is cut off.

update: I realized that this behavior is because root of activity is a CoordinatorLayout and my container has appbar_scrolling_view_behavior. I tried this, but it didn't work.

@mxrzbn can you please share the piece of code what have you tried? — Kotlin Learner, Dec 11 '22 at 17:12
it depends on what you do in the fragment. If you put your Toolbar, LazyColumn and BottomNavigation inside one `Column`, there won't be no cut off. If you have those in a Box for some reason, then yes, you will need to position/pad it manually. By the way, what's the reason not to use Scaffold? You can use it inside Fragment too. — Jan Bína, Dec 11 '22 at 17:21
@JanBína I am using single activity + fragments. In my activity I have toolbar + bottomNav + navHostFragment. When I put a composeView inside my fragment and make it match fragment's height, and set a lazyColumn to that composeView, it gets cut off. — mrzbn, Dec 11 '22 at 19:03

z.g.y · Answer 1 · 2022-12-12T05:42:41.540

0

I'm not sure if this would help, but you can try adding the height of the Bottom Navigation view as a bottom content padding to the LazyColumn or to a transparent widget inside another item{…} scope.

as a content padding

LazyColumn(
      modifier = Modifier
             .fillMaxSize(),
      contentPadding = PaddingValues(bottom = <Bottom navigation height>)
) {…}

or as another item scope

LazyColumn(
      modifier = Modifier
             .fillMaxSize()
) {
    items (..) {…}
    
    item {
        Box(
           modifier = Modifier.height(<Bottom navigation view height>)
        )
    }   

}

edited Dec 12 '22 at 05:42

answered Dec 12 '22 at 01:06

z.g.y

5,512
4
10
36

this is a workaround and if your toolbar and bottomNav do not change, works. but my toolbar height changes in time. plus I think there should be another way, because I think it is a common issue. – mrzbn Dec 12 '22 at 07:51

LazyColumn cuts off items when using with BottomNavigationView and Toolbar

1 Answers1