How to load a fragment view in a tab

Question

I am trying to create tabs inside a fragment. I manage to create tab inside the fragment, but now I want to load different fragment for each tab (fragment1.class and fragment2.class).

Can anybody please suggest how can i load each fragment to their respective tabs?

Below is my main fragment that is holding the tabs.

Thanks a lot!

public class BusFragment extends Fragment {

    private TabHost mTabHost;
    View rootView;

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            rootView = inflater.inflate(R.layout.fragment_bus, container, false);
            mTabHost = (TabHost) rootView.findViewById(R.id.tabHost);
            mTabHost.setup();

            TabHost.TabSpec spec = mTabHost.newTabSpec("tag");
            spec.setIndicator("Fragment1");
            spec.setContent(new TabHost.TabContentFactory() {

                @Override
                public View createTabContent(String tag) {
                    // TODO Auto-generated method stub
                    return (new AnalogClock(getActivity()));

                }
            });
            mTabHost.addTab(spec);

            spec = mTabHost.newTabSpec("tag1");
            spec.setIndicator("Fragment2");
            spec.setContent(new TabHost.TabContentFactory() {

                @Override
                public View createTabContent(String tag) {
                    // TODO Auto-generated method stub
                    return (new AnalogClock(getActivity()));
                }
            });
            mTabHost.addTab(spec);

            spec = mTabHost.newTabSpec("tag2");
            spec.setIndicator("Fragment3");
            spec.setContent(new TabHost.TabContentFactory() {

                @Override
                public View createTabContent(String tag) {
                    // TODO Auto-generated method stub
                    return (new AnalogClock(getActivity()));
                }
            });
            mTabHost.addTab(spec);

            return rootView;
        }
}

score 0 · Answer 1 · answered Apr 17 '15 at 05:07

Hello If you want to load the fragment inside the fragment android provide the Child Fragment Manager instead of ordinary fragment manager. I had the same issue I had the fragment inside that tab when click on tab want to load the different fragments. see the below steps hope will help you.

Step 1. See I have StatisticsFragment with it layout fragment_statistics.

public class StatisticsFragment extends Fragment {

    private FragmentTabHost mTabHost;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_statistics,container, false);
        mTabHost = (FragmentTabHost) rootView.findViewById(R.id.tabhost);

        mTabHost.setup(getActivity(), getChildFragmentManager(),R.id.tabFrameLayout);
        mTabHost.addTab(mTabHost.newTabSpec("WEEK").setIndicator(buildTabLayout(EnumStatistics.WEEKLY)),WeekFragment_.class, null);
        mTabHost.addTab(mTabHost.newTabSpec("ALL").setIndicator(buildTabLayout(EnumStatistics.ALL)),DetailedFragment_.class, null);

        mTabHost.getTabWidget().getChildAt(0).setOnClickListener(new WeekTabClick());

        mTabHost.getTabWidget().getChildAt(1).setOnClickListener(new AllTabClick());

        return rootView;
    }

    @Override
    public void onResume() {
        super.onResume();
    }

    private View buildTabLayout(EnumStatistics enumStatistics) {
        View tab;
        if (enumStatistics == EnumStatistics.WEEKLY) {
            tab = getActivity().getLayoutInflater().inflate(R.layout.tab_week_layout, null);
        } else if (enumStatistics == EnumStatistics.MONTHLY) {
            tab = getActivity().getLayoutInflater().inflate(R.layout.tab_month_layout, null);
        } else if (enumStatistics == EnumStatistics.YEAR) {
            tab = getActivity().getLayoutInflater().inflate(R.layout.tab_year_layout, null);
        } else {
            tab = getActivity().getLayoutInflater().inflate(R.layout.tab_detailed_layout, null);
        }
        return tab;
    }



    public class WeekTabClick implements View.OnClickListener {

        @Override
        public void onClick(View v) {

            mTabHost.getTabWidget().focusCurrentTab(0);
            FragmentTransaction ft = getChildFragmentManager().beginTransaction();
            ft.replace(R.id.tabFrameLayout, WeekFragment_.instantiate(getActivity(), WeekFragment_.class.getName()));
            ft.addToBackStack(null);
            ft.commit();

        }
    }

    public class AllTabClick implements View.OnClickListener {

        @Override
        public void onClick(View v) {

            mTabHost.getTabWidget().focusCurrentTab(1);
            FragmentTransaction ft = getChildFragmentManager()
                    .beginTransaction();
            ft.replace(R.id.tabFrameLayout, DetailedFragment_.instantiate(
                    getActivity(), DetailedFragment_.class.getName()));
            ft.addToBackStack(null);
            ft.commit();

        }
    }
}

In above buildTabLayout function intent to build the custom layout of tab widget you can put simple text or image that you want to show inside the tab widget.

Steps 2. fragment_statistics.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:relaxis="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v4.app.FragmentTabHost
        android:id="@+id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/croutonview"
        android:gravity="center" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <TabWidget
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:orientation="horizontal"
                />

            <FrameLayout
                android:id="@+id/tabFrameLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </android.support.v4.app.FragmentTabHost>

</RelativeLayout>

As you see in the above inside the layout tabFrameLayout we load the all child fragment Programmaticly.

Let me know if you have any question and doubt. thank you

How to load a fragment view in a tab

1 Answers1