Lift on scroll in Jetpack Compose

Photo by Sven Mieke on Unsplash

Material Design has always specified that top app bars can be positioned at the same elevation as content until that content scrolls, with Material Components for Android providing the app:liftOnScroll attribute.

Source: Material Design — App bars: top

Of course, Jetpack Compose does not have built-in liftOnScroll functionality, so how do we implement this?

Implementing liftOnScroll in Jetpack Compose

Typically you create scrolling content inside a LazyColumn or LazyRow. Both of these provide a state field of type LazyListState, which, as the documentation states, can be hoisted to observe scrolling.

LazyListState — Public properties

So, by providing a LazyListState when creating our list, we now have access to the first visible items index and scroll offset anywhere in our code.

With that information, it is trivial enough to generate an elevation value to use in an AppBar.

The great thing is this value can be passed around and used in any element, not just AppBars, so if you’ve got a custom toolbar implementation you can still use this trick.

Compare that to liftOnScroll in XML layouts that require the scrollable view to be nested in the right way.

Here, we use it in our AppBar to generate the required elevation behaviour.

Join medium to read all of my articles, or subscribe for e-mail updates.