Custom Tablayout Android Studio example creates custom tablayout with custom view.
We will create a custom view for tablayout in this example.
If you don’t have go through basic tablayout tutorial, then visit android tablayout tutorial.
If you want to change toolbar menu items with every tab or fragment, the visit android tblayout toolbar menu items.
You can use both icon and tab name in custom tablayout.
There are Four ways to set icons with respect to text(tab name)
- Left side of text,
- Right side of text,
- Above text and
- Below text.
First, check the output of a tutorial, then we will develop it.
Download Source Code for Custom Tablayout Android example
[sociallocker] Download CustomTabsDemoNuts [/sociallocker]
Step 1: Making Base Project
Follow all the steps from basic tablayout Android tutorial.
After you have completed above tutorial, you will have one android project with tablayout.
Make sure you followed all the steps of above tutorial. It is must for going further with this example.
Now follow below steps.
Step 2: Adding custom_tab.xml file
Create a new resource directory named custom_tab.xml and add below code
<?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="match_parent"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="@+id/ll"
android:orientation="horizontal"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/ic_launcher"/>
<TextView
android:id="@+id/tvtab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ONE"
android:textColor="@color/colorAccent"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/ll2"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/ic_launcher"/>
<TextView
android:id="@+id/tvtab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TWO"
android:textColor="#26e9dc"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/ll3"
android:orientation="vertical"
android:gravity="center">
<TextView
android:id="@+id/tvtab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="THREE"
android:textColor="#d8ea2b"
android:textSize="14sp"
android:textStyle="bold" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/ic_launcher"/>
</LinearLayout>
</LinearLayout>
This custom_tab.xml file is the core of this tutorial.
You can customize all of your tabs here with various icons, tab names and colors of tab names.
Step 3: Updating MainActivity.java
Update MainActivity.java as per below code
import android.content.Context;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
public ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
View headerView = ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE))
.inflate(R.layout.custom_tab, null, false);
LinearLayout linearLayoutOne = (LinearLayout) headerView.findViewById(R.id.ll);
LinearLayout linearLayout2 = (LinearLayout) headerView.findViewById(R.id.ll2);
LinearLayout linearLayout3 = (LinearLayout) headerView.findViewById(R.id.ll3);
tabLayout.getTabAt(0).setCustomView(linearLayoutOne);
tabLayout.getTabAt(1).setCustomView(linearLayout2);
tabLayout.getTabAt(2).setCustomView(linearLayout3);
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new OneFragment(), "ONE");
adapter.addFragment(new TwoFragment(), "TWO");
adapter.addFragment(new ThreeFragment(), "THREE");
viewPager.setAdapter(adapter);
}
class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public ViewPagerAdapter(FragmentManager manager) {
super(manager);
}
@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
@Override
public int getCount() {
return mFragmentList.size();
}
public void addFragment(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
@Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}
}
Now consider below lines
View headerView = ((LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE))
.inflate(R.layout.custom_tab, null, false);
LinearLayout linearLayoutOne = (LinearLayout) headerView.findViewById(R.id.ll);
LinearLayout linearLayout2 = (LinearLayout) headerView.findViewById(R.id.ll2);
LinearLayout linearLayout3 = (LinearLayout) headerView.findViewById(R.id.ll3);
headerView is the object of View class and is inflated with layout resource file named custom_tab.xml
In above lines, linearlayoutOne, linearlayout2 and linearlayout3 are inflated with headerView.
We will set custom view for each tab with the help of below source code lies.
tabLayout.getTabAt(0).setCustomView(linearLayoutOne); tabLayout.getTabAt(1).setCustomView(linearLayout2); tabLayout.getTabAt(2).setCustomView(linearLayout3);
Kotlin Version
Kotlin Version of this tutorial : Android Custom Tablayout Kotlin
Share resources of demonuts with friends in social media to help others grow as well.
You can give your review in the comment section.
You can also use comment section if you have any queries in making above tutorial. Thank you.