Android Studio: Use Navigation Drawer with Tabs

by Jesmin Akther | Oct 23, 2018 | Android

 Use Navigation Drawer with Tabs in Android.

Navigation drawers provide access to destinations and app functionality, switching tabs. Tabs can either be permanently on-screen or controlled by a navigation menu icon. Navigation drawers are consumed for, with five or more top-level targets, two or more levels of navigation hierarchy, Fast navigation between unrelated target.

Firstly create new project like

File -> new project -> Name it as like NavigationDraweerwithTabs -> select minimum SDK like 14 ->select Navigation Drawer Activity.

Goto app_bar_main.xml

1. Under Toolbar add TabLayout.
2. Here added three tabs more
3. Remove FloatingActionButton.
4. Give TabLayout id as tabs.
5. Make tabMode scrollable.

Here is,

app_bar_main.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout 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="com.example.nipu.navigationwithtabs.MainActivity">



    <include layout="@layout/content_main" />



    <android.support.design.widget.AppBarLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="#008080"

        android:theme="@style/AppTheme.AppBarOverlay">



        <android.support.v7.widget.Toolbar

            android:id="@+id/toolbar"

            android:layout_width="match_parent"

            android:layout_height="?attr/actionBarSize"

            android:background="#008080"

            app:popupTheme="@style/AppTheme.PopupOverlay"

             />



        <android.support.design.widget.TabLayout

            app:tabMode="scrollable"

            android:id="@+id/tabs"

            android:layout_width="match_parent"

            android:layout_height="match_parent">



            <android.support.design.widget.TabItem

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="One" />



            <android.support.design.widget.TabItem

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Two" />



            <android.support.design.widget.TabItem

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Three" />



            <android.support.design.widget.TabItem

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Four" />



            <android.support.design.widget.TabItem

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Five" />



            <android.support.design.widget.TabItem

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Six" />

        </android.support.design.widget.TabLayout>



    </android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>

Remove floatingActionButton code portion from MainnActivity.java

• Create java class tabpagerAdapter which extends FragmentStatePagerAdapter.
• Using ALT+ENTER implements all the methods and constructor.
• Add an Override method getPageTitle charsequence type which returns tabs String type array with position.
• Add viewpager in content_main.xml.
• Create six blank fragments with xml. In tabpagerAdapter, Overridden method getItem() add switch statement to add corresponding tabs.
• Overridden method getItem() return the number of tabs.

Here is,

content_main.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout

    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"

    app:layout_behavior="@string/appbar_scrolling_view_behavior"

    tools:context="com.example.nipu.navigationwithtabs.MainActivity"

    tools:showIn="@layout/app_bar_main">





    <android.support.v4.view.ViewPager

        android:id="@+id/viewpager"

        android:layout_width="match_parent"

        android:layout_height="match_parent">



    </android.support.v4.view.ViewPager>



</android.support.constraint.ConstraintLayout>

tabpagerAdapter.java

package com.example.nipu.navigationwithtabs;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentStatePagerAdapter;

public class tabpagerAdapter extends FragmentStatePagerAdapter {


    String[] tabarray = new String[]{"One","Two","Three","Four","Five","Six"};

    Integer tabnumber = 6;



    public tabpagerAdapter(FragmentManager fm) {

        super(fm);

    }



    @Override

    public CharSequence getPageTitle(int position) {

        return tabarray[position];

    }



    @Override

    public Fragment getItem(int position) {



        switch (position)

        {

            case 0:

                one one1 = new one();

                return one1;

            case 1:

                two two2 = new two();

                return two2;

            case 2:

                three three3 = new three();

                return three3;

            case 3:

                four four4 = new four();

                return four4;

            case 4:

                five five5 = new five();

                return five5;

            case 5:

                six six6 = new six();

                return six6;

        }





        return null;

    }



    @Override

    public int getCount() {

        return tabnumber;

    }

}

Now goto,

MainActivity.java

• Initialize TabLayout, Viewpager.
• Create object tabpagerAdapter and set with viewpager
• Set viewpager with TabLayout.

Here is code for,

MainActivity.java

package com.example.nipu.navigationwithtabs;



import android.os.Bundle;

import android.support.design.widget.FloatingActionButton;

import android.support.design.widget.Snackbar;

import android.support.design.widget.TabLayout;

import android.support.v4.view.ViewPager;

import android.view.View;

import android.support.design.widget.NavigationView;

import android.support.v4.view.GravityCompat;

import android.support.v4.widget.DrawerLayout;

import android.support.v7.app.ActionBarDrawerToggle;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.Menu;

import android.view.MenuItem;



public class MainActivity extends AppCompatActivity

        implements NavigationView.OnNavigationItemSelectedListener {



    @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.tabs);

        ViewPager Pager =(ViewPager)findViewById(R.id.viewpager);



        tabpagerAdapter Tabpageradapter = new tabpagerAdapter(getSupportFragmentManager());

        Pager.setAdapter(Tabpageradapter);

        tabLayout.setupWithViewPager(Pager);



        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(

                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);

        drawer.setDrawerListener(toggle);

        toggle.syncState();



        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);

        navigationView.setNavigationItemSelectedListener(this);

    }



    @Override

    public void onBackPressed() {

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

        if (drawer.isDrawerOpen(GravityCompat.START)) {

            drawer.closeDrawer(GravityCompat.START);

        } else {

            super.onBackPressed();

        }

    }



    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.main, menu);

        return true;

    }



    @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);

    }



    @SuppressWarnings("StatementWithEmptyBody")

    @Override

    public boolean onNavigationItemSelected(MenuItem item) {

        // Handle navigation view item clicks here.

        int id = item.getItemId();



        if (id == R.id.nav_camera) {

            // Handle the camera action

        } else if (id == R.id.nav_gallery) {



        } else if (id == R.id.nav_slideshow) {



        } else if (id == R.id.nav_manage) {



        } else if (id == R.id.nav_share) {



        } else if (id == R.id.nav_send) {



        }

    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

        drawer.closeDrawer(GravityCompat.START);

        return true;

    }

}

youtube link: https://goo.gl/WKGN3H

project link: https://goo.gl/RWmGeG