Tabs In Android Studio Example

In this tutorial we will learn how to create different types of tabs in android studio. We will use android design support and material library to achieve that.

Tabs in Android
Tabs in Android

Tabs in Android

We will learn how to create different types of tabs which are below:

  • Fixed Tabs
  • Full Width Tabs
  • Center Aligned Tabs
  • Scrollable Tabs
  • Tabs With Icons And Text
  • Tabs With Icons Only
  • Custom Tabs

Add Material Design Dependency

Add the following android Material design library to use its widgets in your project’s build.gradle(Module:App_Name) file.

implementation 'com.google.android.material:material:1.4.0'

Which will look like below:

Android-build.gradle-file
Android-build.gradle-file

Enable Databinding

We used databinding in this project to create Tabs in Android. Databinding reduces the length of code in android so you should use databinding in android. You can quickly learn from here that how to enable databinding in android it will take 2 minutes only.

1. Fixed Tabs

Fixed Tabs don’t scroll and move. These tabs are fixed on the top of the screen and load new screens when we press on the particular tab. You can see in the below screenshot.

Fixed Tabs in Android
Fixed Tabs in Android

To create Fixed Tabs in android we needed the following classes and fragments.

  • FixedTabs.java – The Main class in which we will create all tabs.
  • ViewPageAdapter.java – This is a java class adapter which will take tabs as fragments and title of the Tab.
  • Fragments – Fragments are the number of tabs which will load when you click on the tab title. Here CallFragment, ChatFragment and StatusFragment are created. You use your own fragments.

Note : If you don’t know how to create fragments in android you can follow the below steps as well as screenshot.

Right Click on Project – > new -> Fragment -> Fragment(Blank).

Create Fragment
Create Fragment

Android Tabs Layout With Fragments

Now we will use TabLayout to create tabs and load the fragments.

CallFragment.java

Below is the CallFragment.java class which contains only TextView.

package com.example.androidtestingproject.Fragment;

import android.os.Bundle;

import androidx.databinding.DataBindingUtil;
import androidx.fragment.app.Fragment;

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

import com.example.androidtestingproject.R;
import com.example.androidtestingproject.databinding.FragmentCallBinding;
import com.example.androidtestingproject.databinding.FragmentChatBinding;

public class CallFragment extends Fragment {
    private FragmentCallBinding binding;
    private View view;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        binding = DataBindingUtil.inflate(inflater, R.layout.fragment_call, container, false);
        view = binding.getRoot();
        return view;
    }
}

fragment_call.xml

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".Fragment.CallFragment"
        android:orientation="vertical"
        android:layout_margin="20dp"
        android:padding="5dp"
        android:gravity="center">

     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Call Fragment"
         android:textSize="18dp"
         android:textColor="@color/teal_200"/>


    </LinearLayout>
</layout>

Similarly create ChatFragment() and StatusFragment() with layout file but not shown here because those are the same as CallFragment().

FixedTabs.java

package com.example.androidtestingproject.Activity;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.databinding.DataBindingUtil;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

import com.example.androidtestingproject.Fragment.CallFragment;
import com.example.androidtestingproject.Fragment.ChatFragment;
import com.example.androidtestingproject.Fragment.StatusFragment;
import com.example.androidtestingproject.R;
import com.example.androidtestingproject.databinding.ActivityTabsTypeBinding;

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

public class FixedTabs extends AppCompatActivity {
private ActivityTabsTypeBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(this,R.layout.activity_tabs_type);
        initView();
    }

    private void initView() {
        setViewPager(binding.viewPager);
        binding.tabLayout.setupWithViewPager(binding.viewPager);

    }

    private void setViewPager(ViewPager viewPager){
        ViewPageAdapter adapter = new ViewPageAdapter(getSupportFragmentManager());
        adapter.addFragment(new CallFragment(), "Call");
        adapter.addFragment(new ChatFragment(), "Chat");
        adapter.addFragment(new StatusFragment(), "Status");
        viewPager.setAdapter(adapter);
    }
}

//ViewPageAdapter Class
class ViewPageAdapter extends FragmentPagerAdapter{
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public ViewPageAdapter(FragmentManager fm) {
        super(fm);
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentTitleList.size();
    }

    public void addFragment(Fragment fragment, String title){
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }
}

In the above FixedTabs.java there are two classes, first one is FixedTabs.java and another is ViewPageAdapter.java

In the above FixedTabs.java we binded tablayout to setupWithViewPager() inbuilt method and passed viewPager id from layout file.

Next we created a ViewPagerAdapter() adapter class and initialized the constructor which takes the fragment and title of the tab. To call the ViewPageAdapter’s constructor , simply create a method setViewPager and initialize its object then pass the fragment and the title. You can add more fragments here.

activity_fixed_tabs.xml

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".Activity.FixedTabs"
        android:orientation="vertical">

        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/teal_200"
                app:tabMode="fixed"
                app:tabGravity="fill"/>

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

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    </LinearLayout>
</layout>

In the layout file create a material TabLayout and ViewPager inside the AppbarLayout. TabLayout will hold the tabs and ViewPager will load the fragments.

Fixed the Tabs by providing  -> app:tabMode = “fixed” in the above layout file in android.

2. Full Width Tabs In Android

To create full width Tabs in android just provide following tabGravity = “fill” in the TabLayout.

app:tabGravity="fill"

3. Center Aligned Tabs

To create center aligned Tabs provide tabGravity = “center” in the TabLayout. This will align all the tabs in center.

app:tabGravity="center"
Center Aligned Tabs In Android
Center Aligned

4. Scrollable Tabs in Android

The scrollable tabs should be used when you have many tabs and you can not fit them on the screen. Then they will scroll horizontally. To create scrollable tabs you have to use tabMode = “scrollable” in the TabLayout.

To create scrollable tabs add some more fragments in the above FixedTabs.java class like below.

 private void setViewPager(ViewPager viewPager){
        ViewPageAdapter adapter = new ViewPageAdapter(getSupportFragmentManager());
        adapter.addFragment(new CallFragment(), "Call");
        adapter.addFragment(new ChatFragment(), "Chat");
        adapter.addFragment(new StatusFragment(), "Status");
        adapter.addFragment(new AboutUsFragment(), "About");
        adapter.addFragment(new ContactUsFragment(), "Contact");
        adapter.addFragment(new HomeFragment(), "Home");
        viewPager.setAdapter(adapter);
    }
Scrollable Tabs
Scrollable tabs in android

5. Tabs With Icons And Text

Sometimes you want to make tabs with icons and text. To create that call the setIcon() method and pass the appropriate icon. Here we stored the icons in a drawable folder then used for that. You don’t forget to put your icons in a drawable folder other then you will face error.

FixedTabs.java

package com.example.androidtestingproject.Activity;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.databinding.DataBindingUtil;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

import com.example.androidtestingproject.Fragment.CallFragment;
import com.example.androidtestingproject.Fragment.ChatFragment;
import com.example.androidtestingproject.Fragment.StatusFragment;
import com.example.androidtestingproject.R;
import com.example.androidtestingproject.databinding.ActivityFixedTabsBinding;

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

public class FixedTabs extends AppCompatActivity {
private ActivityFixedTabsBinding binding;
private int[] tabsIcon = {
        R.drawable.ic_call,
        R.drawable.ic_chat,
        R.drawable.ic_status,
};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(this,R.layout.activity_fixed_tabs);
        initView();
    }

    private void initView() {
        setViewPager(binding.viewPager);
        binding.tabLayout.setupWithViewPager(binding.viewPager);
        setTabsIcon();
    }
    private void setTabsIcon(){
        binding.tabLayout.getTabAt(0).setIcon(tabsIcon[0]);
        binding.tabLayout.getTabAt(1).setIcon(tabsIcon[1]);
        binding.tabLayout.getTabAt(2).setIcon(tabsIcon[2]);
    }

    private void setViewPager(ViewPager viewPager){
        ViewPageAdapter adapter = new ViewPageAdapter(getSupportFragmentManager());
        adapter.addFragment(new CallFragment(), "Call");
        adapter.addFragment(new ChatFragment(), "Chat");
        adapter.addFragment(new StatusFragment(), "Status");
        viewPager.setAdapter(adapter);
    }


}

//ViewPageAdapter Class
class ViewPageAdapter extends FragmentPagerAdapter{
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public ViewPageAdapter(FragmentManager fm) {
        super(fm);
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentTitleList.size();
    }

    public void addFragment(Fragment fragment, String title){
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }
}

activity_fixed_tabs.xml

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".Activity.FixedTabs"
        android:orientation="vertical">

        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/teal_200"
                app:tabMode="fixed"
                app:tabGravity="fill"/>

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

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    </LinearLayout>
</layout>

6. Tabs With Icons Only In Android

To create Tabs with icons only, You have to do only one change in your above ViewPageAdapter.java class. Return null instead of mFragmentTitleList.get(position), like below.

 @Override
    public CharSequence getPageTitle(int position) {
        return null;
    }
Tabs With Icons Only
Tabs With Icons Only

7. Custom Tabs in Android

Sometimes all the above Tabs don’t provide the proper solution we have to create some different type tabs that can be created according to us. For this we can manage according to us. Follow the below steps.

Create a layout file in layout folder and provide the name custom_tabs. layout -> custom_tabs.xml

custom_tabs.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/tab"
    android:textColor="@color/black"
    android:textSize="16dp" />

FixedTabs.java

In the java class copy and paste the following code in your android studio projects.

package com.example.androidtestingproject.Activity;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.databinding.DataBindingUtil;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TextView;

import com.example.androidtestingproject.Fragment.CallFragment;
import com.example.androidtestingproject.Fragment.ChatFragment;
import com.example.androidtestingproject.Fragment.StatusFragment;
import com.example.androidtestingproject.R;
import com.example.androidtestingproject.databinding.ActivityFixedTabsBinding;

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

public class FixedTabs extends AppCompatActivity {
private ActivityFixedTabsBinding binding;
private int[] tabsIcon = {
R.drawable.ic_call,
R.drawable.ic_chat,
R.drawable.ic_status,
};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
binding = DataBindingUtil.setContentView(this,R.layout.activity_fixed_tabs);
initView();
}

private void initView() {
setViewPager(binding.viewPager);
binding.tabLayout.setupWithViewPager(binding.viewPager);
setTabsIcon();
}
private void setTabsIcon(){
TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tabs, null);
tabOne.setText("ONE");
tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_call, 0, 0);
binding.tabLayout.getTabAt(0).setCustomView(tabOne);

TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tabs, null);
tabTwo.setText("TWO");
tabTwo.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_chat, 0, 0);
binding.tabLayout.getTabAt(1).setCustomView(tabTwo);

TextView tabThree = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tabs, null);
tabThree.setText("THREE");
tabThree.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_status, 0, 0);
binding.tabLayout.getTabAt(2).setCustomView(tabThree);
}

private void setViewPager(ViewPager viewPager){
ViewPageAdapter adapter = new ViewPageAdapter(getSupportFragmentManager());
adapter.addFragment(new CallFragment(), "Call");
adapter.addFragment(new ChatFragment(), "Chat");
adapter.addFragment(new StatusFragment(), "Status");
viewPager.setAdapter(adapter);
}


}

//ViewPageAdapter Class
class ViewPageAdapter extends FragmentPagerAdapter{
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();

public ViewPageAdapter(FragmentManager fm) {
super(fm);
}

@NonNull
@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}

@Override
public int getCount() {
return mFragmentTitleList.size();
}

public void addFragment(Fragment fragment, String title){
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}

@Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}

activity_fixed.xml

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

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Activity.FixedTabs"
android:orientation="vertical">

<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/teal_200"
app:tabMode="fixed"
app:tabGravity="fill"/>

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

<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</LinearLayout>
</layout>
Custom Tabs in android
Custom Tabs in android

Conclusion Of Tabs in Android

We created different types of Tabs. Hope you learn the TabLayout in android. For any query you can comment in the below comment section.

close

Don’t miss new tips!

We don’t spam! Read our [link]privacy policy[/link] for more info.

Leave a Comment