ViewPager in Jetpack Compose with Official API | by Saqib | April 2023

This story will present methods to create ViewPager (HorizontalPager /VerticalPager ) in Jetpack Compose.

I wrote one other story about Tab Format in Jetpack Compose with Official API. You possibly can learn it there.

ViewPager is a well-liked design format utilized in Android functions. Within the story, we are going to see methods to create ViewPager utilizing Jetpack Compose. In Jetpack compose they’re referred to as HorizontalPager And VerticalPager .

Content material

Excessive stage overview of web site content material

• dependent
• Horizontal pager (Easy instance)
• Horizontal pager with Subsequent and Earlier buttons (Handbook scrolling)
• Horizontal pager with image and dot indicator
• Vertical pager with footage
• Github venture

dependent

HorizontalPager And VerticalPager The API was initially a part of accompanist However from Compose 1.4.0+, that is a part of the official API, however they’re nonetheless in Beta. It’s essential to add Compose Basis dependency contained in the venture. You possibly can see the newest model This

implementation 'androidx.compose.basis:basis:1.4.1'

Your venture could have an error since you are in all probability nonetheless utilizing an older model of Compose Compiler. It’s essential to improve your Compose Compiler model to a minimum of 1.4.0 and for that you could be additionally have to replace your Kotlin model. You possibly can see Kotlin model for Compose Compiler Model Mapping This. I’m utilizing Kotlin model Compiler model 1.8.10 and Compose Compiler model 1.4.4

It is best to replace Compose Compiler model in school information as under

composeOptions {
kotlinCompilerExtensionVersion '1.4.4'
}

Artificial horizontal pager

Let’s check out HorizontalPager composable and the parameters required by composable

Clarify the parameters that we are going to use within the examples under.

• pageCount — that’s the variety of pages we need to show
• pageSize — it represents the dimensions of the pager itself (not the content material dimension), default worth is PagerSize.Fill meaning give HorizontalPager it would take up the total width of the display screen and let VerticalPager it would take the total peak of the display screen because the pager default dimension.
• pageSpacing — it represents the space between two pagers of HorizontalPager or VerticalPager
• state — it retains the pager state i.e. which web page consumer is at present seen and gives scrolling
• pageContent —it gives a composable lambda that can signify the precise contents of the pager. lambda gives the web page index of the web page at present displayed on the display screen that shall be used to disable the customized web page inside HorizontalPager
• modifier – it is generic modifier parameters like several composable operate.

Horizontal pager (Easy instance)

Let’s have a look at the fundamental instance of HorizontalPager . Within the instance under we’re creating pager state utilizing rememberPagerState() and go in HorizontalPager together with the variety of pages we need to show is 5. pagerState handle scrolling state of HorizontalPager retains observe of the present web page of the pager and it may be used to scroll to a particular web page manually, we are going to see methods to use it later within the subsequent instance.

Output:

Horizontal pager with Subsequent and Earlier buttons (Handbook scrolling)

Within the subsequent instance we are going to add Subsequent and Earlier buttons on the pager to point out methods to use rememberPagerState which you should use to manually scroll to a particular web page as proven within the instance under

We’re utilizing Field to put Subsequent And Prev buttons on high of HorizontalPager

derivedStateOf Api is used to find out when to activate Subsequent And Prev Knot. derivedStateOf is a perfect selection right here as a result of we do not need to reorder the buttons each time the web page index modifications to keep away from pointless reordering. see under code for prevButtonVisible

val prevButtonVisible = bear in mind {
derivedStateOf {
pagerState.currentPage > 0
}
}

Prev The button shall be displayed when pagerState.currentPage index is larger than 0, however we do not need to recompose Prev button when pagerState.currentPag is it 2, 3 or 4, derivedStateOf will course of routinely i.e. it permits Prev Button when present web page index is 1 and it will not recompose Prev if button pagerState.currentPage indexes are 2,3 and 4 to keep away from pointless rearrangements.

pagerState present property pagerState.currentPage signifies the present seen web page index and a technique animateScrollToPage which scrolls the pager to ship pageIndex.

scrollToPage additionally one other methodology offered on pagerState can be utilized if we do not want animation whereas scrolling.

animateScrollToPage can be droop operate, so name a droop aside from composable, we’d like coroutineScope to launch animateScrollToPage that is why we create coroutine scope utilizing api rememberCoroutineScope

rememberCoroutineScope is a composable referred to as to get the coroutine scope. It’s connected to the composable operate from the place it’s referred to as and destroyed when that composable operate doesn’t exist. i.e. you’ll be able to launch coroutines utilizing this scope with out worrying in regards to the lifecycle of the coroutines.

Output:

Horizontal pager with image and dot indicator

Within the subsequent instance, we need to show the picture inside HorizontalPager with dots on the backside. For dot indicators we are going to use HorizontalPagerIndicator api from accompanist . HorizontalPagerIndicator The api nonetheless hasn’t been moved to the official compose dependency that is why we now have to make use of the phrase accompanist and it’s suitable with HorizontalPager from Jetpack compose platform dependencies.

Add following dependency for HorizontalPagerIndicator see the suitable model within the Readme part of the github repo’s accompanist.

implementation "com.google.accompanist:accompanist-pager-indicators:0.30.1"

Check out the ultimate code under

HorizontalPagerIndicator will be synthesized pageCount And pagerState

pageCount should be like we’re moving into HorizontalPager can be 5 pagerState is taking the identical reference handed in HorizontalPager created by way of rememberPagerState() Each HorizontalPager And HorizontalPagerIndicator should have the identical pager state handed for them to synchronize with one another.

HorizontalPager is displaying one picture per web page being accessed from the listing of photographs utilizing the present web page’s index.

Field used to cowl HorizontalPagerIndicator on high HorizontalPager

Output:

Vertical pager with footage

We’ve seen a number of examples of HorizontalPager within the story above. Now let’s have a look at VerticalPager. We are going to use an inventory of photographs to show in VerticalPager . Code under.

VerticalPager are utilizing the next additional parameters which we do not use in HorizontalPager though in addition they exist in HorizontalPager .

• pageSize — it represents the dimensions of the web page for use, we’re utilizing Mounted 300.dp in our code it implies that on display screen we are going to see many pages relying on what number of pages can seem on any machine dimension
• pageSpacing – it handles spacing between two pages

The output of the code under will make clear the impact of those properties.

Migrating from Chaperone to Compose Basis API

Earlier than this api was formally launched within the Compose Basis dependency, it was obtainable in accompanist dependent. In the event you used the phrase accompanist and also you need to swap to official dependencies there are migration directions obtainable This

That is it now, Hope it is useful

supply

Photograph Credit / Attributes

All photographs used on this coding venture are taken from www.freepik.com and their photograph credit/attributes are talked about under.

Github venture

Keep tuned for extra Jetpack Compose and Android theme story

— — — — — — — — — — — — —

GitHub | LinkedIn | Twitter