Why tabs are not visible inside fragment?

Question

In my app I want to use swipe views of four tabs inside a fragment. The four tabs are contains different fragments each and all the four fragments are sliding by swipe from right to left or vice versa. The fragments are working fine but the tabs are not visible within the fragment. Anyone have any solution for this. Thanks in advance :)

this is the main fragment which contains the tabs:-

public class DashboardTabFragment extends Fragment implements ActionBar.TabListener {

private static final String ARG_SECTION_NUMBER = "arg_section_number";
private String[] tabTitle = {"Cleanness", "Product Display", "Hygiene", "Asm Visits"};

public static DashboardTabFragment newInstance(int position) {
    DashboardTabFragment fragment = new DashboardTabFragment();
    Bundle args = new Bundle();
    args.putInt(ARG_SECTION_NUMBER, position);
    fragment.setArguments(args);
    return fragment;
}

private ViewPager viewPager;

public DashboardTabFragment() {
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
}

@TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.fragment_dashboard_tab, container, false);
    setHasOptionsMenu(true);
    ActionBar actionBar = ((ActionBarActivity) getActivity()).getSupportActionBar();
    assert actionBar != null;
    actionBar.setHomeButtonEnabled(false);
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
    actionBar.setHomeButtonEnabled(true);
    actionBar.setDisplayOptions(0, ActionBar.DISPLAY_SHOW_TITLE);
    viewPager = (ViewPager) rootView.findViewById(R.id.pager);
    TabPageAdapter tabPageAdapter = new TabPageAdapter(getActivity().getSupportFragmentManager(), getActivity());
    viewPager.setAdapter(tabPageAdapter);
    for (String aTabTitle : tabTitle)
        actionBar.addTab(actionBar.newTab().setText(aTabTitle).setTabListener(this));
    return rootView;
}

This is the adapter for fragments:-

    public class TabPageAdapter extends FragmentPagerAdapter {
Context context;
public TabPageAdapter(FragmentManager fm,Context context) {
    super(fm);
    this.context = context;
}

@Override
public Fragment getItem(int position) {

    switch (position) {
        case 0:
            return new CleannessChartFragment(context);
        case 1:
            return new ProductDisplayChartFragment(context);
        case 2:
            return new HygieneChartFragment(context);
        case 3:
            return new AsmVisitsChartFragment(context);
    }

    return null;
}

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

`but the tabs are not visible within the fragment?` Please be descriptive! — Muhammad Babar, Dec 03 '14 at 07:51
Have u checked the Layout width and height of fragment you have created or please check how are you placing TabView in your xml. This type of issues comes when you are using LinearLayout with first widget width and height defined to acquire full width and height of device. — Roll no1, Dec 03 '14 at 09:13
Yes , please check fragment_dashboard_tab.xml and check what height width you have defined for R.id.pager — Roll no1, Dec 03 '14 at 10:11
When I select the fragment from the navigation drawer the tabs are visible for fraction of seconds then vanished but the Actionbar is always vsible. Actually the Dashboard fragment is the container of tabs. Can a fragment contain tabs, which tabs are contain fragments? — Biswajit, Dec 03 '14 at 10:32
AFAIK fragment cannot contains tabs , main container for tabs will be Activity and each tab, container will be fragment. In Activity there will be one container which will change with the fragment that you have associated with different tabs. — Roll no1, Dec 03 '14 at 12:06
`Can a fragment contain tabs, which tabs are contain fragments` Yes but you have to use `ChildFragmentManager` for nested fragments! — Muhammad Babar, Dec 03 '14 at 12:54

Biswajit · Accepted Answer · 2015-07-08T10:37:53.673

I found the solution. I used TabHost for tabs with viewpager.

This is my fragment :-

package com.itpp.trt;

import android.annotation.TargetApi;
import android.app.Activity;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTabHost;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TabHost;

public class DashboardTabFragment extends Fragment implements ViewPager.OnPageChangeListener {

private static final String ARG_SECTION_NUMBER = "arg_section_number";
private ViewPager mViewPager;
private TabHost tabHost;
private String[] tabSpec = {"Tab_1", "Tab_2", "Tab_3", "Tab_4"};
private String[] tabTitle = {"Cleanness", "Product Display", "Hygiene", "Asm Visits"};


private TabHost.TabContentFactory mFactory = new TabHost.TabContentFactory() {

    @Override
    public View createTabContent(String tag) {
        View v = new View(getActivity());
        v.setMinimumHeight(0);
        return v;
    }
};

public static DashboardTabFragment newInstance(int position) {
    DashboardTabFragment fragment = new DashboardTabFragment();
    Bundle args = new Bundle();
    args.putInt(ARG_SECTION_NUMBER, position);
    fragment.setArguments(args);
    return fragment;
}

public DashboardTabFragment() {
    tabHost = null;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
}

@TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)
@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;
}


@Override
public void onAttach(Activity activity) {
    super.onAttach(activity);
    ((MyActivity) activity).onSectionAttached(getArguments().getInt(ARG_SECTION_NUMBER));
}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {
    tabHost.setCurrentTab(position);
}

@Override
public void onPageScrollStateChanged(int state) {

}

@Override
public void onDetach() {
    super.onDetach();

}
}

This is my tabpager adapter :-

package com.itpp.trt;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;

/**
 * Created by biswajit on 28-11-14.
 */
public class TabPageAdapter extends FragmentStatePagerAdapter{
Context context;
public TabPageAdapter(FragmentManager fm,Context context) {
    super(fm);
    this.context = context;
}

@Override
public Fragment getItem(int position) {

    switch (position) {
        case 0:
            return new CleannessChartFragment(context);
        case 1:
            return new ProductDisplayChartFragment(context);
        case 2:
            return new HygieneChartFragment(context);
        case 3:
            return new AsmVisitsChartFragment(context);
    }

    return null;
}

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

}

Hope this helps other. Thanks :)

Why tabs are not visible inside fragment?

1 Answers1