ViewPager2 with dot Indicator | Image slider with dot Indicator in android studio | ViewPager2

hello guys welcome back to that projects i am back with another video so so in this video we are going to learn very amazing thing in android and we are going to see how to create view page with indicators in android studio so basically why we need to use view pages with indicator letter suppose you want to design an onboarding screen you want to create a image casual in your android application you want to create a eshopping app and on that and in that app you want to show the product images and below you need to show indicator as well to show the multiple images on a single screen so user can swipe up between the images so we are going to create this kind of functionality in android so this video is going to very interesting so watch the video till end so before starting this video first of all it is better to see a demo so for this i have to open my phone what are we actually going to create so you can see i open my phone and the application which you are going to create this one view pages with images so you can see by default it is showing first image so you can implement this view pager anywhere wherever you want i implemented in activity but you can implement in anywhere wherever you want so now if i scroll or i can say if i swipe so you can see now the indicator second item or we can say second page is active now if i go on third so you can see third page is active so you can create a custom indicator we are going to not going to use any kind of tab layout inside this we are going to write the all code from scratch and you can customize it according to your own way so you don't need to worry about whether whether we are going to use any library so you can't customize it don't worry we are going to write every code from scratch and so you can customize every single thing in this application so you can see it is working fine so down for the delay now let's start the video and if you don't subscribe the channel then now then please subscribe the channel and hit the bell notification and if you don't like videos then please like the video so now let's start the video so click on android studio and click on file the new then click on new project and now click on empty activity click on next and you can give any name so i just giving a view pager with indicator tutorial you can give whatever you want and i am going to use kotlin language but you can use java as well it is your choice because the you just need to understand the logic and all concept is same now project is building so let's wait for a gradle rule so first of all i am going to use three images in my project but you can take image from a server or from anywhere wherever you want so it is totally depend on you but i am going to use hardcoded images so i have to paste the images in my drawable folder so for this i open my previous project and i am just copying these three images but you can add as many images it is your just let us suppose you want to add 100 images in a single paper you can also add no problem now i am also going to copy this color so you can use any colors for active indicator and for a inactive indicator it is your choice so now i just paste these colors here so let's start writing the main code inside of our activity mainneck.xml file so first of all delete this text view we don't need this and just change this constraint layout to later layout but you can use any layout it is your choice now what i need here i need a new page first of all so i am going to use new pager 2 not viewpager1 so i am going to use this one viewpager2 set the layout with match parent and i am giving height here 400dp but you can give whatever you want so just depend on you on how much screen size you want to show your view pager and now you can give any id so i am just giving here view pager then close this so you can see our view picture here present here successfully i am just setting here center parent pass 2 to place this in center now i need indicators here below this viewpager so what i need to go i have to create custom indicator so i am just taking a linear outside the layout with match parent high trap content and setting the orientation horizontal now close this now i need three indicator but you if you have a five images in your casual then you need to create five indicators but i have a three images so i am going to create three indicator so we will going to set the image array image images array inside our kotlin file so don't worry so first of all i need to take a card view to make a circular indicator so now give any within height so i am giving here 20 db but you can give according to your own design and then after this close this first of all and set the elevation 0 card elevation 0 dp to make it to don't show any kind of elevation on your card now one thing i want to set here margin bottom so margin bottom 50 dp is fine to place inside our on bottom and now i have to use here align parent bottom pass through so this is fine now inside this what i need here i need to take image view so image view set the layout with matching match pins because the image you parent is cardio so it is automatically going to set the height and with 20 db now we need to give an eid because we are going to change this on our run time if user swipe right if user swipe left then we have to show that indicator so we need to take the id for this so this is our indicator one so i just give the id name here iv1 but you can give whatever you want and for testing purpose i am just setting here source purple 200 so you can see our this is working fine this indicator has come here now we need to give you card corner radius 20 db to make it circular so you can see now this indicator is working fine now after this we need to set the gravity here inside our linear layer gravity center to place these items in center so this is done now our first card view is ready now close this and paste this three time because i have a three card three indicators but you can set as many now we can give here margin 5 db or 10 db is fine i think so i am just giving a modern 10 db to make us space some between these indicators paste this here and paste this here paste this here so you can see our indicator is created successfully now it is showing error because the id name is same so this is iv2 and this is iv3 so our xml file is ready now we need to create a custom item so because we are going to follow the recycler view methodology inside this project so we need to create a custom item for our viewpager so we are going to place that item on this thing and if user swipe then we have to we are going to change this item content not this entire item we are going to change the item content that same thing which you have to run in recycler view so you understand so for this let's create a custom file for this so right click on layout folder then new then layout resource file you can give any file name whatever you want so i just give a item and now click on split i am just changing here relative layout and make sure you give it to match parent match parent don't change it to wrap online but in recyclerview we are going to change it to wrap content but in this case of your picture we need to give it to match variant now after this and i have to just take my image view here set the layout with match parent and you can set whatever the height you want so i am just setting here 400 db now we need to give an id to set the content on runtime and then after this we need to set the scale type center pro if it is yours whether you want to set the scale type or not and after this enter in parent pass through then close it this item is created successfully now i give some color here for testing purpose but it is better to remove these colors because we have to set these colors on runtime so delete this delete this and there is this so you can see our indicator present here but it is not visible due to the white background and white indicator colors now what we need to create we need to create an adapter for this to manage our content inside our view pages so right click here then new then you need to select the kotlin class file now you can give any name to your adapter so i'm just giving a view page adapter but you can give whatever you want and after this now inside this what we need we need we have to take some content from activity because we are going to show view pager inside our activity or inside in a fragment so we need to pass content from that thing to our adapter so i have to just take a constructor here private valve and i am going to take images and the type of the images is list and it is a list type of integer list type because images is always of in type now this is fine you can also take it string if you want to pass the url and you want to use a glide library to load that urls it is your choice now we need to extend it with recyclerview.adapter so just you need to type in recyclerview dot adapter and take open braces just type here viewpager adapter so what is this viewpager adapter this is your class name so if you give your different class name here let us suppose you just give your adapter so you need to type your adapter so make sure this thing this name and this name must be same and after this you need to type here view pager view folder so we are we does not create our view holder till now and this is the same process which you have to use inside recycler v we have to create view holder as well so first of all let's implement its memory so select all methods click on ok so if both implement methods are implemented successfully now we need to create class so click on anywhere on your pager and it will show the red bar click on this create class view holder and just type here so you can see our class view holder is also created successfully viewpagerviewholder now it is better to delete this from here and mention it on top here and it is an inner class so it is better to give a inner keyword here now inside this what we need to take we need to take a reference of our image item in item id ib page to set the content on runtime so for this what we need we have to choose just take here item view type variable so item view you can give and name a variable item view and the type of variable is you type so we need to import this now after this we need to extend it with the recycle view dot view holder so recycler view dot view folder now inside this we need to pass our item view this variable name so this is now inside this we need to set the xml id into our caught line id so just type here val image view and the type of the variable is image view and we need to set our item id inside this so just type your itemview.find providing our.id dot ib image so this id name because we are going to render this imageview again and again on our viewpager so this work is done now we need to set the oncreateviewholder so first of all what we need to do inside this first of all i have to remove some extra space to avoid the confusion so you can see now maybe it is clear visible what is happening here so we need to write some coding part here so just take a variable of view type here valve view and just type here layout inflator we need to include the audio so from dot get context so and after this we need to indicate inflate our dot layout dot item and then after this we have a parent and a test root files so this is done now what we need we need to return this view so return view page of your holder and pass this view so this is done now inside our get item account what we need to pass we need to pass our arraylist images dot size so you can see variable image images so just type here image written dot size so this is also done and inside our onbind view holder what we need we need to set the data on our adapter or we can say our viewpages so just take a variable here and image so i have a images type array so i have to take the position of this so images position so it will give the position of the current page and after this what we need we need to set this image on our view image view so holder dot set image view image resource and inside this we need to pass our current image that's it so you can see this is very easy and adapter work is also finished now the only work is left inside our main activity.kt where we are going to change the indicator color as well and also we need to pass the images from our actually what we can see from our contain file to adapter so first of all come inside this now what we have we have a three indicator so i am just taking the variables here so you need to type here private later network and first variable is our iv one and the type of variable is image view then i press control plus t to copy this lines so if one variable is ib2 third variable is iv3 you can give any name whatever you want and a variable offer you pager type so private latent where you pager2 and the type of variable is also vpn now assign that's when i didn't over continue id so view f2 equal find uid r dot id then iv1 equal so inside ib2 i need to assign the xml id of 5v2 so you can see this code is very easy and this code is very clean so if you understand everything if you have any question you can just comment down below and if you don't subscribe the channel then please subscribe our channel so this is done now we need to pass this images on our adapter and also we need to set that adapter on our viewpager this is the simple thing so first of all let's create a variable of are a list of images type so just type here list off you can give very variable name i could just give a list images but you can give any name you don't need to pass here mention the type of this variable you can directly type here r dot drawable dot and our.drawable.com and r dot drawable dot for vg so this is done so you can see it is fine now we can delete this we don't need this now we need to pass this images variable on our adapter so first of all here create the variable for adapter so val adapter equal view pager adapter and inside this we need to pass our images so you can see it is fine now we need to set this adapter on our viewpager so viewpager2 dot adapter and just type here adapter so this is done so now if you run this application it will work fine and you can also able to scroll the between you are also able to swipe between the items of your page but it will not going to change the indicator color for you because we need to change it on runtime because we create a custom indicator for our viewpager so it is these indicators not depend on viewpager so we need to write a separate code for this how to manage that indicators so it is not a big thing we can do it quickly so first of all just type here viewpager2 dot register on page change callback inside this we need to create an object in kotlin we need to create object but in java we need to type it new keyword and it will going to show the situation now view pager too and take two value places now we need to implement memory first of all change it to constructor invocation and we need to implement its member so we need to generate its override method so right click here then click on generate and override methods and we need three method on base scroll on space selected on pay school state chain so you can see we now we have all methods now whenever user open the first time we need to call a function here below this line change color or you can give any function name i am just giving a change color but you can give any and on page scroll state change here we also need to call a function here change color this function will responsible to change the color of indicator so if user is click swipe right swipe left or whatever so we need to call this function change color so now let's create this function this function is going to change the colors for our indicators so find change color now inside this we are going to use when so when and now just type a view page up to dot current item so it will give the value of our current item so now inside this first of all if it is a zero item so it mean i am on a first page so on that time i have to show the first indicator and i have to make invisible another indicator we can say set a different color or another another indicator so just type here iv1 dots background color and then application context dot resources dot get color r dot color dot and on that i have to show my active color which is my red color but you can use any color and on iv 2 and on iv 3 what i need to show i have to show inactive color which is my grey color so this is done so this is for item 4 0 item now if i have item one and two if you have a hundred images then you have to just type this code hundred times so i have just three so i have to make only check for three conditions zero one two because indexing start from zero so that's why tk012 and if it is a current one page is active then i have to show the active color on our iv2 and not on iv1 and i have to set it to grey and on the last page i have to show active color here and i have to make it gray here so this is done so finally guys our code is ready now it's time to check our app whether the app is working or not and if it is working fine then we'll end this video and if there is error present then we will sort it so i press on on button it'll start building so gradle will successful it will going to install application install successfully so you can see our application is working fine first indicator is active because first current item is active now so if i go on second you can see second indicator active if i go on third so you can see our application is working fine so i hope guys you learned something new in this video if you have anybody if you have any questions just comment down below i will try to give them every comment please like the video please subscribe and please share the channel so thank you guys see you soon in next amazing video thank

Channel: Tech Projects

Views: 15,473

Keywords: image slider in android studio, image slider with dots indicator in android studio, image slider with viewpager in android studio, image slider with viewpager2, image slider using viewpager2, image slider with viewpager in android, image slider with indicator android studio, image slider with indicator in android kotlin, how to create image slider in android studio, how to make image slider with dot indicator in android studio, tech projects, kotlin, android

Id: N8ySWQtDD24

Length: 17min 33sec (1053 seconds)

Published: Sun Feb 20 2022