Coordinator TabLayout in Android

Many applications use TabLayout in which we have to show an image above the TabLayout. This type of UI design is mainly seen in Restaurant apps and many more. In this article, we will take a look at implementing the same type of view using Coordinator TabLayout in our Android App using Android Studio. 

What we are going to build in this article? 

We will be building a simple application in which we will be displaying the images and below that images, we will be displaying a TabLayout. Inside that TabLayout, we will be displaying the course-related details in that list and we will be displaying different types of courses in it. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Step by Step Implementation for Adding Coordinator TabLayout in Android  

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Adding dependency for using Coordinator Layout in build.gradle

Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section. 

implementation 'cn.hugeterry.coordinatortablayout:coordinatortablayout:1.2.2'

After adding the dependency now sync the project and we will be ready to work on it. 

Step 3: Updating the themes.xml file. 

Navigate to the app > res > values > themes.xml and change the theme to NoActionBar. Refer to the following code.

XML

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme with No Action Bar. -->
    <style name="Theme.GFG" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

Step 4: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.  

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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">

    <!--creating a coordinator layout on below line-->
    <cn.hugeterry.coordinatortablayout.CoordinatorTabLayout
        android:id="@+id/coordinatortablayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--creating a view pager on below line-->
        <androidx.viewpager.widget.ViewPager
            android:id="@+id/vp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </cn.hugeterry.coordinatortablayout.CoordinatorTabLayout>

</RelativeLayout>

Step 5: Creating a Fragment for displaying our course details 

Navigate to the app > res > layout > Right-click on it > New > Blank Fragment and name it as HomeFragment and click on Create to create a new Fragment. After creating this fragment, now navigate to the app > res > layout > fragment_home and add the below code to it. 

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeFragment">

    <!--creating a recycler view for displaying the course content-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

Step 6: Creating a new layout file for the item of RecyclerView

Navigate to app > res > layout > Right-click on it > New > Layout Resource file and name it as item_main and add below code to it.  

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!--text view for displaying course contents-->
    <TextView
        android:id="@+id/tv_num"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:text="1" />

</LinearLayout>

Step 7: Creating an adapter class for setting data to RecyclerView items 

Navigate to the app > java > your app’s package name > Right-click on it > New > Java class and name it as RecyclerAdapter and add the below code to it.  

Java

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.MyViewHolder> {

    // creating variables for context and list.
    private Context mContext;
    private List<String> mDatas;

    // creating constructor.
    public RecyclerAdapter(Context context, List<String> datas) {
        mContext = context;
        mDatas = datas;
    }

    @NonNull
    @Override
    public RecyclerAdapter.MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // inflating layout on below line.
        return new MyViewHolder(LayoutInflater.from(
                mContext).inflate(R.layout.item_main, parent, false));
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerAdapter.MyViewHolder holder, int position) {
        // setting data to text view on below line.
        holder.tv.setText(mDatas.get(position));
    }

    @Override
    public int getItemCount() {
        // returning the size of array list.
        return mDatas.size();
    }

    public class MyViewHolder extends RecyclerView.ViewHolder {
        // creating variables for text view.
        TextView tv;

        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            // initializing the text view.
            tv = (TextView) itemView.findViewById(R.id.tv_num);
        }
    }
}

Step 8: Working with the HomeFragment.java file 

Navigate to the app > java > your app’s package name > HomeFragment.java file and add the below code to it.  

Java

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;
import java.util.List;

public class HomeFragment extends Fragment {

    // creating a variables on below line.
    private static final String ARG_TITLE = "title";
    private RecyclerView mRecyclerView;
    private List<String> courseList;
    private String mTitle;

    public HomeFragment() {
        // Required empty public constructor
    }

    // creating a get instance method to get the data which we passed.
    public static HomeFragment getInstance(String title) {
        HomeFragment fra = new HomeFragment();
        Bundle bundle = new Bundle();
        bundle.putString(ARG_TITLE, title);
        fra.setArguments(bundle);
        return fra;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // on below line we are getting the data from bundles.
        Bundle bundle = getArguments();
        mTitle = bundle.getString(ARG_TITLE);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_home, container, false);
        // below method is use to load data in our array list.
        initData(mTitle);
        // initializing our variables for views.
        mRecyclerView = (RecyclerView) view.findViewById(R.id.recyclerview);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(mRecyclerView.getContext()));
        mRecyclerView.setAdapter(new RecyclerAdapter(mRecyclerView.getContext(), courseList));
        return view;
    }

    private void initData(String heading) {
        // running a switch case to add data to our array list.
        switch (heading) {
            case "DSA":
                courseList = new ArrayList<>();
                courseList.add("Arrays");
                courseList.add("Recursion");
                courseList.add("Hashing");
                courseList.add("Binary Search Trees");
                courseList.add("Searching");
                courseList.add("Sorting");
                break;
            case "C++":
                courseList = new ArrayList<>();
                courseList.add("Variables");
                courseList.add("Data Types");
                courseList.add("Type Conversion");
                courseList.add("Operators");
                courseList.add("Sorting");
                courseList.add("C++ Syntax");
                courseList.add("Pointers");
                break;
            case "Java":
                courseList = new ArrayList<>();
                courseList.add("Intro to Java");
                courseList.add("Object Oriented Concepts");
                courseList.add("Variables");
                courseList.add("Conditional and Control Flow");
                courseList.add("Array List");
                break;
            default:
                courseList = new ArrayList<>();
                courseList.add("Basic Concepts of Python");
                courseList.add("Program Flow Control in Python");
                courseList.add("Lists and Tuples");
                courseList.add("Functions");
                courseList.add("Python Dictionaries and Sets");
                break;
        }
    }
}

Step 9: Creating an Adapter class for handling TabLayout 

Navigate to the app > java > your app’s package name > Right-click on it > New > Java class and name it as ViewPagerAdapter and add the below code to it. 

Java

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.ArrayList;

public class ViewPagerAdapter extends FragmentPagerAdapter {

    // creating a string array for tab title.
    private final String[] mTitles;

    // creating an array list on below line for fragments.
    private ArrayList<Fragment> mFragments = new ArrayList<>();

    // constructor for view pager
    public ViewPagerAdapter(FragmentManager fm, ArrayList<Fragment> mFragments, String[] mTitles) {
        super(fm);
        this.mFragments = mFragments;
        this.mTitles = mTitles;
    }

    // returning the size of our list.
    @Override
    public int getCount() {
        return mFragments.size();
    }

    // below method is to set the title for tab layout item.
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles[position];
    }

    // below method is use to get the item.
    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

}

Step 10: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail. 

Java

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;

import java.util.ArrayList;

import cn.hugeterry.coordinatortablayout.CoordinatorTabLayout;

public class MainActivity extends AppCompatActivity {

    // creating variables for coordinator layout
    private CoordinatorTabLayout mCoordinatorTabLayout;

    // creating an integer array for images and colors.
    private int[] mImageArray, mColorArray;

    // creating array list for our fragments.
    private ArrayList<Fragment> mFragments;

    // creating a string array for our tab title in tab layout.
    private final String[] mTitles = {"DSA", "Java", "C++", "Python"};

    // creating a variable for view pager.
    private ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // calling method to initialize
        // our fragments and view pager.
        initFragments();
        initViewPager();

        // adding images to our int array on below line.
        mImageArray = new int[]{
                R.drawable.dsa,
                R.drawable.java,
                R.drawable.cpp,
                R.drawable.python};

        // adding color to our color array on below line.
        mColorArray = new int[]{
                android.R.color.holo_blue_light,
                android.R.color.holo_red_light,
                android.R.color.holo_orange_light,
                android.R.color.holo_green_light};

        // initializing our coordinator layout
        mCoordinatorTabLayout = findViewById(R.id.coordinatortablayout);

        // on below line we are setting title to our tool bar
        // and image array, color array and view pager
        // to our coordinator layout
        mCoordinatorTabLayout.setTranslucentStatusBar(this)
                .setTitle("Geeks For Geeks")
                .setBackEnable(true)
                .setImageArray(mImageArray, mColorArray)
                .setupWithViewPager(mViewPager);
    }

    private void initFragments() {

        // initializing our array list.
        mFragments = new ArrayList<>();

        // adding fragment to our array list on below line.
        for (String title : mTitles) {
            mFragments.add(HomeFragment.getInstance(title));
        }
    }

    private void initViewPager() {
        // initializing our view pager and setting adapter to it.
        mViewPager = findViewById(R.id.vp);
        mViewPager.setOffscreenPageLimit(4);
        mViewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(), mFragments, mTitles));
    }
}

Note: Images use inside the project are present in the drawable folder. 

Now run your app and see the output of the app. 

Output: