Hello world, today we are going to see how to make a swipeable view using
ViewPager2 and TabLayout. We will see how to use fragment and how to sync tab layout indicator with ViewPager2 swipes. We will set the tab layout title to the tabs and then inflate our views in viewpager. Let’s look at the finished app in the below gif.
To make the swipeable views, first, we need to add a required dependency for
Add Dependency for TabLayout
Open your build.gradle file app level and in the dependency section and add these dependencies. We need this dependency to use TabLayout.
our activity XML file.
Add TabLayout and ViewPager2 in Activity XML
Add the below code in the activity_main.xml or your activity xml file.
In the above code, we have added the TabLayout with some attributes
We set the minimum height to the TabLayout and after that, we set the
Then we set the text color of the tab title which we will go to show then we add tab selected text color then we set the tab indicator color that tells us that which is active now. Then we set tab mode to fixed because we will have only 2 tabs if you have more tabs then you can add scrollable property.
ViewPager2 is simple here nothing fancy.
Next, we create 2 fragments.
Make fragment for the ViewPager
First, we made a fragment folder where we will create our all the fragments.
We will make 2 fragments for our app.
To make the fragments we will right-click on the fragment folder which we
created above then click on new then fragment and select the blank fragment.
The first fragment name will be HomeFragment and the second fragment name will
We removed all the code except the onCreateView method.
In the fragment xml, we have just a textview just for demo purpose of course
you can add your elements and write your login in fragment java file in the
Now we need to make an adapter for the viewpager.
Make Adapter for ViewPager
Make a new java class file and extend it to FragmentStateAdapter and implement the required methods. Then we make constructor with the parameters of
FragementActivity and the List of the Map of String and Object.
And also we made a function getTitle to get the title from the list of maps.
See the below code to understand.
We re passing the list of maps and this map has our fragment title and
In the getTitle method, we will return the title value which we will pass in
the adapter constructor.
Now let’s connect these all the fragments and the viewpager in the
Connect Adapter and TabLayout to ViewPager
Now the main thing comes.
First, we get our viewpager, and then we made a list of maps to pass in the
We have created a function with the arguments that returns the map of fragment
title and fragment.
We store this returned map to the new map. the first map is for home fragment
and the second map is for setting fragment.
Then add these maps to the list and finally, we instantiated our adapter and
pass the required parameters.
The first parameter is activity and the second parameter is for the list.
Now let’s make the tabs and sync with the viewpager.
Make and Sync Tabs with ViewPager
To make the tabs we will use the TabLayoutMediator object and it accepts 3
The first parameter is for TabLayout, the second parameter is for Viewpager
which will be sync to the tabs and the third parameter is an interface of
After adding all the parameters we are setting the tab title by calling the
setText method and in the parameter we car calling the adapter’s getTitle
method which we made above.
After that, we need to call the attach method to the TabLayoutMediator.
Now run your app and your viewpager with the tabs will work just fine.
If you learned something new then do share it with your friends and batchmates
and don’t forget to subscribe to our newsletter if you haven’t joined already.
Thanks for reading have a nice day.