Nested Action Bar Tabs(with ViewPager)

Question

I have a project that uses Action Bar Tabs(with ViewPager). Tabs move really smoothly when swiping between them, but I need to add two sub tabs, in TAB 2, then move to the next tabs or of course back, just like on the Glassdoor or Flipboard.

Please help.

MainActivity

public class MainActivity extends AppCompatActivity {


private SectionsPagerAdapter mSectionsPagerAdapter;
private ViewPager mViewPager;

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

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
    mViewPager = (ViewPager) findViewById(R.id.container);
    mViewPager.setAdapter(mSectionsPagerAdapter);

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(mViewPager);

}


public class SectionsPagerAdapter extends FragmentPagerAdapter {

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

    @Override
    public Fragment getItem(int position) {

            switch (position) {
                case 0:
                    return Tab1Fragment.newInstance();
                case 1:
                    return Tab2Fragment.newInstance();
                default:
                    return Tab3Fragment.newInstance();
            }
    }

    @Override
    public int getCount() {
        // Show 3 total pages.
        return 3;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return "Tab 1";
            case 1:
                return "Tab 2";
            case 2:
                return "Tab 3";
        }
        return null;
    }
}
}

activity_main.xml

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/appbar_padding_top"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/AppTheme.PopupOverlay">

    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

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

Tab2Fragment- where i want to nest SubTab1Fragment and SubTab2Fragment

public class Tab2Fragment extends Fragment {   
private static final String ARG_PARAM1 = "param1";
private static final String ARG_PARAM2 = "param2";


public Tab2Fragment() {
    // Required empty public constructor
}


// TODO: Rename and change types and number of parameters
public static Tab2Fragment newInstance() {
    Tab2Fragment fragment = new Tab2Fragment();

    return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (getArguments() != null) {

    }
}

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

}

fragment_tab2.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.r3dm4n.testprojectapp.Tab2Fragment">

<!-- TODO: Update blank fragment layout -->
<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="@string/hello_blank_fragment" />

Answer 1

I figured this out. I've also posted a demo project on Github

In the MainActivity you need to return a new Fragment for the one you want "nested" like this:

@Override
    public Fragment getItem(int position) {

        switch (position) {
            case 0:
                return Tab1Fragment.newInstance();
            case 1:
                return new Tab2Fragment();
            default:
                return Tab3Fragment.newInstance();
        }

In TAB2 fragment, where you want the other nested fragments make the following changes:

public class Tab2Fragment extends Fragment {

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


    View view = inflater.inflate(R.layout.fragment_tab2, container, false);
    ViewPager mViewPager = (ViewPager) view.findViewById(R.id.container_main);
    SectionsPagerAdapter mSectionsPagerAdapter = new SectionsPagerAdapter(getChildFragmentManager());
    mViewPager.setAdapter(mSectionsPagerAdapter);

    return view;

}


private class SectionsPagerAdapter extends FragmentPagerAdapter {

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

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return Nest1Fragment.newInstance(1);
            default:
                return Nest2Fragment.newInstance(2);
        }

    }

    @Override
    public int getCount() {
        // Show 4 total pages.
        return 2;
    }

    @Override
    public CharSequence getPageTitle(int position) {

        switch (position) {
            case 0:
                return "Nested 1";
            default:
                return "Nested 2";
        }


    }
}


}

fragment_tab2.xml

<android.support.v4.view.ViewPager
    android:id="@+id/container_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    app:layout_scrollFlags="scroll|enterAlways">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary" />
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/AppTheme.PopupOverlay">
    </android.support.v7.widget.Toolbar>
</android.support.v4.view.ViewPager>

Answer 2

Take a look at this answer It might help

ViewPager nested in ViewPager

Also while adding sub tabs You can add a condition like this in the listener for moving to next tab

if(mPager.getCurrentItem() >=2)
 mParentPager.setCurrentItem()=mParentPager.getCurrenItem()+1

This for moving to previous tab

if(mPager.getCurrentItem() ==0)
 mParentPager.setCurrentItem()=mParentPager.getCurrenItem()-1