TAB LAYOUT WITH VIEW PAGER — ANDROID

Tab layout with three fragments with the help of view pager

Photo by Kelly Sikkema on Unsplash

SUMMARY:

1. Introduction
2. Project Explanation
3. Project Structure
4. Coding the tab layout with view pager
5. Building the App
6. Conclusion

INTRODUCTION

Fragments represents a reusable portion of application UI. Fragments has its own layout and also has own lifecycle. A single activity can hold multiple fragments. To navigate between those fragments we need some mechanism and there comes the Tab Layout with View Pager in rescue. The view pager has an adapter which holds all the fragments and associates each fragment with a tab.

PROJECT EXPLANATION:

Our app will look like this

The MainActivity contains a root layout as constraint layout. The constraint layout has two widgets, one is AppBarLayout and a View Pager. The AppBarLayout has a toolbar and a tab layout.

The tab layout contains the tabs and the view pager holds the fragments.

setUpWithViewPager(viewPager: ViewPager) method of TabLayout is used to connect the tabs with the fragments in the view pager.

Since we are using a toolbar, we need to change our activity’s default parent style from “Theme.MaterialComponents.DayNight.DarkActionBar” to “Theme.MaterialComponents.DayNight.NoActionBar”

PROJECT STRUCTURE:

Project Structure

LET’S CODE

activity_main.xml

Contains a constraint layout with AppBarLayout and View Pager.

activity_main.xml

MainActivity.kt

In MainActivity.kt file,

Set up the action bar using setSupportActionBar(toolbar) method by passing our toolbar as a parameter

Create two array list named fragments and tabTitles. fragments list contains all the fragments and the tabTitles list contains all the titles of the tabs.

The number of fragments in the fragment list should match the number of titles in the tabTitles list.

Passing Values to the fragments:

Create a variable named result of type Bundle(). The Bundle class has several methods to put different values inside it.

For Example, putString(key, value) this method is used to add a string value inside the bundle.

Use the proper method, to add the value which we want to transfer to all the fragments to the bundle.

MainActivity.kt

ViewPagerAdapter.kt

The viewpager adapter methods should accept values such as the fragments, tabtitles and theFragmentManager and values sent from the activity.

The viewpager adapter class should extend FragmentPagerAdapter class which requires FragmentManager and a Behaviour Flag as arguments.

We have used BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT flag. This flag indicates that only the current fragment will be in resumed (lifecycle) state and all other fragments will be in started(lifecycle) state

We need to override three methods:

1. getCount():Int
   This method returns the size of the fragments list.
2. getItem(position: Int): Fragment
   This method return the fragments associated with the position. The value sent from the activity is provided to every fragment in the fragments list by using the arguments properties of that fragment.
3. getPageTitle(position: Int): CharSequence
   This method return the tab titles associated with the position which in turn set the titles to the tabs.

ViewPagerAdapter.kt

UserFragment1.kt

The arguments property holds the data that is sent from our activity.

Since we have inserted an array list of names of type string. ArrayList<String>, in the fragments we need to use getStringArrayList(key)

val args = arguments
val myResult = args.getStringArrayList(“names”)

UserFragment1.kt

fragment_user1.xml

Contains a Constraint Layout with a TextView.

fragment_user1.xml

UserFragment2.kt and fragment_user2.xml will be similar to the above UserFragment1.kt and fragment_user1.xml file.

BUILD THE PROJECT:

Once everything set up, run the project

And Here we go

Working Application

CONCLUSION

Creating a new activity for every tasks that is to be performed on our application is not the best approach as it affects our apps performance.

Since a fragment is a reusable portion of of UI we can have as many as fragments within a single activity to perform multiple activities. However to navigate between fragments , we need a mechanism which can be either through drawer layout, or Tab layout or Bottom Navigation and so on.

Here we have implemented a simple tab layout with view pager to navigate between the fragments inside our main activity and transferred data from our main activity to fragments by using Bundle().

You can also find the source code in my Github account here.

Thanks for reading and Happy Coding 😎😎