Fragment Tabs inside Fragment

Question

I have in my Main Activity an Action bar navigation using tabs using Fragments (with Material Design), as below which works well, but now I wish to have Tab navigation within my Fragments...

// Add Fragments to Tabs in Main Activity private void setupViewPager(ViewPager viewPager) {     Adapter adapter = new Adapter(getSupportFragmentManager());     adapter.addFragment(new FeedsFragment(), "Latest Updates");     adapter.addFragment(new ClubTeamsFragment(), "Club Teams");     adapter.addFragment(new FixturesFragment(), "Fixtures");     adapter.addFragment(new ResultsFragment(), "Results");     adapter.addFragment(new ClubFieldsFragment(), "Club Fields");     viewPager.setAdapter(adapter); } 

I'm pretty sure that TabHost is now deprecated.

I wish to achieve the attached image. The blue tabs are at the Main Activity level and the gray date tabs are in the selected fragment view.

I have read a few post about using Tab Host or Fragment Activity, or do I use Activity that is extended to Fragment?

Answer 1

See below answer that I achieved with using fragment tabs inside fragment tabs that are in my MainActivity

Inside my fragment using getChildFragmentManager()

public class FixturesTabs extends Fragment {    @Override   public void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setRetainInstance(true);   }    @Override   public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {      View view = inflater.inflate(R.layout.fixtures_new_tabs,container, false);     // Setting ViewPager for each Tabs     ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewpager);     setupViewPager(viewPager);     // Set Tabs inside Toolbar     TabLayout tabs = (TabLayout) view.findViewById(R.id.result_tabs);     tabs.setupWithViewPager(viewPager);       return view;  }   // Add Fragments to Tabs private void setupViewPager(ViewPager viewPager) {       Adapter adapter = new Adapter(getChildFragmentManager());     adapter.addFragment(new TodaysFixturesFragment(), "Today");     adapter.addFragment(new WeekFixturesFragment(), "Week");     adapter.addFragment(new MonthFixturesFragment(), "Month");     adapter.addFragment(new AllFixturesFragment(), "Month");     adapter.addFragment(new MyTeamsFixturesFragment(), "My Teams");     viewPager.setAdapter(adapter);    }  static class Adapter extends FragmentPagerAdapter {     private final List<Fragment> mFragmentList = new ArrayList<>();     private final List<String> mFragmentTitleList = new ArrayList<>();      public Adapter(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);     } }    } 

And my XML named "fixtures_new_tabs.xml" to match the inflated layout

<?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:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto">   <android.support.design.widget.CoordinatorLayout     android:id="@+id/main_content"     android:layout_width="match_parent"     android:layout_height="match_parent">      <android.support.design.widget.AppBarLayout         android:id="@+id/appbar"         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/result_tabs"             android:background="@color/grey"             app:tabTextColor="@color/medium_grey"             app:tabSelectedTextColor="@color/colorPrimary"             app:tabIndicatorColor="@color/colorPrimary"             android:layout_width="match_parent"             android:layout_height="wrap_content"             app:tabMode="scrollable"/>     </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>  </RelativeLayout> 

Hope this helps or points others in the direction for their solution..

P.S. If you get a white screen after implementing this, you might have added the same parent fragment to it's child fragment.

Answer 2

I changed a few things in Han and BENN1TH solution because the tab did not align properly, i added only two fragment. (they added five fragments). I hope this helps.

        <android.support.design.widget.AppBarLayout         android:id="@+id/appbar"         android:layout_width="match_parent"         android:layout_height="wrap_content"         app:layout_scrollFlags="scroll|enterAlways"         android:paddingTop="@dimen/appbar_padding_top"         android:theme="@style/AppTheme.AppBarOverlay">          <android.support.design.widget.TabLayout             android:id="@+id/result_tabs"             android:layout_width="match_parent"             android:layout_height="wrap_content">         </android.support.design.widget.TabLayout>      </android.support.design.widget.AppBarLayout>