CREATING SWIPABLE VIEWS WITH VIEWPAGER 2 - Android Fundamentals

[Music] hey guys welcome back to new video this video will be about viewpager - which is used to create survivable views and maybe you are wondering why we use viewpager - here because there is also a first version of viewpager currently you are absolutely fine to go with the first view pager but I think it's only a matter of time until Google deprecates it and wants us to use view pager - this is why I decided to show you the view pager - right away and its functionality is actually very similar however with view pager - you have more possibilities you pager - works very similar to a recycler view and we also need to create a recycler view adapter for it if you don't know about recyclerview adaptors then I suggest you to watch my video about recycle abuse first because I won't explain the adapter class in detail in this video as this videos focus is on view pager view page' - is not contained in the android standard library instead we need to add the material design dependency to include it to do that lets go to our built at Gradle module app file and double click it then scroll down to that dependencies block and just paste what I pasted here I will also include that implementation here in this video's description so you can just copy and paste it afterwards click on sync now so Gradle will sync your project and then we are fine to go and now we can use the view pager - next let's jump into our activity main.xml file and set up that view page at you so let's open a new tag here and write view pager and you can see here this is the view pager - that we want to use don't use this normal view pager that first one because I want to make this video about view pager - press enter here layout width is match parent and layer height is also match parent I will give it an ID of view pager and close that tag off then we can go into our design tab and set the constraints click on that new pager click on those two bars constrain it horizontally in parent and vertical in parent now we need to create an XML layout file to define how our swipeable useful will look like so let's go to our layout folder right click new layout resource file and I will name it item view pager and I will choose a constraint layout as root element if you've done that click on OK Android Zoo you will create the layout file then we can jump into that text tab and to keep things simple I will just add a single image view here but of course you can create more complex layouts for your view pager so I'll open a new tag here and write image view settle the layout width to 300 GP and the layout height to I will give it an ID of IV image and then close that tag off jump into that design tab and set the constraints constrain it horizontally in parent and vertically impaired and what is really important for view pager is if you take a look here in our constraint layout which is our route layout for recycler view we were tempted to set the height of our route layout to wrap content so it is only as high as it needs to fit our image view but for view pager that won't work instead we need to set it to match parent so it fills the whole page and now I will just paste some images from my hard drive in my drawables follow to show them later in the image views and of course you can just paste your own images so I will open my drawable folder and press ctrl V to paste my images then press ok ok again and there are my images that I want to have in my view pager the next step is to create a recycle of your adapter that is needed to create our swipe over views and set their data so in our case to set the images to our image views to do that lets go to our app package and create a new Kotlin class select class here an hour call it view pager adapter this adapter class will take a list of images in its constructor so we know which images we have to set to our image views so well images and there is a list of integer and you're maybe wondering why we use a list of integers here if we want to have images but because we added our images to our global folders then we can get those images with their ID so that we have to write our the drawable dot and then your image name and that expression is an integer next we need to go into that class here and create an inner class for that view holder and as I said if you don't know what a recycler view view holder is and an adapter for recycler view then please watch this video about recycler view first because I won't explain all this in detail in this video so let's write inner class view pager view holder that takes an item view as a parameter in the constructor which is a view and it inherits from recyclerview dot view holder and this view holder takes this item view that we just passed through the constructor as a parameter so just pass item view here next we need to define that this view pager adapter class is actually a recycler view adapter so we do that by inheriting from recycler view dot adapter and this takes as a generic parameter our view holder which is our view page of view holder and make sure to call the constructor on that one then we can go into our view pager adapter class press ctrl I to implement the three functions that recycler view adapter needs select all those functions and press ok and Android studio will insert them I will remove all those traduced let's start with that oncreateview holo function where we just want to inflate our layout item viewpager other xml to actually show it in our view pager adapter so let's right right well view is equal to layout inflator dot from and now we need to get the context from this parent parameter because we don't have the context in an adapter class by default so let's write parent lot of context and after that dot inflate now we need to specify the layout file that we want to inflate here so r dot layout dot item view page' then we need to pass our parent and we don't want to add to attach this to our route layout so we pass false and then we need to return an instance of our view pager view holder and pass or just created inflated view in that in its constructor in the get item count function we can just return the size of our images list so return images dot size because this is the amount of different items we have in our view pager and finally in our on behind view holder function we need to set our images to our image views so let's first get the image without current image is equal to images so our list at the index of position so we just get the current image ID from our list and then we can refer to our image view by writing holder dot item view dot 5e image and call dot set image resource on that and as you can see it takes a resource ID which is an integer and our list also contains integers so we are trying to do that let's write current image and that's it for our view pager adapter class now we need to go into our main activity and actually create that view pager adapter and set it to our view first I will create a list of my image resources so of those IDs and you of course need to paste your own IDs here so however you call your images so as you can see I just created a list here and pasted are the drawable dot and then your image names in it and then I created a list of those seven images so we can set them to our image views in our view pager adapter afterwards we want to create an adapter for that view pager and that is equal to a new instance of view pager adapter which takes in the constructor our just created image list then we can write view pager chart adapter and set its adapter to our just created adapter and we can run our app and as you can see we are able to swipe through our images and if the last image is reached then we can't swipe further but we can swipe in the other direction until we hit the first item and then we can swipe further if you want to switch the orientation of our view pager then that's very easy to do so if you want to be able to swipe vertically instead of horizontally then you need to just right view pager the orientation is equal to the view pager to dot orientation vertical to give the first view pager that vertical swipe behavior that was actually very complicated to do and this is much easier for view pager to now so if we run that app again now we are able to swipe vertically like tic toc hazard for example we can also simulate fake drags so that we can swipe programmatically without the user needing to swipe we can do that by writing view pager dot begin fake drag then we can write your page or fake drag by and here we need to give it an offset of how strong we want to drag I will just set it to minus 10 F here so that just means that we want to drag to the left because we have that minus there it wouldn't make much sense to drag to the right because there are no items left of our first items and afterwards call viewpager dot and fake drag and if we now run that app you can see that it simulated a drag that I didn't you so I hope this video was helpful for you if so please leave a like and comment below also if there is anything you didn't understand then just ask your questions in the comments so I can answer them have a good day see you in the next video bye bye

Channel: Philipp Lackner

Views: 33,613

Keywords: kotlin, beginner, android, android studio, programming, development, app, 2020, tutorial, newbie, swiping, viewpager2, viewpager, ui, ux, xml

Id: -wB_JE_PRTo

Length: 11min 55sec (715 seconds)

Published: Wed Mar 11 2020