Fragment tabs within a fragment

Question

I have in my main activity an action bar using tabs using fragments (with material design), as shown below, which works well, but now I want to have a navigation tab in 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 sure TabHost is now deprecated.

I want to achieve the attached image. The blue tabs are at the level of the main activity, and the tabs "Gray date" are in the selected fragment.

I read a few posts about using Tab Host or Fragment Activity, or am I using Activity that applies to Fragment?

Answer 1

Below is the answer I got using the fragment tabs inside the fragment tabs that are in my MainActivity

Inside my snippet, getChildFragmentManager () is used

 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 fit the bloated 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 towards their solution.

Answer 2

To make a more complete answer to the BENN1TH question, I did throw a snippet from the tabbed ActivityMain.

 public class MainActivity extends AppCompatActivity { Button throwFragment; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); throwFragment = (Button) findViewById(R.id.throwFragment); //I add a fragment at run time throwFragment.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //I get the fragments manager instance FragmentManager fragmentManager = getSupportFragmentManager(); //I create a transaction FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); //I create a new fragment and add it to the layout of the activity FixturesTabs fixturesTabs = new FixturesTabs(); fragmentTransaction.replace(R.id.containerTabs, fixturesTabs); //I confirm the change fragmentTransaction.commit(); } }); } } 

activity_main.xml A layout that belongs to the main activity, where I created a button to cut out a fragment at runtime.

 <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="org.itdevelopers.braian.tabsinsidefragment.MainActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" 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:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" android:id="@+id/containerTabs"/> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center"> <Button android:id="@+id/throwFragment" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:text="I throw fragment with tabs" /> </LinearLayout> </android.support.design.widget.CoordinatorLayout> 

IMPORTANT The main activity will be the context of the fragment with tabs, in which case it is necessary to note the importance of the next line in order to follow the style in the design.

It has the functionality that the main action toolbar does not overlap with the TabLayout fragment.

 app:layout_behavior="@string/appbar_scrolling_view_behavior" 

---

Running a snippet with tabs can be very useful when using the bottom navigation bar, because if we use the default tabs that are involved in activity, it will require more resources (check this in Android-Logcat using "No Filters", in milliseconds).

• The moral of the story *: It is preferable to use a TabbedFragment.

This is my first comment in the community, I hope I can work with something. Thanks.