Implement a Beautiful Gallery Transition with Horizontal Pager with Jetpack Compose - Easy Tutorial

foreign I am going to show you how to create this beautiful transition animation when you are scrolling through a gallery inside a horizontal pager watch this video Until the End if you want to learn how to achieve that okay so in this demo project I'm only using a coil image drawing library to load those images in my application now let's open up the main screen here as you can see I only have one variable that holds all those images that I'm going to load in that application as well and here I have a simple scaffold in which I'm going to place now a horizontal pager so let's say here now uh call a horizontal pager a composable function the first parameter is a page count so for the page count I'm going to choose the size of those images or the size of this images lists so let's just press here and type images dot size and the second parameter that I'm going to also add here will be the pager state so let's add here a state so State equal to Pedro state I'm going to just create here that state right there so pager State equal to remember pager State here we also need to add a experimental Foundation API annotation perfect and here just past this arpeggio State now within this horizontal pager I need to call a async image composable function to actually display those images in this horizontal pager so as a model here I'm going to specify a image request data Builder here I'm going to pass the context so local context.current and then on this sub Builder I'm going to call a data function and I'm going to pass here that image URL from this actual list so to grab each and every image from this list I'm going to use here image as a variable and then as an index value I'm going to use this it value which is referring to the index value of each and every page inside this is a horizontal pager we can also rename this Lambda to say index and now it makes some more sense so images there you go and also for the content description we can just write here a simple image all right perfect and the second function which I'm going to call here is a build function there we go the next parameter which I'm going to pass here to this async image is a Content scale so here I need to call our content a scale.crop so that basically each and every image can fit to this um Asic image borders okay also I'm going to here uh call a modifier and add a couple of different modifiers like fill maximum size so that we can actually fill the maximum size of the parent I'm going to add here a padding values on each and every side to be maybe a 16 DB I'm going to add here a shape to be a rounded Corner shape of maybe 16 DP as well and there you go for now that's everything we need for our async image so now let's run this application for a moment to see how this horizontal pager will actually look like with all those images that we are loading from the URL let's open up our there you go so that's how it looks like for now and of course we can scroll them on the left and right so for now everything here looks fine now the next thing that we need to do here we need to change the size of our image dynamically whenever we scroll through our horizontal pager okay and for that purpose we need to create here a new variable and actually do the calculation for the page offset so here I need to create a new variable named a page offset and then I'm going to hear uh open up the the brackets and type a pagerstate.current page and then I need to subtract that value with the index value and then I need to here uh add that result value to the pagerstate dot uh so better state DOT current page offset fraction now this second page offset fraction basically represents a value from a minus 0.5 to a plus 0.5 okay so when the second page offset fraction value is a minus 0.5 it means that the page is offset towards the start of the layout and when this value is 0.5 in plus then this is a page offset either towards the end of the layout and when this value is actually 0.0 it means that this actual uh image is on the center of that layout which means that it's actually snapped and I can actually show you how this value actually works so for example I'm going to just here a log a simple value I'm going to here call a pager state DOT current page offset fraction and we are going to observe that value from our login so let's just open up the locket type here tag so as you can see here the first value is a zero and if I move that on the right side as you can see that value will increase so 0.345 and then we're going to see here minus um 0.5 then a 0.4 and so on and so on because we are moving to the next image and also when we receive this a 0.0 value it means that this image is actually centered and the snapped in this horizontal pager okay and basically we need to use that the same value to calculate the page offset so that we can actually decrease the size of this image whenever that the image is inside the offset so when this image is uh going to be snapped then its size should be the full screen size otherwise its size should be maybe 0.75 percent or 75 percent so you will see how will that work let me just here uh show you that in a moment uh the next thing that I'm going to do here I'm going to create the one more variable and name the image size and now here I need to call uh actually animate a float float as a state and as a Target value here I'm going to add the one calculation so here I'm going to say if a page offset is actually not 0.0 so when this page offset is not 0.0 or when this image is actually not snapped on the center in that case the size of this image will be 0.75 let's say and otherwise that value will be uh one and one is referring to the to the full size basically okay so here a zero is a zero percent size and one is uh 100 of the size and the next thing I'm going to also specify here the animation uh specs so for the animation I'm going to just specify here a twin for the duration I'm going to choose a 300 milliseconds okay so now here we have a warning for this get value function I think that we need to add here uh one uh more uh Imports so let's use here Android X compose our runtime get value and maybe even a set value nevertheless okay so now that warning uh has disappeared and now this image size needs to be passed dynamically to our async image now since this is actually a float value it means that we need to hear a call a different modifier and not a size modifier so I'm going to call here a uh Graphics layer modifier right so here I'm going to modify two different values a scale X and a scale y so for both of those properties I'm going to specify image size as a value so scale Y is equal to image size there we go and now let's try to actually allow this application so when we are moving uh this image through our horizontal pager and then this is a page offset that will also change right and when this page offset is actually not 0.0 so when this image is not snapped on the center then the size of the image will be 0.75 or actually 75 percent or otherwise when our image is snapped then it will have a full size so as you can see when I now move that then this is a page offset will also change and immediately after that our image size will change okay and there you go so that's how we can easily uh change the size of our image whenever we move that through our horizontal pager now the last thing that we need to do here we need to also add that grayscale effect so whenever our image is not snapped to this horizontal pager then it will have a grayscale effect and only after our image has it's a full size only then we will be able to see colors of this image so now let's create that logic so now in our async image we need to pass one more parameter which is called a color filter so let's here add a color filter so color filter and here we're going to choose this color Matrix function and we need to pass this color Matrix so now in order to pass this color Matrix I'm going to create here a one more variable Matrix and I'm going to call here remember to remember one value across the multiple recompositions and that will be a color Matrix okay there we go and now we can just pass this Matrix right here now uh you might be wondering how can we actually change the the color filter of our async image and apply a grayscale effect well there is one a special function for that and that function is called the set to saturation so I'm going to add here actually uh one a launched effect block so that we can trigger a certain logic whenever the size of our image changes so as a key here I'm going to add image size and then I'm going to say if a page offset is not uh 0.0 so when our image is not a snapped on the center in that case I'm going to set the saturation of our image to be zero or basically apply a grayscale effect so let's hear call Matrix dot a set to saturation zero f and when our page offset is actually 0.0 and our async image is snap in the center then I'm going to specify this same function but only a different value of one okay and now let's allow this application once again so now this saturation zero will be applied to all images that do not have this page offset of 0.0 so you can see this image has a offset of 0.0 but when we move that then it will change to a grayscale effect okay and only if that image gets this page offset of 0.0 only then we are going to see the real colors of that same image and there you go so that's how we can easily create and there you go so that's how we can easily create this wonderful effect of image gallery and it looks very nice so that's everything I wanted to share with you in this video so if you have any questions feel free to comment down below and of course don't forget to like this video but only if you find it helpful for this video that will be all if I die I'm a legend when they lay me down the rest

Channel: Stevdza-San

Views: 9,705

Keywords: horizontal, pager, view pager, android, kotlin, android studio, development, how to, guide, tutorial, easy, programming, gallery, beautiful, animation, animate, transition, pages, image, images, coil, image loading, library, android development, jetpack compose, jetpack, compose

Id: oHceF26iG4E

Length: 11min 29sec (689 seconds)

Published: Mon May 22 2023