Android Infinite Auto Image Slider Using ViewPager2 in Kotlin | Android Studio 2022

[Music] hey guys welcome back to coding stuff and in this video we'll see how we can create auto infinite slider with view pager 2 and kotlin so i have created one empty project and as you can see it has nothing in the activity main for now and i added some drawables as you can see some of the marvel's images and inside the values i changed dark action bar to no action bar and also i have added one layout which is just an card view and it contains one image view with a scale type fit x y and i have provided card corner radius to it as a 10 dp and its width and height is a match parent because we will be using this in view pitcher 2 so the child of view pager 2 must have width and height as match parent so we'll move to the activity main and down here we'll add one view pager so view pager 2 will keep its width as 0 dp and height as 350 dp will provide it padding from start and end of 80 dp padding end of 80 dp and now switch to the design mode will constrain this horizontal in parent and this one vertical in parent will give it id as a view pager too okay so first of all we'll create one adapter class for this view pager so we'll click on the package select new kotlin class and we'll name it as image adapter and we'll pass the list and view page over here so private val name it as image list this will be type of array list of type end comma private i'll view pager2 and inside this will create another inner class will which will be image view holder will pass in the view here let's name it as item view this will be of type view and this class will inherit from recyclerview.viewholder and inside this will pass in the item view and inside this class will find id of our image view so i'll image you let's type is image view equals to view dot find view id so item item view dot find um id i dot id dot image view as you can see it's id is image view so now uh we will will inherit this class from recyclerview.adapter and in the genex we need to specify the view holder class so image view holder and then click on this image adapter press alt enter implement methods we need to implement these three methods press alt ctrl l to reformat the code so inside the oncreateviewholder we need to inflate the layout so we'll create one val view this will be equals to layout inflator dot from context parent dot context dot inflate r dot layout dot image container another parameter will be parent and then the last parameter will be false then we'll just return this image view holder and we'll pass in the view so yeah i will move to the gate item count method and in here we'll just write image list dot size and inside the on bind view holder holder dot image view dot set image resource and this will be image list position okay sorry we need to return this so return and this will be happy so we want to make this uh view pager 2 as auto in finite slider so for that let me just write something and i will explain you that so here we'll check if the position is equals to image list dot size minus 1 so if the item is last item then what will do view pager 2 dot post and we'll pass in the run able here we'll create that runnable over here let me just create it private wall well or enable this will be equals to enable and as you can see image list dot add all image list and we'll just notify the adapter that data set change okay okay so what we are doing here we want to make this viewpager as in finite slider so for that whenever the item is last from the list we'll just uh call the viewpager.postmethod and we'll pass in their enable there so inside this sorry inside this runnable what we are doing we are just adding all the image list item inside the image list so whenever there is a last item we are just adding the previous list to the new list so yeah this is how it will be in finite whenever the item is last it it will again add all the items to the list so that's it for the adapter class i hope you understand and now let's move to the main activity class so first we'll create a reference for our variables so private let in it where view pager 2 which will be type of view pager 2 again private latent wire will will create one handler which will be type of handler again private late in it where we need to create one image list this will be type of array list of ends and then the last one will create latent wire for our adapter so let's just name it as adapter and its type is image adapter so we'll call one method here which will be in it where we'll initialize our variables so private file init and inside this viewpager2 equals to find your id r.id dot viewpager2 then handler equals to handler and as you can see this is our duplicated so we need to write looper dot my looper and then we will initialize our image list this will be equals to array list and yeah so let's add some data into this image list so image list dot add dot drawable dot one let me just duplicate this few times this will be two this will be three this will be four this will be five so we got eight images over here so let me just delete this now we'll call our image we'll call our adapter and we'll initialize it over here so adapter equals to image adapter first parameter we need to pass the image list and the second parameter we need to pass the view pager so yeah so now uh we will set this adapter to our viewpager so vpj2 dot adapter equals to adapter then we'll set some properties to our viewpager so off screen page limit we just want to display three images at the screen so we'll write this off screen page limit as a three then view page two sorry then view pager to clip to padding will make it false view pager to hot clip to children we'll make it false clip children sorry and view pager 2 dot get child at index 0 dot our scroll mode equals to recycle view dot over scroll never so in here we are just uh setting the over scroll mode which is over scroll never so whichever the item is at index zero the middle position we we don't want any other item to over scroll over there so yeah that's why and then the off screen page limit we just want to display three items so that's why it is three and clip to padding and clip children these are for the padding so we don't want it to make it true so yeah now uh just after the initializing all the variables we will call one method which will be set up transformer with our viewpager2 let's just create that method over here private fund setup transformer we will create one variable as transformer this will be equals to composite page transformer and then transformer dot add transformer and here margin page transformer will provide some margin here of margin in pixel which is 40 and then transformer dot add transformer and we'll select this this time because we are getting page and position over here so yeah so we'll continue from the next line in here we'll create one val so it will be r and this will be equals to 1 minus abs which is mathematical operation which which which gives us absolute value so abs of position then page dot scale in the y direction which will be equals to zero point eight five f float plus the r plus 0.14 r so this will add sorry f so this will add uh this uh calculated scaling in in the y direction so yeah so just after this what we'll do we'll just set this transformer to our view pager too so view project to set page transformer and we'll pass in this transformer which is a type of composite page transformer and we just add we just add margin to it and the scale in the y direction so the middle item will get bigger and the rest of the left and right side items will be small in y direction so yeah so we are just killing the middle item over here so yeah that's it so just after setting this vp uh transformer to our view pager to what we'll do we'll call view project 2 or we can do it over here so register on page change to call back and inside this object this will be type of on page change callback and inside this will override one method which is on page selected this one so we get the page position of the selected item over here so before uh implementing this method let's just create one runnable so private val let's name it as our enable this will be equals to enable and inside this viewpager2 dot current item equals viewpager2 dot current item plus 1 so what we are doing in this enable is or we are just incrementing the current item so let's say current item is 2 so we are just making it 3 if the current item is 4 we are making it 5 so yeah so in here what we'll do if the page is selected first i will remove this callback so remove callbacks from this run able and and again handler dot post delayed then we'll pass this run able and 2 000 millisecond so we are just if the item is selected then we are just removing this callback and just after that we are starting it again with passing this runnable so if one item is selected then after the two seconds uh it's like let's say if a second item is selected then after two second uh it will increment to one and slider will automatically change from third item to fourth item so that's what these two lines will do so yeah that's it and now we'll just implement two methods which is onpause and on resume so on resume so inside the on pause we will just remove all the callbacks so remove callbacks passing their enable and in here we'll just copy this one and we'll paste it over here so if our activity get paused i will just remove that callbacks from our handler and if the activities are user interactive means it is in the on resume method we will just uh start it start the handler again with this renewable and millisecond 2000 delay this enable will just increment the current item yeah that's it now i'll try to run the app and we'll see it's working or not so it is installed but as you can see the middle item is not scaling that much there is very little difference because i did one mistake which is uh so i made one mistake so i wrote plus here instead of multiplica multiply so let's just remove this and write multiplication when we add it uh it just gives very small value and that's not enough to make it visible or that's not even noticeable so let's just try to run the app after writing multiply symbol here and our app got installed and as you can see now it looks decent so yeah again you can just increment this or you can just decrease this it's totally up to you you can play with this composite page transformer i just learn about it from the official documentation of android so yeah that's it i'll upload kotlin videos more frequently from now so yeah do subscribe and thank you for watching

Channel: CodingSTUFF

Views: 21,391

Keywords: android studio coding tutorial, android studio coding for beginners, android studio coding in flow, android studio coding with harry, android studio coding tutorial hindi, android studio coding with mitch, android studio coding for login page, android studio coding pdf, belajar coding android studio, android studio coding cafe, cara coding android studio, navigation drawer android studio coding in flow, android studio coding for calculator, coding in flow android studio

Id: ojF2TgYaKUc

Length: 17min 19sec (1039 seconds)

Published: Tue Mar 29 2022