Android. Tablayout inside a tab of another tablayo

Question

Is it possible to have a tablayout inside a tab of another tablayout? I have created the following image for a better explanation. The slide movement desired is as it is described in the image.

My main activity

Xml

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"  />

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

Code

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;

    private final static int[] tabIcons = {
            R.drawable.ic_tab_1,
            R.drawable.ic_tab_2,
            R.drawable.ic_tab_3,
            R.drawable.ic_tab_4
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
        setupTabIcons();
    }

    private void setupTabIcons() {
        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
        tabLayout.getTabAt(3).setIcon(tabIcons[3]);
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFrag(new Fragment1());
        adapter.addFrag(new Fragment2());
        adapter.addFrag(new Fragment3());
        adapter.addFrag(new Fragment4());
        viewPager.setAdapter(adapter);
    }

    class ViewPagerAdapter extends FragmentPagerAdapter {

        private final List<Fragment> mFragmentList = new ArrayList<>();

        ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

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

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

        void addFrag(Fragment fragment) {
            mFragmentList.add(fragment);
        }
    }
}

Fragments

Xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@android:color/holo_blue_light"
    android:id="@+id/fragment_1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="myContext">

    <TextView
        android:text="It is just a text."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

Code

public class Fragment1 extends Fragment {

    public Fragment1() { }

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

How should Fragment2_A and Fragment2_B XML and Java code be?

Answer 1

I know that this is not a direct answer to the question and that I might get penalized for this, but you should not nest tabs in tabs. Google uses design concepts called material design. One of the rules for tabs is not to nest them. Here is a link to the page: https://material.google.com/components/tabs.html#tabs-usage. I think that it is really important that we as developers follow this to make the Android platform as universal and as amazing as it can be.

Thanks, Oak

Answer 2

Simple

Everything will remain same like you set ViewPager in Activity. Just you need to use getChildFragmentManager() in Fragment instead of getFragmentManager().

From getChildFragmentManager() documentation

Return a private FragmentManager for placing and managing Fragments inside of this Fragment.

From getFragmentManager() documentation

Return the FragmentManager for interacting with fragments associated with this fragment's activity.

You can see @this answer for complete code.

Answer 3

ok, so inside your fragment you have only TextView. Now for fragment_2 put another TabLayout and ViewPager (you don't need AppBar, and Coordinator, they will be already there from parent layout of Activity)

frag2.xml

<LinearLayout
    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"
    android:orientation="vertical">
    <android.support.design.widget.TabLayout
        android:id="@+id/frag2_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/frag2_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"  />
</LinearLayout>

you have to create Frag2 Fragment , init with above layout inside OnCreateView and then for frag2_viewpager ViewPager class set another adapter for frag2a.xml and frag2b.xml Fragments only, they may have lets assume only TextViews or whatever. TabLayout will be placed above, inside Frag2 (and one in Activity as on pic)