How to Build a Swipeable Image Slider in Jetpack Compose - Android Studio Tutorial

hey guys and welcome back to New jetpack compose tutorial in this video I will show you how we can create a swipeable image slider here and you can of course replace this content with any type of composable we also have some page controls down here where we can click to animate between these pages but we can also simply swipe them so it's pretty much what in XML was the job of a view pager we now have a very cool and efficient solution in compose for that let's jump into an empty jetpack compose product here in Android Studio I already added three images of animals here you can add any type of images you like of course and something you need to make sure before starting is that you are actually using jpeg compose version 1.4.0 because this new image slider is contained in that version in combination with that I recommend to use carton version 1.8.10 and you need to adjust your carton compiler extension version so for the compose compiler to this version since that will work together with this cotton version once you did that make sure to synchronize your product and then we can get started coding first of all let's create a little list of our images which is simply an animals list and here we just link our drawable resources so first of all auto drawable dot cat then we have one for the dog and one for the chicken and inside here in our compose code we can now start implementing this image slider I want to put this in a box because we will need to adjust the the alignment of our page control here so we can align this at the bottom and I should simply overlap these images so we just use a box here and as a content of this the new type of composure for this image slider is called a horizontal pager and the same way we have a horizontal picture there's also a vertical pager so with that you could Implement something like a tick tock like video feed but the behavior of both is exactly the same so I will just show you the horizontal pager you should be able to use the vertical one just the same so let's take a look what kind of parameters this horizontal pager needs first of all the page count so how many pages we have how many images in our case which is simply animal start size then we have a lot more parameters we could pass here we could pass a pager state which is used to comparable to the lazy list state of a lazy column which you can simply use to animate between pages to say hey now I want to go to page three programmatically which will then need for our page control so let's add such a page or state here feature state but remember pager State we need to add this experimental Foundation API to main activity by pressing Alt Enter and we then pass this pager State what is it just called State yes state is equal to patreon State then we could pass some keys similar to a lazy column which is just a unique identifier for each item to optimize loading these since as far as I'm concerned this is lazy loading here yes you can see pages are lazily placed in accordance to the available viewport size so this horizontal pager won't compose all the sub pages but only those that are actually visible and to optimize this kind of update Behavior we can pass some keys like a unique identifier in our case we can simply use the resource ID of each animal since that is unique so you can just say animals add the index of it so it is just the the index of the current item and then in here this is pretty much the same as in a lazy color just that we don't use these items blocks but rather just get access to the index here and then we can use this index to compose the composable for the current page so in our case we just want to show images pass in a painter resource and we pass in our animals at the index of index oops like this um the content description let's just pass now here content scale is crop whoops just always fill the whole size of this pager and we pass a modifier of modifier dot filmex sites and that is already how easily we can create such a picture of course we are still missing the page control but let's take a look how this looks like in the app there we go we see our image and if we Now swipe we can swap to the next images and if there are no more then we get this little over scroll animation like we also know from lazy list the transitions are a little bit laggy here because I'm using my mouse for for my real device here if I use my finger instead it's super smooth as you can see but before we get to the page control I want to show you something else which is individual 4 such a horizontal pager because we have two different types of fill modes or how is it called page page size here so how the pages should be positioned the default is Page size dot fill and this will simply make sure that each page will fill the whole Space on our screen however what's also an interesting page size mode is the fixed mode where we can pass in an individual a page size for example 300 DP import DP and that will cost that every single page is now 300 DP wide so if we now relaunch this what will happen is you can see now every single page does not fill the whole screen but rather just 300 DP and if we now scroll we still get the same scrolling Behavior just that these pages are overlapping so depending on what you're implementing this might also be an interesting page size mode to look at let's switch this back to fill for our use case here and then get to implement our page control so below this horizontal pager let's have a box for that and here for the modifier I will just pass in the modifiers so this box will just be this little um maybe we launch my other app it will just be this little container here for these two icon buttons and for that I will pass in a modifier I will offset this on the y-axis by minus 16 DP like this so we just move it to the top by 16 DP we then want to say fill Max width and pass in 50 so we fill 50 of the width of our screen we say we want perfectly rounded corner so we clip it to around the corner shape of 100 percent we can give the background color of material theme that colors that background we can oops give it some padding of let's say ATP and we can then align it in the bottom center of our outer box and in here we're now going to place our two icon buttons so icon button let's leave out the on click listener for now and we're just going to pass in an icon which will be icons dot default keyboard Arrow left for the previous icon button to get to the previous image content description is um go back and then we can actually also align this by the way in our box modifier is modifier align in the center start so to the left and then we can copy this paste it below and this one will be Center end and go forward and the keyboard error right like this so now how what should we do when we click these icon buttons we of course need to do something with our pager state and if we go in here and simply say Okay um pager state DOT animates grow to page that's the function you want to use then we can say okay we want to animate to the following page index we pass here how do we get the next page index we can also use the pager state to get the the current page and simply say plus one you can see we still get an error because that is a suspending function the animation function it will suspend as long as the animation takes so to execute that we need access to a 13 scope which you can get access to here about scope is remember Co routine scope like this and then we launch according right here put in this animation function and we are good and of course for the previous page we want to go back so let's copy this paste it for our forward button like this and here we just want to replace the minus with a plus and that is it let's launch this take a look here on our device there we go looks exactly the same we can of course still swipe but we can also click these buttons to now move between our pages very cool um so I hope you enjoyed this I think this is definitely a lot easier than implementing if you pager in XML where you need like an adapter and all these things so if you enjoyed this then definitely subscribe to this channel if you haven't yet and I wish you an amazing rest of your week and see you back in the next video bye bye thank you

Channel: Philipp Lackner

Views: 17,475

Keywords:

Id: ro3a-GmaLqE

Length: 9min 38sec (578 seconds)

Published: Wed May 10 2023