How to add Material design Navigation drawer with sliding tabs?

Question

I want something very similar to this:

I have already added Sliding tabs and it's working perfectly fine but I am not able to figure out how to add a navigation drawer to existing code.

So far, I have created a PagerAdapter class to view different Fragment class. Following is my MainActivity class:

public class MainActivity extends AppCompatActivity {

private Toolbar toolbar;


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

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
    tabLayout.addTab(tabLayout.newTab().setText("Tab1"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab2"));
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

    final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
    final PagerAdapter adapter = new PagerAdapter
            (getSupportFragmentManager(), tabLayout.getTabCount());
    viewPager.setAdapter(adapter);
    viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
    tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            viewPager.setCurrentItem(tab.getPosition());
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {

        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {

    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();


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

    return super.onOptionsItemSelected(item);
}
}

Menu_main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
  ......
  ......
 <item
    android:id="@+id/action_user"
    android:orderInCategory="300"
    android:title="User"
    android:icon="@drawable/ic_drawer"
    app:showAsAction="ifRoom"></item>

 </menu>

In above code I added a icon for open drawer. This my ˚activity_main.xml

<RelativeLayout
android:id="@+id/main_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/toolbar"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>


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

 </RelativeLayout>

Any hint how to add Navigation Drawer to android bar ?

Answer 1

here is useful template for Android Studio, which adds Material Design Navigation Drawer

UPD

To add sliding tabs, include ViewPager with PagerTabStrip in activity_main layout file

<android.support.v4.view.ViewPager
    android:id="@+id/tabanim_viewpager"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" >
    <android.support.v4.view.PagerTabStrip
        android:id="@+id/pager_title_strip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="@color/primary_500"
        android:textColor="@color/white"
        android:paddingTop="5dp"
        android:layout_marginBottom="5dp" />
</android.support.v4.view.ViewPager>

activity onCreate:

PagerTabStrip pagerTabStrip = (PagerTabStrip) findViewById(R.id.pager_title_strip);

    pagerTabStrip.setDrawFullUnderline(false);
    pagerTabStrip.setTabIndicatorColor(getResources().getColor(R.color.red_dark));
    final ViewPager viewPager = (ViewPager) findViewById(R.id.tabanim_viewpager);
    setupViewPager(viewPager);

Code in Activity:

private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
    //adding tabs
    adapter.addFrag(new PinsFragment(), "Pins");
    adapter.addFrag(new BoardsFragment(), "Boards");
    adapter.addFrag(new InterestsFragment(), "Likes");
    adapter.addFrag(new SubscriptionsFragment(), "Subscriptions");
    adapter.addFrag(new FollowersFragment(), "Followers");
    viewPager.setAdapter(adapter);
}