NavigationDrawer and ViewPager in the same Activity in Android

Question

I am trying to create a NavigationDrawer as well as having a ViewPager with sliding tabs in an activity using ActionBarSherlock. I have the tabs and I have created layouts for the view pager and the drawer layout. I know that what I have is that the viewpager layout and drawerlayout are in seperate files and they should probably be in the same file to find the view. Although I do not know how to do this with the code that I have.

I have done a lot of research as to how to do this and the standard pattern is to not do this, although as many people have pointed out, Google Play Music does this. I want my application to look like that and I know that there is a workaround as people have suggested. I am just unsure on how the workaround works with ActionBarSherlock and the code that I currently have implemented. Please can anyone help me with this. Thank you in advance.

Here is my activity code:

public class SlidingTabsActivity extends SherlockFragmentActivity
{
private ViewPager viewPager;
private TabsAdapter tabsAdapter;
private ActionBar actionBarTabs;

/* Navigation drawer */
private DrawerLayout drawerLayout;
private ListView drawerListView;
private ActionBarDrawerToggle drawerToggle;

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

    viewPager = new ViewPager(this);
    viewPager.setId(R.id.pager);
    setContentView(viewPager);

    /* Navigation Drawer */
    drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    drawerListView = (ListView) findViewById(R.id.left_drawer);

    System.out.println("Drawer Layout test:" + drawerLayout.getId());

    drawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
    drawerListView.setAdapter(new ArrayAdapter<String>(this, R.layout.navigation_drawer_list_item, R.array.navigation_drawer_list));
    drawerListView.setOnItemClickListener(new OnItemClickListener()
    {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) 
        {
            // TODO Auto-generated method stub

        }
    });

    actionBarTabs = getSupportActionBar();
    actionBarTabs.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
    actionBarTabs.setDisplayHomeAsUpEnabled(true);
    actionBarTabs.setHomeButtonEnabled(true);

    drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close)
    {
        public void onDrawerClosed(View view) 
        {
            invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
        }

        public void onDrawerOpened(View drawerView) 
        {
            invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
        }
    };
    drawerLayout.setDrawerListener(drawerToggle);

    tabsAdapter = new TabsAdapter(this, viewPager); // Declares the tabs adapter class with the view pager view 

    /* Adds fragments to the tabs adapter */
    tabsAdapter.addTab(actionBarTabs.newTab().setText("PV"), Fragment_1.class, null);
    tabsAdapter.addTab(actionBarTabs.newTab().setText("CONFIG"), Fragment_2.class, null);
    tabsAdapter.addTab(actionBarTabs.newTab().setText("DIAG"), Fragment_3.class, null); 
}

Here is my DrawerLayout layout xml code:

<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/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<ListView
    android:id="@+id/left_drawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:choiceMode="singleChoice"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp"
    android:background="#111"/>

</android.support.v4.widget.DrawerLayout>

And here is my ViewPager layout xml code:

<RelativeLayout 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"
    tools:context=".SlidingTabsActivity" >

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

</RelativeLayout>

Answer 1

Firstly, your Activity has both Navigation Drawer and ViewPager, but I saw you put the layout descriptions in different xml files. But, you must put only one xml file for your Activity.

Considering this, the key point now is: "how to declare DrawerLayout and ViewPager in the same xml?". If you put in wrong order it won't work (I had this same problem, that's why I'm alerting you). So, the answer is to declare the DrawerLayout as root and inside it, the ViewPager, and later, after closing the ViewPager "tag", you declare the ListView of DrawerLayout.

An example:

<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">

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

<ListView android:id="@+id/drawer_list"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:choiceMode="singleChoice"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp"
    android:background="#111" />
</android.support.v4.widget.DrawerLayout>

I hope the answer helps you.