46. Creating a Tabbed Interface using the TabLayout Component

The previous chapter outlined the concept of material design in Android and introduced two of the components provided by the design support library in the form of the floating action button and the Snackbar. This chapter will demonstrate how to use another of the design library components, the TabLayout, which can be combined with the ViewPager2, FragmentStateAdapter, and TabLayoutMediator classes to create a tab based interface within an Android activity.

46.1 An Introduction to the ViewPager2 Class

Although not part of the design support library, the ViewPager2 class is a useful companion class when used in conjunction with the TabLayout component to implement a tabbed user interface. The primary role of the ViewPager2 class is to allow the user to flip through different pages of information where each page is most typically represented by a layout fragment. The fragments that are associated with a ViewPager2 instance are managed by an instance of the FragmentStateAdapter class.

At a minimum the pager adapter assigned to a ViewPager2 declaration must implement two methods. The first, named getItemCount(), must return the total number of page fragments available to be displayed to the user. The second method, createFragment(), is passed a page number and must return the corresponding fragment object ready to be presented to the user.

46.2 An Overview of the TabLayout Component

As previously discussed, TabLayout is one of the components introduced as part of material design and is included in the design support library. The purpose of the TabLayout is to present the user with a row of tabs which can be selected to display different pages to the user. The tabs can be fixed or scrollable, whereby the user can swipe left or right to view more tabs than will currently fit on the display. The information displayed on a tab can be text-based, an image or a combination of text and images. Figure 46-1, for example, shows the tab bar for an app consisting of four tabs displaying images:

Figure 46-1

Figure 46-2, on the other hand, shows a TabLayout configuration consisting of four tabs displaying text in a scrollable configuration:

Figure 46-2

The remainder of this chapter will work through the creation of an example project that demonstrates the use of the TabLayout component together with a ViewPager2 instance and four fragments.

46.3 Creating the TabLayoutDemo Project

Select the Create New Project quick start option from the welcome screen and, within the resulting new project dialog, choose the Basic Activity template before clicking on the Next button.

Enter TabLayoutDemo into the Name field and specify com.ebookfrenzy.tablayoutdemo as the package name. Before clicking on the Finish button, change the Minimum API level setting to API 26: Android 8.0 (Oreo) and the Language menu to Java.

Once the project has been created, load the content_main.xml file into the Layout Editor tool, select the NavHostFragment object, and then delete it. Since we will not be using the navigation features of the Basic Activity template, edit the MainActivity.kt file and modify the onCreate() method to remove the navigation code:

@Override

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

 

    binding = ActivityMainBinding.inflate(getLayoutInflater());

    setContentView(binding.getRoot());

 

    setSupportActionBar(binding.toolbar);

 

    binding.fab.setOnClickListener(new View.OnClickListener() {

        @Override

        public void onClick(View view) {

            Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)

                    .setAction("Action", null).show();

        }

    });

}

Finally, delete the onSupportNavigateUp() method.

46.4 Creating the First Fragment

Each of the tabs on the TabLayout will display a different fragment when selected. Create the first of these fragments by right-clicking on the app -> java -> com.ebookfrenzy.tablayoutdemo entry in the Project tool window and selecting the New -> Fragment -> Fragment (Blank) option. In the resulting dialog, enter Tab1Fragment into the Fragment Name: field and fragment_tab1 into the Fragment Layout Name: field. Click on the Finish button to create the new fragment:

Figure 46-3

Load the newly created fragment_tab1.xml file (located under app -> res -> layout) into the Layout Editor tool, right-click on the FrameLayout entry in the Component Tree panel and select the Convert FrameLayout to ConstraintLayout menu option. In the resulting dialog, verify that all conversion options are selected before clicking on OK. Change the ID of the layout to constraintLayout.

Once the layout has been converted to a ConstraintLayout, delete the TextView from the layout. From the Palette, locate the TextView widget and drag and drop it so that it is positioned in the center of the layout. Edit the text property on the object so that it reads “Tab 1 Fragment” and extract the string to a resource named tab_1_fragment, at which point the layout should match that of Figure 46-4:

Figure 46-4

46.5 Duplicating the Fragments

So far, the project contains one of the four required fragments. Instead of creating the remaining three fragments using the previous steps it would be quicker to duplicate the first fragment. Each fragment consists of a layout XML file and a Java class file, each of which needs to be duplicated.

Right-click on the fragment_tab1.xml file in the Project tool window and select the Copy -> Copy option from the resulting menu. Right-click on the layout entry, this time selecting the Paste option. In the resulting dialog, name the new layout file fragment_tab2.xml before clicking the OK button. Edit the new fragment_tab2.xml file and change the text on the Text View to “Tab 2 Fragment”, following the usual steps to extract the string to a resource named tab_2_fragment.

To duplicate the Tab1Fragment class file, right-click on the class listed under app -> java -> com.ebookfrenzy.tablayoutdemo and select Copy. Right-click on the com.ebookfrenzy.tablayoutdemo entry and select Paste. In the Copy Class dialog, enter Tab2Fragment into the New name: field and click on OK. Edit the new Tab2Fragment.java file and change the class name, then modify the onCreateView() method to inflate the fragment_tab2 layout file:

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

                         Bundle savedInstanceState) {

    // Inflate the layout for this fragment

    return inflater.inflate(R.layout.fragment_tab2, container, false);

}

Perform the above duplication steps twice more to create the fragment layout and class files for the remaining two fragments. On completion of these steps the project structure should match that of Figure 46-5:

Figure 46-5

46.6 Adding the TabLayout and ViewPager2

With the fragment creation process now complete, the next step is to add the TabLayout and ViewPager2 to the main activity layout file. Edit the activity_main.xml file and add these elements as outlined in the following XML listing. Note that the TabLayout component is embedded into the AppBarLayout element while the ViewPager2 is placed after the AppBarLayout:

<?xml version="1.0" encoding="utf-8"?>

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity">

 

    <com.google.android.material.appbar.AppBarLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:theme="@style/AppTheme.AppBarOverlay">

 

        <androidx.appcompat.widget.Toolbar

            android:id="@+id/toolbar"

            android:layout_width="match_parent"

            android:layout_height="?attr/actionBarSize"

            android:background="?attr/colorPrimary"

            app:popupTheme="@style/AppTheme.PopupOverlay" />

 

        <com.google.android.material.tabs.TabLayout

            android:id="@+id/tabLayout"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            app:tabMode="fixed"

            app:tabGravity="fill"/>

 

    </com.google.android.material.appbar.AppBarLayout>

 

    <androidx.viewpager2.widget.ViewPager2

        android:id="@+id/view_pager"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    

    <include layout="@layout/content_main" />

 

    <com.google.android.material.floatingactionbutton.FloatingActionButton

        android:id="@+id/fab"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="bottom|end"

        android:layout_margin="@dimen/fab_margin"

        app:srcCompat="@android:drawable/ic_dialog_email" />

 

</androidx.coordinatorlayout.widget.CoordinatorLayout>

46.7 Creating the Fragment State Adapter

This example will use the ViewPager2 approach to handling the fragments assigned to the TabLayout tabs. With the ViewPager2 instance added to the layout resource file, a new class which subclasses FragmentStateAdapter needs to be added to the project to manage the fragments that will be displayed when the tab items are selected by the user.

Add a new class to the project by right-clicking on the com.ebookfrenzy.tablayoutdemo entry in the Project tool window and selecting the New -> Java Class menu option. In the new class dialog, enter TabStateAdapter into the Name: field and click OK.

Edit the TabStateAdapter.java file so that it reads as follows:

package com.ebookfrenzy.tablayoutdemo;

 

import androidx.fragment.app.Fragment;

import androidx.fragment.app.FragmentActivity;

import androidx.viewpager2.adapter.FragmentStateAdapter;

 

public class TabStateAdapter extends FragmentStateAdapter {

 

    int tabCount;

 

    public TabStateAdapter(FragmentActivity fa, int numberOfTabs) {

        super(fa);

        this.tabCount = numberOfTabs;

    }

 

    @Override

    public Fragment createFragment(int position) {

        switch (position) {

            case 0:

                return new Tab1Fragment();

            case 1:

                return new Tab2Fragment();

            case 2:

                return new Tab3Fragment();

            case 3:

                return new Tab4Fragment();

            default:

                return null;

        }

    }

 

    @Override

    public int getItemCount() {

        return tabCount;

    }

}

The class is declared as extending the FragmentStateAdapter class and a constructor is implemented allowing the number of pages required to be passed to the class when an instance is created. The createFragment() method will be called when a specific page is required. A switch statement is used to identify the page number being requested and to return a corresponding fragment instance. Finally, the getItemCount() method simply returns the count value passed through when the object instance was created.

46.8 Performing the Initialization Tasks

The remaining tasks involve initializing the TabLayout, ViewPager2 and TabStateAdapter instances. Edit the MainActivity.java file so that it reads as follows:

package com.ebookfrenzy.tablayoutdemo;

.

.

import android.net.Uri;

import androidx.viewpager2.adapter.FragmentStateAdapter;

import com.google.android.material.tabs.TabLayoutMediator;

 

import com.google.android.material.tabs.TabLayout;

.

.

public class MainActivity extends AppCompatActivity {

 

    @Override

    protected void onCreate(Bundle savedInstanceState) {

.

.

        configureTabLayout();

    }

 

    protected void configureTabLayout() {

 

        for (int i = 0; i < 4; i++) {

            binding.tabLayout.addTab(binding.tabLayout.newTab());

        }

 

        final FragmentStateAdapter adapter =

                 new TabStateAdapter(this, binding.tabLayout.getTabCount());

        binding.viewPager.setAdapter(adapter);

 

        new TabLayoutMediator(binding.tabLayout, binding.viewPager,

            (tab, position) -> tab.setText("Tab " + (position + 1) + " Item")

        ).attach();

    }

.

.

}

The code begins by creating four tabs and adding them to the TabLayout instance as follows:

for (int i = 0; i < 4; i++) {

    binding.tabLayout.addTab(binding.tabLayout.newTab());

}

Next, an instance of the TabStateAdapter class is created. Note that the code to create the TabStateAdapter instance passes through the number of tabs that have been assigned to the TabLayout component. The TabStateAdapter instance is then assigned as the adapter for the ViewPager2 instance:

final FragmentStateAdapter adapter = new TabStateAdapter(this, binding.tabLayout.getTabCount());

Finally, an instance of the TabLayoutMediator class is used to connect the TabLayout with the ViewPager2 object:

new TabLayoutMediator(binding.tabLayout, binding.viewPager,

        (tab, position) -> tab.setText("Tab " + (position + 1) + " Item")

).attach();

This class ensures that the TabLayout tabs remain synchronized with the currently selected fragment. Part of this process involves making sure that the correct text is displayed on each tab. In this case, the text is configured to read “Tab <n> Item” where <n> is replaced by the number of the currently selected tab.

46.9 Testing the Application

Compile and run the app on a device or emulator and make sure that selecting a tab causes the corresponding fragment to appear in the content area of the screen:

Figure 46-6

46.10 Customizing the TabLayout

The TabLayout in this example project is configured using fixed mode. This mode works well for a limited number of tabs with short titles. A greater number of tabs or longer titles can quickly become a problem when using fixed mode as illustrated by Figure 46-7:

Figure 46-7

In an effort to fit the tabs into the available display width the TabLayout has used multiple lines of text. Even so, the second line is clearly truncated making it impossible to see the full title. The best solution to this problem is to switch the TabLayout to scrollable mode. In this mode the titles appear in full length, single line format allowing the user to swipe to scroll horizontally through the available items as demonstrated in Figure 46-8:

Figure 46-8

To switch a TabLayout to scrollable mode, simply change the app:tabMode property in the activity_main.xml layout resource file from “fixed” to “scrollable”:

<android.support.design.widget.TabLayout

    android:id="@+id/tabLayout"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    app:tabMode="scrollable"

    app:tabGravity="fill"/>

</android.support.design.widget.AppBarLayout>

When in fixed mode, the TabLayout may be configured to control how the tab items are displayed to take up the available space on the screen. This is controlled via the app:tabGravity property, the results of which are more noticeable on wider displays such as tablets in landscape orientation. When set to “fill”, for example, the items will be distributed evenly across the width of the TabLayout as shown in Figure 46-9:

Figure 46-9

Changing the property value to “center” will cause the items to be positioned relative to the center of the tab bar:

Figure 46-10

Before proceeding to the final step in this chapter, revert the tabMode and tabGravity attributes in the activity_main.xml file to “fixed” and “fill” respectively.

46.11 Summary

TabLayout is one of the components introduced as part of the Android material design implementation. The purpose of the TabLayout component is to present a series of tab items which, when selected, display different content to the user. The tab items can display text, images or a combination of both. When combined with the ViewPager2 class and fragments, tab layouts can be created with relative ease, with each tab item selection displaying a different fragment.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
44.202.183.118