How to implement navigation drawer with fragments master detail

Question

i have get the sample navigation drawer from this site : http://www.androidhive.info/2013/11/android-sliding-menu-using-navigation-drawer/

and the master detail from here : http://wptrafficanalyzer.in/blog/itemclick-handler-for-listfragment-in-android/

the error LogCat oncreateview(inflac....) the view can not be created

me i have try that

    //the main activiry as Activity:

    package in.wptrafficanalyzer.listfragmentitemclick;

import in.wptrafficanalyzer.listfragmentitemclick.adapter.NavDrawerListAdapter;
import in.wptrafficanalyzer.listfragmentitemclick.model.NavDrawerItem;

import java.util.ArrayList;

import in.wptrafficanalyzer.listfragmentitemclick.R;

import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.app.ListFragment;
import android.content.Intent;
import android.content.res.Configuration;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;

public class MainActivity extends Activity implements CountryListFragment.ListFragmentItemClickListener {



    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;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.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), true, "22"));
        // 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), true, "50+"));


        // 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(true);
        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
                invalidateOptionsMenu();
            }

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

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

    /**
     * Slide menu item click listener
     * */
    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
        ListFragment fragment = null;
        switch (position) {
        case 0:
            //fragment = new HomeFragment();
            break;
        case 1:
            fragment = new CountryListFragment();
            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 = getFragmentManager();
            fragmentManager.beginTransaction()
                    .replace(R.id.country_list_fragment, 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);
    }
    /** Called when the activity is first created. */


    @Override
    public void onListFragmentItemClick(int position) {

        /** Getting the orientation ( Landscape or Portrait ) of the screen */
        int orientation = getResources().getConfiguration().orientation;


        /** Landscape Mode */
        if(orientation == Configuration.ORIENTATION_LANDSCAPE ){
            /** Getting the fragment manager for fragment related operations */
            FragmentManager fragmentManager = getFragmentManager();

            /** Getting the fragmenttransaction object, which can be used to add, remove or replace a fragment */
            FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

            /** Getting the existing detailed fragment object, if it already exists. 
             *  The fragment object is retrieved by its tag name 
             * */
            Fragment prevFrag = fragmentManager.findFragmentByTag("in.wptrafficanalyzer.country.details");

            /** Remove the existing detailed fragment object if it exists */
            if(prevFrag!=null)
                fragmentTransaction.remove(prevFrag);           

            /** Instantiating the fragment CountryDetailsFragment */
            CountryDetailsFragment fragment = new CountryDetailsFragment();

            /** Creating a bundle object to pass the data(the clicked item's position) from the activity to the fragment */ 
            Bundle b = new Bundle();

            /** Setting the data to the bundle object */
            b.putInt("position", position);

            /** Setting the bundle object to the fragment */
            fragment.setArguments(b);           

            /** Adding the fragment to the fragment transaction */
            fragmentTransaction.add(R.id.detail_fragment_container, fragment,"in.wptrafficanalyzer.country.details");

            /** Adding this transaction to backstack */
            fragmentTransaction.addToBackStack(null);

            /** Making this transaction in effect */
            fragmentTransaction.commit();

        }else{          /** Portrait Mode or Square mode */
            /** Creating an intent object to start the CountryDetailsActivity */
            Intent intent = new Intent("in.wptrafficanalyzer.CountryDetailsActivity");

            /** Setting data ( the clicked item's position ) to this intent */
            intent.putExtra("position", position);

            /** Starting the activity by passing the implicit intent */
            startActivity(intent);          
        }
    }
}

the CountryListFragment as listfragment :

package in.wptrafficanalyzer.listfragmentitemclick;

import android.app.Activity;
import android.app.ListFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class CountryListFragment extends ListFragment{

    /** List of countries to be displayed in the ListFragment */

    ListFragmentItemClickListener ifaceItemClickListener;   

    /** An interface for defining the callback method */
    public interface ListFragmentItemClickListener {
        /** This method will be invoked when an item in the ListFragment is clicked */
        void onListFragmentItemClick(int position);
    }   

    /** A callback function, executed when this fragment is attached to an activity */  
    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);

        try{
            /** This statement ensures that the hosting activity implements ListFragmentItemClickListener */
            ifaceItemClickListener = (ListFragmentItemClickListener) activity;          
        }catch(Exception e){
            Toast.makeText(activity.getBaseContext(), "Exception",Toast.LENGTH_SHORT).show();
        }
    }

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

        /** Data source for the ListFragment */
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(inflater.getContext(), android.R.layout.simple_list_item_1, Country.name);

        /** Setting the data source to the ListFragment */
        setListAdapter(adapter);    



        return super.onCreateView(inflater, container, savedInstanceState);
    }

    @Override
    public void onListItemClick(ListView l, View v, int position, long id) {    

        /** Invokes the implementation of the method istFragmentItemClick          in     the hosting activity */
        ifaceItemClickListener.onListFragmentItemClick(position);

    }

}

layout main in folder layout

><android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">




<FrameLayout
    android:id="@+id/country_list_fragment"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:name="in.wptrafficanalyzer.listfragmentitemclick.CountryListFragment"
    />


<!-- Listview to display slider menu -->
<ListView
    android:id="@+id/list_slidermenu"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:choiceMode="singleChoice"
    android:divider="@color/list_divider"
    android:dividerHeight="1dp"       
    android:listSelector="@drawable/list_selector"
    android:background="@color/list_background"/>
   > </android.support.v4.widget.DrawerLayout>

layout main in the folder layout-land

><android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">



<FrameLayout
    android:id="@+id/country_list_fragment"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:name="in.wptrafficanalyzer.listfragmentitemclick.CountryListFragment"

    />

<FrameLayout
    android:id="@+id/detail_fragment_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_gravity="center"
    />


<!-- Listview to display slider menu -->
<ListView
    android:id="@+id/list_slidermenu"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:choiceMode="singleChoice"
    android:divider="@color/list_divider"
    android:dividerHeight="1dp"       
    android:listSelector="@drawable/list_selector"
    android:background="@color/list_background"/>
   ></android.support.v4.widget.DrawerLayout>

Siphonophore

Answer 1

I was confused by this, too. I set up the Navigation Drawer to navigate between major sections of my app. Then I wanted one of those major sections to be set up as Master/Detail. I knew it was possible, since this is basically what Gmail is, but was having a hard time putting what I had already built together with what Eclipse spits out when generating a Master/Detail Activity.

I couldn't just launch the ItemListFragment (Master/Detail) from the MainActivity (Navigation Drawer), because ItemListFragment wants to attach to ItemListActivity, not MainActivity, and a fragment can't have two Activities.

I finally found a tutorial on it that actually used the two design ideas together: http://blog.evizija.si/android-layout/

I just followed their example and got my UI working as desired in about 5 minutes. It's actually incredibly simple. You make MasterActivity look a bit more like the generated ItemListActivity (ie. implement TaskListFragment.Callbacks, copy over the onItemSelected method, and a chuck of onCreate) and you're done!

I hope this helps solve your problem! Happy coding!

---

UPDATE: Elaborating on the steps involved (info from link), based on feedback in comments on improving my answer.

(1) Make your drawer activity and fragments, lets call them MainActivity and some fragments we don't care about here. Personally, I would create an empty Fragment, like ItemFragement for example, to be a place holder for the Master/Detail while I get the Drawer up and running. Then once the Drawer is working as desired, tackle the Master/Detail and linking them.

(2) Use the IDE wizard (I'm running Eclipse) to make the activities and fragments of master/detail flow. I'll refer to them by their default names: ItemListActivity, ItemListFragement, ItemDetailActivity, ItemDetailFragment.

(3) If you've used Master/Detail before, you know most of your logic goes into the fragment. This is still true when combining Master/Detail with Drawer. Note, at this point there is no connection between our MainActivity and our Master/Detail flow, and the later may not even be accessible in the UI.

(4) Key Concept: To connect the Drawer with the List, our MainActivity is going to be the hosting Activity for ItemListFragment (rather than the current ItemListActivity). To make this work, we just copy over some of the Master/Detail magic created by the wizard FROM ItemListActivity INTO MainActivity.

(5) Specifically:

(5A) MainActivity implements ItemListFragment.Callbacks (or EmployeeListFragment.Callbacks, AlbumListFragment.Callbacks, whatever you are listing) and implement onItemSelected method

public class MainActivity extends Activity 
                          implements OnItemClickListener, ItemListFragment.Callbacks {

(5B) Copy part of code from onCreate in ItemListActivity and paste it to onCreate in MainActivity. This part:

if (findViewById(R.id.item_detail_container) != null) {
    // The detail container view will be present only in the
    // large-screen layouts (res/values-large and
    // res/values-sw600dp). If this view is present, then the
    // activity should be in two-pane mode.
    mTwoPane = true;

    // In two-pane mode, list items should be given the
    // 'activated' state when touched.
    ((ItemListFragment) getFragmentManager()
            .findFragmentById(R.id.item_list))
            .setActivateOnItemClick(true);
}

(5C) Also copy onItemSelected method from ItemListActivity and paste it into MainActivity. You will already have an onItemSelected method if you told Eclipse to "add unimplemented methods" in response to the error that would have been raised after Step 5A. If you don't, copy over the whole method. (this step edited in response to a question in comments) Code:

if (mTwoPane) {
    // In two-pane mode, show the detail view in this activity by
    // adding or replacing the detail fragment using a
    // fragment transaction.
    Bundle arguments = new Bundle();
    arguments.putString(ItemDetailFragment.ARG_ITEM_ID, id);
    ItemDetailFragment fragment = new ItemDetailFragment();
    fragment.setArguments(arguments);
    getFragmentManager().beginTransaction()
            .replace(R.id.item_detail_container, fragment)
            .commit();

} else {
    // In single-pane mode, simply start the detail activity
    // for the selected item ID.
    Intent detailIntent = new Intent(this, ItemDetailActivity.class);
    detailIntent.putExtra(ItemDetailFragment.ARG_ITEM_ID, id);
    startActivity(detailIntent);
}

(6) Then the last step is to have MainActivity (the Drawer) open ItemListFragment. If you already have a placeholder Fragment launching (like ItemFragement suggested in Step 1), this is just a matter of replacing ItemFragment with ItemListFragment in the onNavigationDrawerItemSelected method.

Hope that's clear. If not, the original link might do a better job explaining than I did. Just skim to the bottom where the blogger talks about adding the list activity to their drawer activity.

cheers.

---

UPDATE:

After being ask to do so by a moderator, I'm flagging this and another similar question (as duplicates).

Those questions:
https://stackoverflow.com/questions/25403377/combine-navigation-drawer-and-master-detail-layout
Navigation Drawer and master/detail flow

---

Epenthesis

It's helpful to give the actual code examples that worked, since links to blogs, etc. may become dead after awhile – Hoppe

MainActivity is a Nav Drawer activity, so it does not have a onSelectedItem method. So where does this code go? Does it go into onNavigationDrawerItemSelected? Because that looks wrong. – Gram

@RayKiddy it goes in onItemSelected. You need to add that method after specifying that MainActivity implements ItemListFragment.Callbacks, step 5A. I've also added this clarification to my answer for posterity. – Epenthesis

The blog by E. Vizija was helpful, but your step-by-step numbered instructions removed any remaining confusion about how to accomplish this. – Occlusive