 Hello guys, so today we are going to design a tab activity with the help of some tab layout view pager View pager adapter and fragments. Okay, so we'll design the application like WhatsApp where we can swipe left or right Fine, so we will try to add three tabs like chat status and call Okay, so let me quickly do what? Add a design part over here. So what we need in a design first of all, we have a linear layout That's fine. Now we need to create a tab there. Okay, so that's credit tab Layout so we will find it over here so you can give it Width as match parent and height as rep content So this would be what this would be holding your tabs So let's assign it some idea as well. So that's a tab Layout and then we need what we need a View pager fine So view pager is actually attached on the top of this tab layer Where we can swipe left or right with the help of view pager So this view pager actually is what it is a layout manager that allows you to flip left or right throughout your pages So your pages would be what your pages would be in the form of fragments So let's add a view pager. So we have view pager two as well. Let's try with the view pager this time So you can try So height you can use your whole height Fine. So for better, we can give it design as well. Background color. Let's give it some ID. Let's say view pager View pager and for better, I can give it a background color as well. Let's give it something some hash code So you can change it from here. I just give it a light red color and The view pager would be of any color. So you can see here the view pager is Holding your whole space and this tab layout is holding just this part of your screen So this gonna show you multiple tabs over here the titles of the tabs and this gonna hold Your fragments to show different different pages. Fine Okay, that's all. So design is complete. And now before moving ahead, we need to create a fragment as well So on a one page, we will be displaying one fragment on second page. We will be displaying another segment and so on So let's create a new right click here New and I just create a fragment. So I will say blank And we can name it as what you can give it. Let's say we need to create three fragment. So I will say what first of all chat like So we need a Java file as well. Just finish it. Okay, so once you do this You will be able to see the design part as well as coding part. So what I do is I will remove the Extra code over here the commands and everything. So what we need? We need only One method that method is for create view Nothing else is required. Okay. So this is actually responsible for inflicting your fragment So let's remove everything and we can Move to the design part. So you can also customize it. So what I'm going to do is I will just try to convert it into linear layout And I will just display the text over here and simply saying what? And simply I'll say that chat fragment. Okay So let's change to chat For like mint and for better we can give it some size as well. So I will empty the text size to let's say 28 sp is fine and I just want it in the center. So I just make it wrap Wrap So I will reuse this fragment and I will just change the thing So we need a gravity so that I can align my Text into the center. So that's fine. One more thing I will add over here. I will just give it a background Okay So let's give it a background color over here with the help of background And I just give it some random color So export You can click on this box and change the color. Whatever you want Let's say this would be my Background color for this fragment. Fine. So we have done with the design Nothing is required to be changed here. That's fine. Now. What I will do is I just copy paste this code Okay, so chat fragment is there. Copy this paste it and this one gonna be my status Okay, so here I will say what instead of writing chat. I will say State does fragment and I just change this color as well so that you can differentiate the pages So that's fine and same way. I'll just copy this and I will create one more fragment that would be my call fragment Again, just go to the design part change it to call fragment and change this color as well Click over here and I'll just take it to some less color. That's fine So design is ready. Now corresponding java files are also required so that you can integrate the view I just copy this pasted and this one gonna be my status fragment Don't forget to change this They are five so this one would be my status Save this I again copy this paste this and this one gonna be my call fragment and don't forget to change this to Call So my fragments are ready to be displayed. Okay. Now design is ready. Everything is fine. Let's move to the coding The first and the foremost thing we need to initialize my view so that I can get the reference over there So I just use this Here iris so let's create private tab layout So tab layout and the second one is private view pager That is view pager and Okay, so we need to initialize it. So what I do is I just create here init method In it views this gonna initialize my Views with the corresponding id's from this. So let's create this method and simply say what tab layout is equal to find view by id r dot id dot Tab layout and same way I will do with our view pager View pager is equal to find view by id r dot id dot view pager Okay. Now these two things are ready. Now what I need I need to use view pager Where I will display the pages The problem is that we cannot directly display data to the view pager For that we need to use a adapter. Okay. So let's create another class named adapter class right click new Java class. So I will name it my view pager adapter Okay, so this class should be extending the view pager adapter View pager Adapter do we have any view pager adapter? No. So, uh, actually we are working with the fragment. So you need to extend fragment pager fine so once you extend this You need to implement its method because it is a abstract class. So let's quickly overwrite the methods that we have not Implemented yet. Fine. Now still you will be able to see some methods Some errors over here. So here you need to override one constructor as well. So let's create a Two constructors are there. You can use any of these. The first one is deprecated. So we will try to use second one Okay, now errors are resolved Now what you need to do here is this adapter gonna display your data into the view pager So this gonna hold some list of fragment to be displayed Fine. So let's get item method gonna return you one fragment. So that means you would have a list of fragments So we would have three tabs. So that means I will be holding multiple Fragment, so I will do what I will just create a array list. I will create a private array list Of what type fragment type? Okay, so let's create this uh fragment Do it x and this I will name at fragment Fine And that's fine. Now we also need to display the titles on the tabs that on which tab you are whether you are in a chat tab Straight to tab or somewhere else. So same way I will create one more list of titles So this gonna be of same time fine So in the constructor, I will be initializing this is new error list and Same way I will do with titles as well. Otherwise, we will be getting null pointer exception if you're not doing this So don't forget that Okay, so done with the constructor is done. Now this is gonna return you this guide item gonna return you one fragment So from where you will be getting fragment from this So I will say what fragments dot get So here you will be getting by default one index that is positioned so we can pass it here Same way for int get count gonna give you number of Fragments, okay number of tabs. So how you will get this again? You can simply say fragments dot Do we have any size? Yes, we have a size Done So once you call this um internally it would be calling to attach this data with the fragment adapter Pager adapter So what to do is uh, we need to display titles as well for that we need to override on method That is The method name is something title page So see get page title There is a method. So this should not return super dot get page title. This should return what titles dot get and pass it the index that is positioned So your adapter is uh ready fine No, one more issue is there So this adapter is fine. It is returning you one fragment. It is counting it and it is returning title But where you are passing data to this So for that what I can do is I can create one more method that say void add fragment So where you can pass some fragment Okay And once you pass the fragment to this you need to add that fragment to fragments Okay, so simply say fragments dot add that is fragment Okay, uh, but the problem is that we are not taking any title somewhere. So let's create one more argument over here Of string type and simply assign this title to titles as well titles dot add I'm missing something Okay, so actually I have given the same name. So I just change it then you would be better writing this So title that's all. So your adapter is complete fine Now you have almost done everything if you have done this So simply go back to your activity main activity So what you have to do here is very simple thing So first of all you need to initialize your views. We have already initialized Now you need to create adapter over here. So how do you create a adapter? So name of the adapter is my view pager adapter. Let's say adapter is equal to new my view pager adapter But here you need to pass two things The first one is fragment manager if you can recall here First one is your fragment manager. Second one is behavior. So behavior will be letting you know the state and State of your fragment and if you talk about your fragment manager, it will actually interact with adapter So how do you get it? Fragment manager. So simply there is a method get sport fragment manager So this one I return your current fragment manager and the behavior you will be getting from You can get it from your constants. So let's Do what fragment Pager adapter. So here is one one of the behavior that you should use Okay, the zoom only current So this is going to create a adapter Okay, this is going to create a initialize views creating Adapter so once your adapter is ready. What do you need to do? Set adapter To view pager. Okay. So how do you set it? So simply say view pager dot set adapter. Do we have yes, let's pass this adapter Now your view pager is ready with data Now this view pager you need to set up with a layout so that it should work properly. So simply say what tap layout dot set Up do we have any view pager set up with view pager? Okay, so it's simply pass your view pager over here. Okay So you are doing what? set tap layout With view pager. That's all Now you need to add data to adapters. So simply say what? adapter dot There is a method add fragment we have creator for adding a fragment. So which one you want to add first Let's add a chat fragment first. So new Chat fragment and give it a title as well chat Same way you have to set data for other fragments as well. Second one is status and third one is call and change this to call fragment And change this to status fragment. That's all Now once you run this again, you will be able to see everything is working fine Just wait for a while and almost done Okay, here you go So you can see swipe swipe Go here. Go here. Go here. So that's all. I hope you like it. You can find the code in description That's all