ViewPager2 in Android Studio using Kotlin | Android Knowledge

foreign welcome back to my channel in this video we will be creating view pager 2. so view page 2 basically allows the user to swipe up or down or maybe left or right through the pages and why is it pager 2 because it's an improved version of viewpager one got it let's make it more clear with an example so consider Tick Tock or reels or maybe shots all of this vertical video works by swiping up or down right I have already created shots using viewpager 2 in one of my previous video you can click on the I button to watch let's take in another example maybe a Tinder that's a great example of upager right how does it works by swiping right or left on the profile I hope you got my point now view pager also have varieties like creating with text or images or videos or maybe a custom view pater but all of them will have a same set of steps like adding view pager in XML then creating a specific layout file then creating adapter view holder three methods and that's it as this series is for beginner we will go for simple view page with text that can be swiped right or left so with that said let's create the project choose empty Wheels activity then click on next name it as view page or text and click finish first we will do the prerequisites this is all optional if you want you can directly skip to activity main.xml now go to colors.xml press Ctrl D to duplicate the line name the color as blue and hex code AS 1a9df1 then go to themes.xml uncomment this line and give the color as blue press Ctrl D to duplicate the line and write the item name as color primary variant then again duplicate the line and write the item name as Android status bar color and that's it now I'll be adding a background in the drawable copy the image and paste it in the drawable this is just a rough idea to show you that how can you use text view pager okay so this is where we will add a text which we can swipe left or right see the background will be as it is okay only the text will be able to swipe left or right got it now let's proceed further go to activity main.xml add view page to keep the width and height as match parent then give it an IDs view pager and then our background and that's it remember we used to create specific item layout for Recycler view same way we will be doing it for viewpager as well so right click on layout then new and then layout results file name it as page layout keep it as linear layout and click ok now whatever element you want to make it swipeable you have to mention it over here got it like I want to create a text that is swipeable so I'll create a text view maybe you want to create an image that should be swipeable so create an image view or maybe you want to create a swipeable text view as well as image view both you can do that too getting my point so now let me quickly create the text View and then I'll explain you it's almost done but to make it look more fancy I'll be adding a custom font that is popping so go to design click on text View and then search over here and spawn family click on the Arrow crawl till the last and click on more fonts choose Poppins regular and click OK and that's it so I have named the text view as pager text and added all the other necessary attributes and done now let's go to main activity this is where we will set our adapter create view holder and many more thing so to make it simplify let's divide it in 6 steps let me tell you all the steps in short so first we will declare all the variables then we will create few pager adapter then we will create view holder then next we will create a list of text then adding all the three methods and then lastly set the adapter that's it so now let's do it step by step step number one declare all the variables so in our case we will be declaring view page 2 and view pager adapter so let me quickly do that [Music] and it's done now step number two create a view pager adapter so class view pager adapter then recyclerview dot adapter and inside that we will add view holder which we have not created it yet so let's create it in a step number three Class View holder then add a parameter as item View then again recycler View Dot View holder and then mention the parameter which we just created that is item View now inside that we will attach the text view that we created in page layout with its respective variable so first declare it as private well pager text as text View then initialize it as item view dot find view by ID and mention the IDS pager text then we need to create a function named as bind and we will create a parameter as item whose data type is string now after all of this write pager text and with the help of text that is basically our set text set it on the item variable and that's it now step number four create a list of text so inside the viewpager adapter I will write private well item list and then a list of now inside the list of I'll mention three texts so when you swipe left you will see the second text and then again when you will swipe left you will see the third text got it same way when you are at third tanks and if you will swipe right then you will see the second text got it right so let me quickly write it and it's done then step number five create view pager adapter three methods so click on Implement members select all of them and click ok now we have three methods that is on create view holder on bind view holder and get item count so in oncreate view holder we link the layout file using layout inflator so write well View is equal to layout inflator Dot from parent dot context and then inflate the page layout which we created give it as parent and attach to test files then lastly it will return The View now inside the online view holder we set the position of the element right so right well item is equal to item list that is a list of text with position so basically item variable will store all the position of the item list got it then lastly with the helper folder we will attach our pager text that is inside the bind function to the item in short we have attached the pager text with the respective position in the list then third method that is get item count this is our eighth video from the series so till now you should be aware what do we do in the get item count if still not aware about it so let me tell you so in get item count we return the size of our list in our case our list is item list so item list dot size and that's it now step number six and our last step set the adapter so first initialize the view pager then we created pager adapter variable right so inside that pager adapter we will call our view pattern adapter class then lastly set the pager adapter on view pager using adapter that is basically a set adapter and that's it we are done with the coding now let's run the app this is how it looks now I'll swipe left and see the text is changed while the background is as it is again I will swipe left and text is changed perfect now I will swipe right see back to the previous text perfect same way you can do it for image text videos anything got it I have also created onboarding Pages using view pager 2. you can click on the I button to watch so yeah that is it for the video if you are new to this Channel please consider subscribing to my channel and I'll see you in the next video [Music] foreign

Channel: Android Knowledge

Views: 2,148

Keywords: viewpager in android studio, view pager android, how to use viewpager in android studio, viewpager in android, android studio, viewpager in android example, tablayout android studio, android studio tabs, tablayout in android studio, learn android, android tutorial, viewpager, tablayout in android studio example, tab layout in android studio example, viewpager2, android swipe tutorial, android viewpager fragment, android tabs, learn android app development, android tablayout

Id: K36QqLnXqG8

Length: 13min 59sec (839 seconds)

Published: Thu Jun 22 2023