How to make Tabs with swipeable view in Android [2020]

Make Tabs with Swipeable Layout using ViewPager2 and TabLayout

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 our project.

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.

After adding and syncing the project. Let's add TabLayout and ViewPager2 in 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 properties.

We set the minimum height to the TabLayout and after that, we set the background-color.

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 be SettingFragment.

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 onViewCreated method. 

Now we need to make an adapter for the viewpager.

See also: Make Dark Theme In App

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 fragment.

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 MainActivity.java.

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 adapter's constructor.

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 parameters.

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 TabLayoutMediator.TabConfigurationStrategy().

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.

Share this Article 👇

Subscribe to our Newsletter

By subscribing to our newsletter you're agreeing with our T&C.