How do I implement AppCompatActivity with NavigationDrawer and multiple fragments reusing same TabLayout?

Question

I have successfully used TabLayout with AppCompatActivity with a CoordinatorLayout that looks close to this snippet:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:fab="http://schemas.android.com/tools"
    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.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="snap"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

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

    <include layout="@layout/content" />

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

Now I have implemented a NavigationDrawer and I am struggling to implement tabs within one of the Fragments being shown inside my AppCompatActivity. I want to be able to switch with TabLayout between few child Fragments inside of this Fragment.

1. How do I access TabLayout from one of my Fragments?
2. How do I set PagerAdapter for each of the Fragments correctly?
3. Where do I call addOnPageChangeListener?
4. How do I hide TabLayout when one of my Fragments does not need to display tabs?

Answer 1

1. Switching between first-level Fragments

Suppose layout content.xml stands for:

<FrameLayout 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"
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".ui.MyActivity"
    tools:showIn="@layout/my_activity" />

Then, to be able to switch between the Fragments, implement this function:

private void makeTransition(int fragmentId) {
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

        switch (fragmentId) {
            // Fragment with tabs
            case FRAGMENT_TABS:
                fragmentTransaction.replace(R.id.fragment_container, new TabsFragment());
                // This shows TabLayout
                findViewById(R.id.tabs).setVisibility(View.VISIBLE);
                getSupportActionBar().setTitle(R.string.fragment_tabs_title);
                break;
            // Fragment with no tabs
            case FRAGMENT_NO_TABS:
                fragmentTransaction.replace(R.id.fragment_container, new NoTabsFragment());
                // This hides TabLayout
                findViewById(R.id.tabs).setVisibility(View.GONE);
                getSupportActionBar().setTitle(R.string.fragment_no_tabs_title);
                break;
            default:
                throw new RuntimeException("No fragment with ID " + fragmentId + " found");
        }
        fragmentTransaction.commit();
    }

2. Accessing and setting up TabLayout from first-level Fragment

In TabsFragment class, add a private class TabAdapter:

private class TabAdapter extends FragmentPagerAdapter {

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

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return "TAB1";
            case 1:
                return "TAB2";
            // ...
        }
        return null;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return Tab1Fragment.getInstance();
            case 1:
                return Tab2Fragment.getInstance();
            // ...
        }
        return null;
    }

    @Override
    public int getCount() {
        return 2;
    }
}

Also, optionally, implement a ViewPager.OnPageChangeListener:

private class FragmentPageChangeListener implements ViewPager.OnPageChangeListener {

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        Log.d(getClass().getName(), "onPageScrolled");
    }

    @Override
    public void onPageSelected(int position) {
        Log.d(getClass().getName(), "onPageSelected");
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        Log.d(getClass().getName(), "onPageScrollStateChanged");
    }
}

Suppose your layout for fragment with tabs is like this:

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true" />

</RelativeLayout>

Override onCreateView to look like this:

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.viewpager_fragment, null);

    fragmentPagerAdapter = new TabAdapter(getChildFragmentManager());
    fragmentPageChangeListener = new FragmentPageChangeListener();

    ViewPager pager = (ViewPager) view.findViewById(R.id.viewpager);
    pager.setAdapter(fragmentPagerAdapter);
    pager.addOnPageChangeListener(fragmentPageChangeListener);

    TabLayout tabLayout = (TabLayout) MyAcvtivity.getInstance().findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(pager);

    return view;
}

NB:

Use getChildFragmentManager() and not getFragmentManager() in first-level Fragments when instantiating a ViewPager.