Android TabLayout in the AppBarLayout With Examples [Latest]

Android TabLayout AppBarLayout

In the previous tutorials, we’ve been discussing the perks of using CoordinatorLayout as the root of our activity’s layout. All this while we haven’t gone into the details of an AppBarLayout and it’s usages. Let’s look into it now.

AppBarLayout

AppBarLayout is a vertical LinearLayout that is generally the first child inside a CoordinatorLayout and acts as a wrapper for the ToolBar in most cases. Using the ToolBar as a direct child of CoordinatorLayout would work fine but it will not be able to coordinate with other child views present. Here’s where the importance of AppBarLayout arises. It allows it’s child views to achieve the desired scrolling behavior using the param app:layout_scrollFlags

A sample xml layout for the above description is given below:

The app:layout_scrollFlags attribute of the Toolbar indicates to the view how to respond. It has the following possible values.

• scroll : This flag is generally set for all views that need to scroll off-screen. Views that don’t use this flag remain static allowing the other scrollable views to slide behind it
• enterAlways : This flag ensures that any downward scroll will cause the view to become visible, enabling the quick return pattern
• enterAlwaysCollapsed : An additional flag for ‘enterAlways’ which modifies the returning view to only initially scroll back to it’s collapsed height.
• exitUntilCollapsed : This flag causes the view to be scrolled until it is collapsed (its minHeight is reached) before exiting
• snap : Upon a scroll ending, if the view is only partially visible then it will be snapped and scrolled to it’s closest edge. Hence this avoids mid-animation states of a view

TabLayout

TabLayout is another popular view type introduced in the Material Design Guidelines. It provides a horizontal layout of tabs which are generally placed at the top of the screen according to the Android UI Guidelines.

The following xml snippet depicts how a TabLayout is defined.

The TabLayout consists of two important xml attributes described below:

• app:tabMode – This takes two values:
  • fixed – This displays all the tabs within the screen. Generally used when there are upto 3 tabs
  • scrolling – This lets the user scrolls through the tabs horizontally.
• app:tabGravity – This attribute only works if app:tapMode="fixed". This also takes two values:
  • filled – It’ll distribute the horizontal width across all the tabs
  • center – It’ll display all the tabs in the center horizontal of the screen

Note: A TabLayout is generally implemented along with a ViewPager. We’ll implement that in a later tutorial.

Let’s get onto the business logic of our application that hosts a ToolBar and TabLayout inside the AppBarLayout.

Android TabLayout AppBarLayout Project Structure

Android TabLayout AppBarLayout Example Code

The activity_main.xml is given below.

In the above code we’ve added a LinearLayout below the AppBarLayout.
Important inferences that need to be drawn are:

• LinearLayout without the statement app:layout_behavior="@string/appbar_scrolling_view_behavior would overlap the LinearLayout with the AppBarLayout.
• The LinearLayout as a direct child in a CoordinatorLayout won’t scroll. Hence we’ve kept it inside a NestedScrollView
• The TabLayout doesn’t have the layout_scrollFlags. Hence it won’t scroll out of the screen like the ToolBar. We’ll see that shortly.

The MainActivity.java is given below

The output of the above application is shown below

Few notable things from the above output are:

• On scrolling, the status bar scrolls up too thereby leaving the ToolBar in an inconsistent state most of the times
• The Tab Bar indicators have the default color set as the colorAccent
• The default background color of the Tabs is colorPrimary

The first issue is a serious one. To resolve it goto the res->values-21->styles.xml file.
Change the line
@android:color/transparent to
@color/colorPrimaryDark

This is how the output should look now:

There are numerous ways to customise the TabLayouts. Try calling the setIcon() on the newTab() method instead of setText(). It’ll display the drawable icons. You can even implement both of them like

I ended up with the output below on using the above snippet. What about you?

Besides we can create our own custom styles in the style.xml as shown below.

Let’s add the above style to the respective view in activity_main.xml

We’ve ended up with an output like this:

You can further style it according to your own needs to enhance the UX of your application.
This brings an end to this tutorial. We’ll be implementing TabLayouts with ViewPager in our next application. You can download the Android TabLayouts Project from the below link