Nested Scroll with Jetpack Compose | by Syntia | Jan, 2023


Jetpack Compose will increase developer productiveness in views, particularly with regards to RecyclerView and Adapter. We solely must

  • outline a composable (LazyRow/LazyColumn),
  • set the objects and parts for every merchandise,
  • … yeah, that’s all!

There are different composable corresponding to Row and Column too. On this article, we’ll see some use circumstances of Row/Column, LazyRow/LazyColumn, and tips on how to deal with the scroll motion inside them.

Disclaimer: All supply code uncovered right here has been developed with artifact December 2022 launch of Compose Bom. Please be aware that some supply code might change with new variations.

Row/Column

Fundamental compose layouts (column and row)

Row /Column can be utilized to rearrange some views with a particular orientation (horizontal or vertical). In different phrases, we are able to deal with Row/Column like LinearLayout in XML. The distinction is scroll might be set on to Row/Column modifier utilizing verticalScroll or horizontalScroll.

LazyRow/LazyColumn

Compose gives LazyRow/LazyColumn to exchange RecyclerView in XML. Use these parts when we have to:

  1. Show objects with unknown/giant sizes, with objects() API inside LazyRow/LazyColumn (LazyListScope).
  2. Solely compose and lay out objects which might be seen within the element’s viewport (similar precept as RecyclerView).

Nested Scroll with Nested Objects

Let’s take an instance: Instagram residence display screen. The display screen is scrollable with infinite posts. There’s additionally a horizontal scroll within the story part.

Instagram

Sometimes, first, we are going to add a Column to wrap the story and submit part as one vertical scroll. Then, use LazyRow and LazyColumn for every part as beneath.

If we attempt to preview the outcomes, an error from Android Studio will probably be proven, which prevents us from creating nested scrolls with the identical orientation with out mounted peak/width. By default view system (XML), it’s much like including RecyclerView inside a NestedScrollView. It might harm app efficiency because the recycler’s capability is omitted when it’s inside a nested scroll.

java.lang.IllegalStateException: Vertically scrollable element was measured with an infinity most peak constraints, which is disallowed. One of many widespread causes is nesting layouts like LazyColumn and Column(Modifier.verticalScroll()). If you wish to add a header earlier than the listing of things please add a header as a separate merchandise() earlier than the principle objects() contained in the LazyColumn scope. There are might be different causes for this to occur: your ComposeView was added right into a LinearLayout with some weight, you utilized Modifier.wrapContentSize(unbounded = true) or wrote a customized structure. Please attempt to take away the supply of infinite constraints within the hierarchy above the scrolling container.   at androidx.compose.basis.CheckScrollableContainerConstraintsKt.checkScrollableContainerConstraints-K40F9xA(CheckScrollableContainerConstraints.kt:35)   at androidx.compose.basis.lazy.LazyListKt$rememberLazyListMeasurePolicy$1$1.invoke-0kLqBqw(LazyList.kt:192)   at androidx.compose.basis.lazy.LazyListKt$rememberLazyListMeasurePolicy$1$1.invoke(LazyList.kt:191)   at androidx.compose.basis.lazy.structure.LazyLayoutKt$LazyLayout$1$2$1.invoke-0kLqBqw(LazyLayout.kt:71) .....

To realize nested scroll, as an alternative of making a brand new LazyColumn inside a Column, we should always straight wrap all of the composable inside guardian LazyColumn as beneath. The idea is much like ConcatAdapter.

And the result’s… Tadaaa! The nested scrolls work each horizontally and vertically.

Instagram home screen result

Final, because the use case is widespread, let’s create a basic composable element to make it reusable. The entire supply code of the outcomes might be proven beneath.

Joyful coding.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles