Tab Layout with Fragments in Android Studio || Tab Layout with ViewPager || Tab Layout || 2021

hey there everyone welcome to another video fox android so in this video we're going to learn how to implement a tab layout along with the fragments into our android application right so let me just give you a demonstration of what we're going to get by the end of this video so if you can see on my wall screen there are three tabs that says chats status and calls right so if i just swipe it left so you can see i can navigate to different tabs right and we do not change the activity we feed these tabs with the fragments so this is what we're gonna learn by the end of this video so if you want to learn this make sure you watch this video till the end so without wasting any time let's get started [Music] so guys if you're new to this channel make sure to hit that subscribe button and press the bell notification icon for receiving the notification of the upcoming videos and by the end of the video if you like the video make sure to hit that thumbs up button as well so first we're gonna design the front end part so for that first we need a tab layout right so let me insert a tab layout so i'm gonna construct it horizontally and vertically to the parent so let me go to the split window so here we'll change the name of the tabs so first one is chats the second one is status the third one is calls right and now we need the let us give it a id as well let us call it a state tab layout only and now we need a viewpager so inside this viewpager we gonna feed our fragments in real time rate so the width should be match parent and the height is wrap content so we'll construct it to the parent horizontally and vertically the bottom should be constrained to the parent but the top should be constrained to the bottom of this tablet right and we'll give it the id let us call it as view pager only you can give whatever id you want to so that is all we need to do in this xml resource file so for feeding the fragments i'll create three fragments so just right click on the app go to new fragment and blank fragment so this way we gonna add three fragments so let me quickly do that it's okay let us come here and let us change this text to tab one and let us set the graph gravity to center the color of the text should be black this size should be 30 dpi yes or maybe 40 db yeah perfect okay let me copy this and paste it to the another two fragments let it build we'll just paste this and we'll change it to tab two we'll do the same in this as well so now we're gonna go to the java code so we do not want all of this right so let me delete this till here we just need this method right on create view except that we can delete everything so if you do not want to add fragments by the id and you want to create it yourself so you just need to create a layout resource file and the java class that that implements fragments and you need to override this on create view right save some time i added these fragments in this way so okay we are good to go so now to feed the data inside this viewpager we need to make a adapter so i'll just create a adapter class we'll call it as vp adapter now this will extend the fragment page adapter right just click here press alt enter implement methods and we're gonna implement these two methods right and now we need to create a constructor so alt enter create constructor and click on the second one because the first one is deprecated you can work with that as well so let us not use that so now here we need to a list so the first list will contain the elements of fragment type so let us call it as fragmentary list so new released and the second one will contain the strings right so basically their strings will be any segment type the right so first we're gonna override this method get item count right so here we gonna return fragmentary list dot size and inside this cat item we're gonna return fragmentary list dot get we will get the fragment according to the position so we're gonna pass the position here we need to create a method that will add the fragments from our main activity to this arraylist segment fragment and the string type title rate so inside this method fragmentary list dot add fragment and fragment title dot add title it so we need to overwrite one more method that is in cat page title so we'll return the title from this fragmentator or illustrate so that is all we need to do inside this adapter right now we'll go to our main activity so here we need to declare two variables the first one is for the tab layout let us call it as tab layout only and we have a viewpager as well let us refer to these view elements now we're gonna set the view pager along with the tab layout that will be or this view pager right so let us create the object of adapter class so we'll call it as a vpn only so we'll create the object for the same so first we're gonna pass the get spot fragment manager and then we're gonna pass this fragment page adapter dot behavior resume only when current fragment right so let us now use that method add fragment so vp adapter dot add fragment and we'll create a object of all the fragments and we'll pass the title as chats status and calls so let me quickly do that now we're gonna set this adapter to our view pager and we are good to go now let me quickly install this app to my cell phone and check if it is working fine or not right okay the app has been installed to my cell phone as you can see on my mobile screen i just swipe it left and right i can navigate to different tabs so i guess we have successfully implement this feature to our android application and i hope you guys have understood the code in case of any doubt you can always ask me in the comment section i can dm your instagram the instagram username will be there on your screen right now if you like the video make sure to hit that thumbs up button and if you're new to this channel make sure to hit the subscribe button and press the bell notification icon for second notification of the upcoming videos so that is it for today's video see another video bye [Music] [Music] you

Channel: Foxandroid

Views: 15,413

Keywords: tablayout in android studio, tablayout in android studio example, tab layout in android studio example, tablayout android studio, how to create tablayout in andro, android tab layout, android tabs, android tabs with fragments, android tabs layout, android tabs fragments tutorial, android tabs in activity, android tabs example, android tablayout, android tablayout with fragments, android tablayout tutorial, android tablayout example, android studio tabs, fragmentpageradapter, 2021

Id: ziJ6-AT3ymg

Length: 11min 3sec (663 seconds)

Published: Sat Apr 24 2021