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
<!-- 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 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 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 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:
