How to add tabhost with navigation drawer?

Question

I am new to android development,I used navigation drawer from this http://www.androidhive.info/2013/11/android-sliding-menu-using-navigation-drawer/

Now I want to add Tabhost with it..can anyone help me with this? The following is my code I tried..I do not know It is not showing why..

   public class MainActivity extends FragmentActivity {
      private DrawerLayout mDrawerLayout;
      private ListView mDrawerList;
      private ActionBarDrawerToggle mDrawerToggle;

     // nav drawer title
      private CharSequence mDrawerTitle;

    // used to store app title
     private CharSequence mTitle;

     // slide menu items

     private String[] navMenuTitles;
     private TypedArray navMenuIcons;

     private ArrayList<NavDrawerItem> navDrawerItems;
     private NavDrawerListAdapter adapter;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTitle = mDrawerTitle = getTitle();

        // load slide menu items
        navMenuTitles = getResources().getStringArray(R.array.nav_drawer_items);

        // nav drawer icons from resources
        navMenuIcons = getResources()
                .obtainTypedArray(R.array.nav_drawer_icons);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.list_slidermenu);

        navDrawerItems = new ArrayList<NavDrawerItem>();
        // adding nav drawer items to array
        // Home
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[0], navMenuIcons
                .getResourceId(0, -1)));
        // Find People
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[1], navMenuIcons
                .getResourceId(1, -1)));
        // Photos
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[2], navMenuIcons
                .getResourceId(2, -1)));
        // Communities, Will add a counter here
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[3], navMenuIcons
                .getResourceId(3, -1)));
        // Pages
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[4], navMenuIcons
                .getResourceId(4, -1)));
        // What's hot, We will add a counter here
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[5], navMenuIcons
                .getResourceId(5, -1)));

        // Recycle the typed array
        navMenuIcons.recycle();

        mDrawerList.setOnItemClickListener(new SlideMenuClickListener());

        // setting the nav drawer list adapter
        adapter = new NavDrawerListAdapter(getApplicationContext(),
                navDrawerItems);
        mDrawerList.setAdapter(adapter);

        // enabling action bar app icon and behaving it as toggle button
        getActionBar().setDisplayHomeAsUpEnabled(false);
        getActionBar().setHomeButtonEnabled(true);

        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                R.drawable.ic_drawer, // nav menu toggle icon
                R.string.app_name, // nav drawer open - description for
                                    // accessibility
                R.string.app_name // nav drawer close - description for
                                    // accessibility
        ) {
            public void onDrawerClosed(View view) {
                getActionBar().setTitle(mTitle);
                // calling onPrepareOptionsMenu() to show action bar icons
                getActionBar().setIcon(R.drawable.ic_drawer);
                invalidateOptionsMenu();
            }

            public void onDrawerOpened(View drawerView) {
                getActionBar().setTitle(mDrawerTitle);
                // calling onPrepareOptionsMenu() to hide action bar icons
                getActionBar().setIcon(R.drawable.ic_drawer);
                invalidateOptionsMenu();
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        if (savedInstanceState == null) {
            // on first time display view for first nav item
            displayView(0);
        }
    }

private class SlideMenuClickListener implements
        ListView.OnItemClickListener {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position,
            long id) {
        // display view for selected nav drawer item
        displayView(position);
    }
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // toggle nav drawer on selecting action bar app icon/title
    if (mDrawerToggle.onOptionsItemSelected(item)) {
        return true;
    }
    // Handle action bar actions click
    switch (item.getItemId()) {
    case R.id.action_settings:
        return true;

    default:
        return super.onOptionsItemSelected(item);
    }
}

/* *
 * Called when invalidateOptionsMenu() is triggered
 */
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
    // if nav drawer is opened, hide the action items
    boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
    menu.findItem(R.id.action_settings).setVisible(!drawerOpen);
    return super.onPrepareOptionsMenu(menu);
}

/**
 * Diplaying fragment view for selected nav drawer list item
 * */
private void displayView(int position) {
    // update the main content by replacing fragments
    Fragment fragment = null;
    switch (position) {
    case 0:
        fragment = new HomeFragment();
        break;
   /* case 1:
        fragment = new FindPeopleFragment();
        break;
    case 2:
        fragment = new PhotosFragment();
        break;
    case 3:
        fragment = new CommunityFragment();
        break;
    case 4:
        fragment = new PagesFragment();
        break;
    case 5:
        fragment = new WhatsHotFragment();
        break;
    */
    default:
        break;
    }

    if (fragment != null) {
        FragmentManager fragmentManager = getSupportFragmentManager();
        fragmentManager.beginTransaction()
                .replace(R.id.frame_container, fragment).commit();

        // update selected item and title, then close the drawer
        mDrawerList.setItemChecked(position, true);
        mDrawerList.setSelection(position);
        setTitle(navMenuTitles[position]);
        mDrawerLayout.closeDrawer(mDrawerList);
    } else {
        // error in creating fragment
        Log.e("MainActivity", "Error in creating fragment");
    }
}

@Override
public void setTitle(CharSequence title) {
    mTitle = title;
    getActionBar().setTitle(mTitle);
}

/**
 * When using the ActionBarDrawerToggle, you must call it during
 * onPostCreate() and onConfigurationChanged()...
 */

@Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    // Sync the toggle state after onRestoreInstanceState has occurred.
    mDrawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    // Pass any configuration change to the drawer toggls
    mDrawerToggle.onConfigurationChanged(newConfig);
}

}

Homefragment

public class HomeFragment extends Fragment {


private FragmentTabHost mTabHost;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
mTabHost = new FragmentTabHost(getActivity());
mTabHost.setup(getActivity(), getChildFragmentManager(), R.layout.fragment_home);

Bundle arg1 = new Bundle();
arg1.putInt("Arg for Frag1", 1);
mTabHost.addTab(mTabHost.newTabSpec("Tab1").setIndicator("Frag Tab1"),
    PhotosActivity.class, arg1);

Bundle arg2 = new Bundle();
arg2.putInt("Arg for Frag2", 2);
mTabHost.addTab(mTabHost.newTabSpec("Tab2").setIndicator("Frag Tab2"),
    PhotosActivity.class, arg2);

return mTabHost;
}

@Override
public void onDestroyView() {
super.onDestroyView();
mTabHost = null;
}

fragment_home.xml

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

    <LinearLayout 
            android:id="@+id/LinearLayout01"
            android:orientation="vertical" 
            android:layout_height="fill_parent"
            android:layout_width="fill_parent">

            <TabWidget 
                android:id="@android:id/tabs"
                android:layout_height="wrap_content" 
                android:layout_width="fill_parent">
            </TabWidget>
            <android.support.v4.view.ViewPager
      android:id="@+id/view_pager"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />

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

    </LinearLayout>

    </TabHost>

Ropedancer

Do you mean that you want a TabHost inside the drawer? What have you tried so far? – Dichroite

Look at here: #26483569 – Dynamics

@Dichroite mainactivity is same as given in androidhhive exmple..but i change Homefragment.. – Ropedancer

@AnshulTyagi is that what i want?? – Ropedancer

@chiragboghani The link that provided Anshul Tyagi might help you, as the code is already provided – Dichroite

I am not getting output still – Ropedancer

don't post all codes.just show me the link where you get the tabhost code? – Openhearth

@chiragboghani just a minute.will reply you shortly – Openhearth

show me your fragment_home.xml . – Openhearth

as per my code its giving error..I am not allowing to post image of logcat errors..but it gives..Caused by: java.lang.IllegalStateException: Must call setup() that takes a Context and FragmentManager – Ropedancer

see my edited question i post xml – Ropedancer

implement that code in mainactivity.So that you can get the expected result.Dont implement that navigation drawer code in HomeFragment.Because it extends fragment. – Openhearth

do you want to insert tabs in the 1st fragment of the navigation drawer? – Cranage

@KostasMatrix yeah thats what i want..can you help me ? – Ropedancer

you can check my answer here. if this does not help you tell me – Cranage

no i just show you something simpler...but if it does not help you tell me to create a navigation drawer for you – Cranage

@KostasMatrix I want to use same navigation drawer which i mentioned in question.. – Ropedancer

@chiragboghani I seen that android hive link for navigation drawer.can you show me the link where you get the HomeFragment.java code? – Openhearth

check here..#9529767 – Ropedancer

@chiragboghani see this http://www.androidhive.info/2013/10/android-tab-layout-with-swipeable-views-1/ and http://www.androidhive.info/2011/08/android-tab-layout-tutorial/ check out this two.and tell me Which one you need to do? – Openhearth

i already follow that but with navigation drawer its not working..did you see my mainactivity..it is same as androidhive example of navigation drawer.. – Ropedancer

@chiragboghani it will work definitely.I did it. – Openhearth

@chiragboghani can you tell me,are you using kitkat api 19 in eclipse? – Openhearth

@Naruto did you get solved? – Ropedancer

Answer 1

So in order to do this modify the HomeFragment like this:

public class HomeFragment extends Fragment {

private TabHost mTabHost;
 private ViewPager mViewPager;
 private TabsPagerAdapter mTabsAdapter;

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

     View rootView = inflater.inflate(R.layout.fragment_home, container, false);
     mViewPager = (ViewPager)rootView.findViewById(R.id.pager);
     mTabsAdapter= new YourAdapter(getSupportFragmentManager());
     mViewPager.setAdapter(mTabsAdapter);
     PagerSlidingTabStrip tabs = (PagerSlidingTabStrip)rootView.findViewById(R.id.tabs);
     tabs.setViewPager(pager);
     return rootView;
 }  

Your Adapter Class

public class YourAdapter extends FragmentStatePagerAdapter {
    private String[] titles = { "Item 1", "Item 2", "Item 3" };
    public YourAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int i) {
        switch(i){
           case 0:{
              return new FragementA();
           }case 1:{
              return new FragmentB();
           }case 2:{
              return new FragmentC();
           }
        }
    }

    @Override
    public int getCount() {
        return titles.length;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

Your layout file for the viewpager:

Compile this dependency in order to use it: compile 'com.astuetz:pagerslidingtabstrip:1.0.1'

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <com.astuetz.PagerSlidingTabStrip
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="48dip" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

The Fragment that the viewpager will create for each tab will be like:

public class FragmentA extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater,
            ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.my_layout_file, container, false);
        //Simple implementation how to target text view in your layout
        Button tv = (Button)rootView.findViewById(R.id.my_button_view);
        return rootView;
    }
}

And the layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="#ccc"
    android:layout_height="match_parent">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/my_button_view"
        android:layout_marginTop="175dp" />

</RelativeLayout>

I hope it helps!!!!

Cranage

Answer 2

You not added any view for your TabHost View. Try to add view in your setIndicator() method like this.

public class HomeFragment extends Fragment {
private FragmentTabHost mTabHost;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    mTabHost = new FragmentTabHost(getActivity());
    mTabHost.setup(getActivity(), getChildFragmentManager(),
            R.layout.fragment_home);
    Bundle arg1 = new Bundle();
    arg1.putInt("Arg for Frag1", 1);
    View view = LayoutInflater.from(getActivity()).inflate(
            R.layout.yourview1, null);
    mTabHost.addTab(mTabHost.newTabSpec("Tab1").setIndicator(view),
            PhotosActivity.class, arg1);
    Bundle arg2 = new Bundle();
    arg2.putInt("Arg for Frag2", 2);
    View view = LayoutInflater.from(getActivity()).inflate(
            R.layout.yourview2, null);
    mTabHost.addTab(mTabHost.newTabSpec("Tab2").setIndicator(view),
            PhotosActivity.class, arg2);
    return mTabHost;
}

@Override
public void onDestroyView() {
    super.onDestroyView();
    mTabHost = null;
}

Jensen