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

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:

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.

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).

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);
    }

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;
    }

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>

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.

Tabs In Android Studio Example

Tabs in Android

Add Material Design Dependency

Enable Databinding

1. Fixed Tabs

Android Tabs Layout With Fragments

CallFragment.java

fragment_call.xml

FixedTabs.java

activity_fixed_tabs.xml

2. Full Width Tabs In Android

3. Center Aligned Tabs

4. Scrollable Tabs in Android

5. Tabs With Icons And Text

FixedTabs.java

activity_fixed_tabs.xml

6. Tabs With Icons Only In Android

7. Custom Tabs in Android

custom_tabs.xml

FixedTabs.java

activity_fixed.xml

Conclusion Of Tabs in Android

Don’t miss new tips!

Leave a Comment Cancel Reply

Tabs in Android

Add Material Design Dependency

Enable Databinding

1. Fixed Tabs

Android Tabs Layout With Fragments

CallFragment.java

fragment_call.xml

FixedTabs.java

activity_fixed_tabs.xml

2. Full Width Tabs In Android

3. Center Aligned Tabs

4. Scrollable Tabs in Android

5. Tabs With Icons And Text

FixedTabs.java

activity_fixed_tabs.xml

6. Tabs With Icons Only In Android

7. Custom Tabs in Android

custom_tabs.xml

FixedTabs.java

activity_fixed.xml

Conclusion Of Tabs in Android

Don’t miss new tips!

Related Posts

Leave a Comment Cancel Reply