‫Welcome back.
‫In this video, we'll learn how to create and implement this tab layout and connect the tab layout with
‫the viewpager, allowing the user to navigate between the different fragments using the tabs tab layout
‫is often added to provide visual tabs that users can tap on to switch between different sections or
‫pages represented by fragments.
‫The first step is to add the layout of the tab layout in the main activity, and here, in order to
‫create it, I'll go to the main activity and I'll start with the tab layout and capital T and select
‫comm dot Google dot Android dot material dot tabs dot tab layout.
‫I'll select matchparent for the width and wrapcontent for the height.
‫Then I'll switch to split mode and you can see this is the tab layout appeared in the above.
‫I'll add the id of this widget as tab layout.
‫I'll infer the constraints.
‫Oops, I'll remove this constraint of the Viewpager two and here I'll infer the constraint to it and
‫remove this button constraint.
‫So I have this left constraint, this right constraint and this above constraint.
‫Then I'll click on the viewpager constraint and I'll set the layout height to zero in order to fill
‫this space.
‫So this button constraint, left constraint and right constraint is set.
‫Good.
‫But the above constraint of the Viewpager two will be set to zero to match the and fill this entire
‫screen under the tabs layout.
‫So you can see here it's better.
‫This is the viewpager and this is the tab layout.
‫Then I'll move to the main activity and I'll initialize the tab layout tab layout tab layout.
‫Import the package of the material dot tabs from the android.com dot Google and I need to initialize
‫this tab layout tab layout equal.
‫Find the view by ID or id dot tab layout.
‫Till now it's very simple.
‫I want from you to focus with me now because I'm going to link the tab layout with the viewpager and
‫display the number of the fragment in the tab layout I'll use to connect tab layout with Viewpager the
‫tab layout mediator instance.
‫So for that I'll start with new tab layout mediator and tab layout.
‫Mediator is a utility class provided by Android library to simplify the integration of tab layout with
‫the Viewpager two.
‫When creating tabbed interfaces, it allows you to connect the tab layout and viewpager to so that the
‫tabs in the tab layout correspond to the pages or fragments in the Viewpager two.
‫For example, here I need to pass.
‫If we click control and left mouse, we can go to the tab layout declaration and I need to pass in the
‫constructor here.
‫Tab layout instance Viewpager Instance and tab configuration strategy three Parameters.
‫I am teaching you in this course how to think, How to create your own apps, how to face problems,
‫how to solve these problems by your own.
‫So you need to think like me.
‫Go to the tab layout mediator Check What is the declaration?
‫What parameters that I need to pass in the constructors of the tab layout in mediator or other classes
‫here I need to pass a tab layout instance and I created this tab layout before which is here.
‫So tab layout.
‫This is the first parameter.
‫The second parameter is an instance from the Viewpager and the viewpager I created here.
‫So Viewpager.
‫The third parameter is tab configuration strategy.
‫You can use the old school way, which is new tab layout mediator, the tab configuration strategy and
‫you implement this on configure tab that took two parameters tab and position.
‫Or you can simply use a lambda expression like this tab and position.
‫These are the two parameters like this tab and position.
‫And here you set the tab titles and other customization if needed.
‫Again, tab layout mediator is initialized with three parameters tab layout the layout that you want
‫to connect with the viewpager to.
‫It's where the tabs will be displayed.
‫The Viewpager which is an instance.
‫Off the viewpager to widget.
‫It represents the content that the tabs will navigate and tab position.
‫This lambda expression allows you to customize the tabs for each tab corresponding to a fragment.
‫This lambda is called with two parameters the tab and the position the tab.
‫This parameter represents the current tab.
‫In the tab layout you can customize its appearance, text icons and etcetera.
‫The position.
‫This parameter represents the position of the fragment within the Viewpager two and you can use it to
‫determine how to customize the tab based on the fragments position.
‫Later on.
‫When we talk about the the lambda expressions in details in Java and in Android, I'll set it, but
‫you can use new tab mediator dot tab configuration strategy and you can implement this on configure
‫tab.
‫And you can see we have these two parameters, the tab and the position.
‫Again tab represents the current tab in the tab layout and the position is the parameter representing
‫the position of the fragment within the Viewpager on configure tab, you can customize and set the tab
‫titles and other customizations.
‫The tab dot set text to fragment and here I'll get the position of the fragment and I'll add number
‫one because the counting of the tabs starts from zero.
‫So for that I'll add one to set for the tab position number one to be displayed as a fragment.
‫Number one, not zero.
‫Then I'll call this method called attach dot attach.
‫The attach method is called at the end to attach the tab layout mediator to the tab layout and Viewpager
‫two.
‫This is when the mediator starts to sink the tabs with the pages or fragments in the viewpager two.
‫After calling attach method, you will see tabs in the layout in the tab layout corresponding to the
‫pages in the Viewpager two.
‫Let's run our application and congratulations!
‫You can see fragment and this is the position of the tab number two three.
‫And also you can swipe and you can see the navigation of the tabs is working perfectly.
‫This is how we implement the tab layout with Viewpager in Android.