Tab inside fragment in Android

Question

I am Trying to add a TabHost Inside a Fragment like in example, getting NullPointerException when calling

mTabHost.setup()

what can be the problem ? code below

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

    View rootView = inflater.inflate(R.layout.tabs_layout,container,false);

    mTabHost = (FragmentTabHost)rootView.findViewById(android.R.id.tabhost);
    mTabHost.setup(getActivity(), getChildFragmentManager(), R.id.tabcontent);

    mTabHost.addTab(mTabHost.newTabSpec("fragmentb").setIndicator("tab1"),
            Fragment1.class, null);
    mTabHost.addTab(mTabHost.newTabSpec("fragmentc").setIndicator("tab2"),
            Fragment2.class, null);
    return rootView;
}

XML:

<android.support.v4.app.FragmentTabHost
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <FrameLayout
            android:id="@+id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            />

    </LinearLayout>
</android.support.v4.app.FragmentTabHost>

Answer 1

This following code is an example I use:

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

    mView = inflater.inflate(R.layout.fragment_tab_destaques, container, false);

    mTabHost = (TabHost) mView.findViewById(android.R.id.tabhost);

    initialiseTabHost();   

    return mView;
}

private void initialiseTabHost() {

    mTabHost.setup();

    String title = "TITLE";

    addTab(getActivity(), this.mTabHost, this.mTabHost.newTabSpec(title).setIndicator(title));

    Typeface tf = Typeface.createFromAsset(getActivity().getAssets(),
            "fonts/Roboto-Bold.ttf");

    for (int i = 0; i < mTabHost.getTabWidget().getChildCount(); i++) {

        TextView tv = (TextView) mTabHost.getTabWidget().getChildAt(i).findViewById(android.R.id.title);

        tv.setTextAppearance(getActivity(), android.R.style.TextAppearance_Medium);
        tv.setTextColor(Color.WHITE);
        tv.setTypeface(tf);

        mTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.selector_actionbar);

    }

    mTabHost.setOnTabChangedListener(this);

}

private static void addTab(Activity activity, TabHost tabHost, TabHost.TabSpec tabSpec) {

    tabSpec.setContent(new InicialTabFactory(activity));
    tabHost.addTab(tabSpec);

}

My fragment_tab_destaques.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    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"
    android:orientation="vertical">

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

            <HorizontalScrollView
                android:id="@+id/horizontalScrollView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fillViewport="true"
                android:scrollbars="none"
                android:background="@color/BlueViolet">

                <TabWidget
                    android:id="@android:id/tabs"
                    android:orientation="horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:backgroundStacked="@color/white"
                    android:weightSum="2" />

            </HorizontalScrollView>

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="0" />

        </LinearLayout>

    </TabHost>

</LinearLayout>

EDIT

InicialTabFactory.java:

public class InicialTabFactory implements TabHost.TabContentFactory {

    private final Context mContext;

    public InicialTabFactory(Context context) {

        mContext = context;

    }

    @Override
    public View createTabContent(String s) {

        View v = new View(mContext);
        v.setMinimumWidth(0);
        v.setMinimumHeight(0);

        return v;
    }

}

Answer 2

Solve your issue + a beautiful Material Design HERE

Answer 3

I have used Tab with viewPager inside fragment. This is my code :-

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.fragment_dashboard_tab, container, false);

    mViewPager = (ViewPager) rootView.findViewById(R.id.pager);
    mViewPager.setAdapter(new TabPageAdapter(getChildFragmentManager(), getActivity()));
    tabHost = (TabHost) rootView.findViewById(android.R.id.tabhost);
    tabHost.setup();
    mViewPager.setOnPageChangeListener(this);
    for (int i = 0; i < tabSpec.length; i++) {
        tabHost.addTab(tabHost.newTabSpec(tabSpec[i]).setIndicator(tabTitle[i]).setContent(mFactory));
    }

    tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
        @Override
        public void onTabChanged(String tabId) {

            if (tabId.equals("Tab_1")) {
                mViewPager.setCurrentItem(0);
            } else if (tabId.equals("Tab_2")) {
                mViewPager.setCurrentItem(1);
            } else if (tabId.equals("Tab_3")) {
                mViewPager.setCurrentItem(2);
            } else if (tabId.equals("Tab_4")) {
                mViewPager.setCurrentItem(3);
            }
        }

    });

    return rootView;
}

This is the layout file :-

<?xml version="1.0" encoding="utf-8"?>

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >

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

<TabWidget
    android:id="@android:id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<FrameLayout
    android:id="@android:id/tabcontent"
    android:layout_width="match_parent"
    android:layout_height="0dp" />

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"/>
</LinearLayout>

</TabHost>

Hope this helps you :)