How to implement Navigation Drawer and SlidingTabLayout together?

Question

I have implemented the Navigation Drawer. This is activity_nav_drawer :

This is NavDrawer.java :

    public class NavDrawer extends ActionBarActivity
    implements NavigationDrawerFragment.NavigationDrawerCallbacks {

/**
 * Fragment managing the behaviors, interactions and presentation of the navigation drawer.
 */
private NavigationDrawerFragment mNavigationDrawerFragment;

/**
 * Used to store the last screen title. For use in {@link #restoreActionBar()}.
 */
private CharSequence mTitle;

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

    mNavigationDrawerFragment = (NavigationDrawerFragment)
            getSupportFragmentManager().findFragmentById(R.id.navigation_drawer);
    mTitle = getTitle();

    // Set up the drawer.
    mNavigationDrawerFragment.setUp(
            R.id.navigation_drawer,
            (DrawerLayout) findViewById(R.id.drawer_layout));
}


@Override
public void onNavigationDrawerItemSelected(int position) {

    Fragment objFragment = null;

    switch(position){
        case 0:
            objFragment = new Menu1_Fragment();
            break;
        case 1:
            objFragment = new Menu2_Fragment();
            break;
        case 2:
            objFragment = new Menu3_Fragment();
            break;
    }

    // update the main content by replacing fragments
    FragmentManager fragmentManager = getSupportFragmentManager();
    fragmentManager.beginTransaction()
            .replace(R.id.container, objFragment)
            .commit();
}

public void onSectionAttached(int number) {
    switch (number) {
        case 1:
            mTitle = getString(R.string.title_section1);
            break;
        case 2:
            mTitle = getString(R.string.title_section2);
            break;
        case 3:
            mTitle = getString(R.string.title_section3);
            break;
    }
}

public void restoreActionBar() {
    ActionBar actionBar = getSupportActionBar();
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
    actionBar.setDisplayShowTitleEnabled(true);
    actionBar.setTitle(mTitle);
}


@Override
public boolean onCreateOptionsMenu(Menu menu) {
    if (!mNavigationDrawerFragment.isDrawerOpen()) {
        // Only show items in the action bar relevant to this screen
        // if the drawer is not showing. Otherwise, let the drawer
        // decide what to show in the action bar.
        getMenuInflater().inflate(R.menu.nav_drawer, menu);
        restoreActionBar();
        return true;
    }
    return super.onCreateOptionsMenu(menu);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}

/**
 * A placeholder fragment containing a simple view.
 */
public static class PlaceholderFragment extends Fragment {
    /**
     * The fragment argument representing the section number for this
     * fragment.
     */
    private static final String ARG_SECTION_NUMBER = "section_number";

    /**
     * Returns a new instance of this fragment for the given section
     * number.
     */
    public static PlaceholderFragment newInstance(int sectionNumber) {
        PlaceholderFragment fragment = new PlaceholderFragment();
        Bundle args = new Bundle();
        args.putInt(ARG_SECTION_NUMBER, sectionNumber);
        fragment.setArguments(args);
        return fragment;
    }

    public PlaceholderFragment() {
    }

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

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

}

Each item in my Navigation Drawer corresponds to a fragment, namely Menu1_Fragment, Menu2_Fragment, Menu3_Fragment with each having its own layout file.

Now I want to implement a SlidingTabLayout in just the first item of my Navigation Drawer i.e. the Menu1_Fragment.

How do I do this? I have watched many tutorials but all of those implement the SlidingTabLayout in a seperate Activity but I want to implement it in a Fragment of Navigation Drawer. (or maybe it can be implemented in the Navigation Drawer Activity for just the first fragment, I don't know).

I've copied the java source files for SlidingTabLayout.java and SlidingTabStrip.java. Please suggest me how to proceed on this.

Jyotman Singh · Accepted Answer

Figured it out. Followed this tutorial :

http://www.android4devs.com/2015/01/how-to-make-material-design-sliding-tabs.html

I implemented this tutorial on a fragment instead of an activity. The fragment was the first section or fragment of my Navigation Drawer. The only differences were that I wrote the code in my Fragment's layout and Java file instead of my NavDrawer Activity's files. The the Java code needs to be written in onCreateView() instead of onCreate() because its a Fragment. Secondly in the Java code of our Fragment, we need to pass the parameter getChildFragmentManager instead of getSupportFragmentManager in the constructor call of ViewPagerAdapter.

Here's the Java Code :

    package com.example.jyot.advanceparking;

    public class Menu1_Fragment extends Fragment {

ViewPager pager;
ViewPagerAdapter adapter;
SlidingTabLayout tabs;
CharSequence Titles[]={"Home","Events"};
int Numboftabs =2;

View rootView;

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

    // Creating The ViewPagerAdapter and Passing Fragment Manager, Titles fot the Tabs and Number Of Tabs.
    adapter =  new ViewPagerAdapter(getChildFragmentManager(), Titles, Numboftabs);

    // Assigning ViewPager View and setting the adapter
    pager = (ViewPager) rootView.findViewById(R.id.pager);
    pager.setAdapter(adapter);

    // Assiging the Sliding Tab Layout View
    tabs = (SlidingTabLayout) rootView.findViewById(R.id.tabs);
    tabs.setDistributeEvenly(true); // To make the Tabs Fixed set this true, This makes the tabs Space Evenly in Available width

    // Setting the ViewPager For the SlidingTabsLayout
    tabs.setViewPager(pager);

    return rootView;
}

}

After this just follow the tutorial as it is.

How to implement Navigation Drawer and SlidingTabLayout together?

Answers (2)

Related Questions