Android: How to build Multiplelevel Tabs

Question

I want to create multilevel tabs in android. It should follow a multilevel hierarchy, or a nested tabs philosophy as shown in image. Please provide the link or url if necessary.

Answer 1

You should use ViewPager to do so. Below code will help you to make multilevel tabs in android.

view_pager_main.xml

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            style="@style/MyCustomTabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabIndicatorColor="@android:color/white"
            app:tabIndicatorHeight="3dp"
            app:tabMode="fixed"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

    </FrameLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white" />

    <TextView
        android:id="@+id/tvNoPlans"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="No Plans Available"
        android:textColor="@android:color/black"
        android:visibility="gone" />

</android.support.design.widget.AppBarLayout>

view_pager_child.xml

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout_child"
            style="@style/MyCustomTabLayout1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="center"
            app:tabIndicatorColor="@color/btn_background"
            app:tabIndicatorHeight="3dp"
            app:tabMode="scrollable"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

    </FrameLayout>

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="@android:color/darker_gray"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_child"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white" />

</android.support.design.widget.AppBarLayout>

ViewPagerMain.java

public class ViewPagerMain extends Fragment {

    ViewPager viewpager;
    TabLayout tabLayout;
    TextView tvNoPlans;

    View rootview;
    Fragment fr = null;

    ArrayList<String> cat_id = new ArrayList<String>();
    ArrayList<String> cat_name = new ArrayList<String>();

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        rootview = inflater.inflate(R.layout.view_pager_main, container, false);

        tvNoPlans = (TextView) rootview.findViewById(R.id.tvNoPlans);
        viewpager = (ViewPager) rootview.findViewById(R.id.viewpager);
        viewpager.setOffscreenPageLimit(3);

        tabLayout = (TabLayout) rootview.findViewById(R.id.tabLayout);

        cat_id.add(0,"1");
        cat_id.add(1,"2");

        cat_name.add(0,"Parent1");
        cat_name.add(1,"Parent2");

        setupViewpager(viewpager);
        tabLayout.post(new Runnable() {
            @Override
            public void run() {
                tabLayout.setupWithViewPager(viewpager);
            }
        });

        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewpager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
        return rootview;
    }

    public void setupViewpager(ViewPager viewPager) {

        ViewpagerAdapter adapter = new ViewpagerAdapter(getChildFragmentManager());

        for (int i = 0; i < cat_id.size(); i++) {
            Bundle bundle = new Bundle();
            bundle.putString("cat_id",cat_id.get(i));
            fr = new ViewPagerChild();
            fr.setArguments(bundle);
            adapter.addFrag(fr, cat_name.get(i));
        }
        viewPager.setAdapter(adapter);
    }
}

ViewPagerChild.java

public class ViewPagerChild extends Fragment {

    ViewPager viewPager_child;
    TabLayout tabLayout_child;
    SharedPreferences preferences;
    View rootview;
    String cat_id;

    ArrayList<String> subcat_id = new ArrayList<String>();
    ArrayList<String> subcat_name = new ArrayList<String>();

    Bundle bundle;
    Fragment fr = null;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        rootview = inflater.inflate(R.layout.view_pager_child, container, false);
        preferences = getActivity().getSharedPreferences(Constant.PREF_MAIN, 0);

        bundle = getArguments();
        cat_id = bundle.getString("cat_id");

        viewPager_child = (ViewPager) rootview.findViewById(R.id.viewpager_child);
        viewPager_child.setOffscreenPageLimit(10);

        tabLayout_child = (TabLayout) rootview.findViewById(R.id.tabLayout_child);

        subcat_id.add(0,"1");
        subcat_id.add(1, "2");

        subcat_name.add(0,"Child1");
        subcat_name.add(1,"Child2");

        setupViewpagerChild(viewPager_child);
        tabLayout_child.post(new Runnable() {
            @Override
            public void run() {
                tabLayout_child.setupWithViewPager(viewPager_child);
            }
        });

        tabLayout_child.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager_child.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
        return rootview;
    }

    public void setupViewpagerChild(ViewPager viewPager_child) {
        ViewpagerAdapter adapter = new ViewpagerAdapter(getChildFragmentManager());

        for (int i = 0; i < subcat_id.size(); i++) {

            fr = new TabFragment();
            adapter.addFrag(fr, subcat_name.get(i));
        }
        viewPager_child.setAdapter(adapter);
    }
}

ViewpagerAdapter.java

public class ViewpagerAdapter extends FragmentPagerAdapter {

    private final List<android.app.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();
    }

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

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

tab_fragment.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="Hello There!!!"/>

</LinearLayout>

TabFragment.java

public class TabFragment extends Fragment {

    View rootview;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        rootview = inflater.inflate(R.layout.fragment_tab, container, false);

        return rootview;
    }
}

Answer 2

Use Multiple Layers of Android TabLayout, Refer this. TabLayout is quite customize-able. For e.g. adding tabs, setting divider height, using custom views in tabs.