Scrollable Grid View With Jetpack Compose

Workaround for the LazyVerticalGrid to make the screen scrollable as a whole

Photo by Tanner Boriack on Unsplash

The LazyVerticalGrid is a very handy component in case you want to display a list of items in a grid view.

Unfortunately, it has in its current state a huge trade-off. While the component itself is vertically scrollable, it cannot be placed inside another vertical scrollable container.

That means that you can only have static components and the LazyVerticalGrid as a scrollable container.

If you try to merge the LazyVerticalGrid for example with a LazyColumn, an exception will be thrown with the following stack trace:

java.lang.IllegalStateException: Nesting scrollable in the same direction layouts like LazyColumn and Column(Modifier.verticalScroll()) is not allowed. If you want to add a header before the list of items please take a look on LazyColumn component which has a DSL api which allows to first add a header via item() function and then the list of items via items().

In this short article, I will show you a quick workaround for the LazyVerticalGrid to let your screen be scrollable as a whole.

The problem