do you have content in your app that users need to be able to switch through in different directions [Music] easily using the pager component can help add a bit of delight and ease of use to your apps as it has built-in gesture support for swiping between contents unlike a standard row or column add the horizontal pager to your composable tree providing the number of pages as the page count parameter to remember pager State the pager composable then provides you the page number number that can be used inside the page content in this example it is used to add a page content composable to each page with the number and a green background color vertical pages are just the same as horizontal ones however the content will scroll up and down instead of left and right it's quite common to want to scroll to a particular item in your page list programmatically to do this create a pag State object using remember pag State then set the page you'd like to navigate to in a co- routine scope either with scroll to page which performs an instantaneous jump or animate scroll to page which plays a customizable animation to the next page let's talk about a few more configuration options by default pager only loads the current pages that are visible on screen it lazily composes the other Pages as and when it needs to this helps keep the performance Snappy in this example the pages that are partially visible will be composed but the ones next to those won't be in order to to specify more pages that should be loaded offc screen you can set the Beyond viewport page count parameter on the pageo this will increase the number of pages that are composed of screen so be careful not to set this too large as they'll be composed measured and placed in this example with a value of one there'll be additional pages on each side leaving only the two Edge pages to be lazily composed by default the size of the pager takes up the full width and height of your provided size but what if we wanted to specify the exact size of each item for example if we wanted each page to be 100 DP in width you can set a page size. fixed with the size and DP in the horizontal pager case it'll apply that as the width per page and if you'd rather base it on the available space use a custom page size in this example we want to have three pages per viewport you can create a custom page size implementation taking the available space subtracting the page spacing and dividing it by three giving us three pages in this View report to add padding around items while still having them scroll past the bounds of the padding use the content padding parameter on horizontal pager we can set it to be at the start or both sides to Center the item with a horizontal parameter or at the end to have the next item peeking through with the end parameter another config option is to specify how items are snapped to when a fling gesture is performed on the content by default the pager will only allow for one page at a time with a fling gesture to change this Behavior we can create a fling behavior that Scrolls more pages at once in this example it's set to allow for 10 pages using the basics gives you some great interaction patterns out of the box for free but what if you wanted your app to feel more fluid and expressive you can use the state of the scrolling information to animate parts of your pager content to make it feel a bit more delightful the following UI has song cards and you can scroll from left to right between the different songs as you scroll the card collapses into a smaller State and the image has a scale effect applied to it how was this done using Pages state. getet offset distance in Pages we will get how far away each page is from the current page snapped position this will vary from -5 to 5 for the current page the value is zero if the current page is in the snapped position if it's not the current page it'll be offset by the past in page number but as the items move the page offset changes to a fractional value in this example example when it's not quite snapped to its resting state both the first two pages have a value of 0.5 as the offset as we are using the absolute value here but as the second page snaps into the current page position the first page now has an offset of one from the center of the currently snapped page and the others increase in distance from the center too this information can now be used to apply different Transformations for example we can change the height of the composable by taking it in as a fraction of the content size and as the page moves into the non- snapped position we can see it decreases in size and the item coming into view increases in size using the same page offset we apply transformation to the image inside the clipped container we lurp or linearly interpolate between 1 and 1.75 where one is the resting state of the focus page and 1.75 is the state of the side Pages we set the scale X and scale y to the scale resulting in the image scaling as the pager is scrolled to each side you can use this page offset value to perform many different kinds of Transformations that's all about the pag of composable in compose for more information check out the documentation [Music]