Last updated on July 31st, 2016 at 11:14 am
Navigation drawer is most common thing you find in android application. But now most of app using tab with navigation drawer to provide user best interface and make app more simple to use by providing more feature on single screen. In my last post i explain you how to create a navigation drawer in android, and in this post i explain how to implement navigation drawer with tab view.
Step 1. Create new project in Android Studio / Eclipse.
Step 2. We need to add appcompat-v7 library to make thing work. In android studio open build.gradle and add dependency as shown below.
apply plugin: 'com.android.application'
android {
compileSdkVersion 21
buildToolsVersion "21.1.2"
defaultConfig {
applicationId "com.trinitytabnavigationdrawer"
minSdkVersion 14
targetSdkVersion 21
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:21.0.3'
}
Step 3. Now open your style.xml file inside folder res ⇒ values ⇒ styles.xml. Here we define material design arrow for navigation.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
</resources>Step 4. Now create two XML file one is for view pager (main_layout.xml) and second (drawer_list_item.xml) for menu list in navigation drawer.
Step 5. Open your activity_main.xml and add following code
<!--I use android:fitsSystemWindows because I am changing the color of the statusbar as well-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_parent_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
<!--<include layout="@layout/main_toolbar" />-->
<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">
<!-- The main content view -->
<!-- The navigation drawer -->
<ListView
android:id="@+id/left_drawer"
android:layout_width="180dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp"
android:background="@color/navdrawerbg" />
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>Now add this code in your MainActivity.java
package com.trinitytabnavigationdrawer;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;
import java.util.ArrayList;
import static android.support.v7.app.ActionBar.NAVIGATION_MODE_TABS;
public class MainActivity extends ActionBarActivity implements android.app.ActionBar.TabListener, android.support.v7.app.ActionBar.TabListener {
private DrawerLayout mDrawerLayout;
private ViewPager viewPager;
private TabsPagerAdapter mAdapter;
private ListView mDrawerList;
private ActionBarDrawerToggle mDrawerToggle;
private CharSequence mDrawerTitle;
private CharSequence mTitle;
private String[] navigationMenu;
Toolbar toolbar;
ArrayList<NavItem> mNavItems = new ArrayList<NavItem>();
Context context = this;
// Tab titles
private String[] tabs = {"Trinity", "Php"," Android","Web"};
int[] iconList = new int[]{R.drawable.about, R.drawable.about,R.drawable.about,R.drawable.about};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTitle = mDrawerTitle = getTitle();
navigationMenu = getResources().getStringArray(R.array.menus_array);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.left_drawer);
android.support.v7.app.ActionBar actionBar = getSupportActionBar();
Log.e("hgjhdbjhioh", "ghugsdbg===========" + actionBar);
mNavItems.add(new NavItem("Home",R.drawable.about));
mNavItems.add(new NavItem("Trinity", R.drawable.about));
DrawerListAdapter adapter = new DrawerListAdapter(this, mNavItems);
mDrawerList.setAdapter(adapter);
viewPager = (ViewPager) findViewById(R.id.pager);
mAdapter = new TabsPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(mAdapter);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setHomeButtonEnabled(true);
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setNavigationMode(NAVIGATION_MODE_TABS);
int a = 0;
// Adding Tabs
for (String tab_name : tabs) {
actionBar.addTab(actionBar.newTab().setText(tab_name).setIcon(iconList[a])
.setTabListener(this));
actionBar = getSupportActionBar();
a++;
/**
* on swiping the viewpager make respective tab selected
* */
final android.support.v7.app.ActionBar ActionBar = actionBar;
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
// on changing the page
// make respected tab selected
ActionBar.setSelectedNavigationItem(position);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
/* // set up the drawer's list view with items and click listener
mDrawerList.setAdapter(new ArrayAdapter<String>(this,
R.layout.drawer_list_item, navigationMenu));*/
mDrawerList.setOnItemClickListener(new DrawerItemClickListener());
mDrawerToggle = new ActionBarDrawerToggle(
this, /* host Activity */
mDrawerLayout, /* DrawerLayout object */
toolbar, /* nav drawer image to replace 'Up' caret */
R.string.drawer_open, /* "open drawer" description for accessibility */
R.string.drawer_close /* "close drawer" description for accessibility */
) {
public void onDrawerClosed(View view) {
//getSupportActionBar().setTitle(mTitle);
// toolbartitle.setText(mTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
public void onDrawerOpened(View drawerView) {
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
};
mDrawerLayout.setDrawerListener(mDrawerToggle);
mDrawerToggle.syncState();
if (savedInstanceState == null) {
selectItem(0);
}
}
}
private void selectItem(int possition) {
Log.e("Current pos", "----" + possition);
// Load fragment or activity according to request
}
@Override
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
}
@Override
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
}
@Override
public void onTabSelected(android.app.ActionBar.Tab tab, android.app.FragmentTransaction ft) {
viewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(android.app.ActionBar.Tab tab, android.app.FragmentTransaction ft) {
}
@Override
public void onTabReselected(android.app.ActionBar.Tab tab, android.app.FragmentTransaction ft) {
}
@Override
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
viewPager.setCurrentItem(tab.getPosition());
Toast.makeText(MainActivity.this,"Clicked",Toast.LENGTH_LONG).show();
}
private class DrawerItemClickListener implements AdapterView.OnItemClickListener {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
selectItem(position);
switch (position) {
}
}
}
//action buttons
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu items for use in the action bar
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
// Handle presses on the action bar items
switch (item.getItemId()) {
}
return false;
}
}
Creating adapter class for tabs {TabsPagerAdapter.java}
package com.trinitytabnavigationdrawer;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
/**
* Created by Aneh on 1/19/2015.
*/
public class TabsPagerAdapter extends FragmentPagerAdapter {
public TabsPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int index) {
switch (index) {
case 0:
return new home();
case 1:
return new trinity();
case 2:
return new php();
case 3:
return new androids();
}
return null;
}
@Override
public int getCount() {
// get item count - equal to number of tabs
return 4;
}
}
then creating a new class DrawerListAdapter.java to inflate navigation drawer menu with ImageView and TextView.
package com.trinitytabnavigationdrawer;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
/**
* Created by Aneh on 3/19/2015.
*/
public class DrawerListAdapter extends BaseAdapter {
Context mContext;
ArrayList<NavItem> mNavItems;
public DrawerListAdapter(Context context, ArrayList<NavItem> navItems) {
mContext = context;
mNavItems = navItems;
}
@Override
public int getCount() {
return mNavItems.size();
}
@Override
public Object getItem(int position) {
return mNavItems.get(position);
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View view;
if (convertView == null) {
LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = inflater.inflate(R.layout.drawer_item, null);
}
else {
view = convertView;
}
TextView titleView = (TextView) view.findViewById(R.id.title);
ImageView iconView = (ImageView) view.findViewById(R.id.icon);
titleView.setText( mNavItems.get(position).mTitle );
iconView.setImageResource(mNavItems.get(position).mIcon);
return view;
}
}
creating array list class { NavItem.java }
package com.trinitytabnavigationdrawer;
/**
* Created by Aneh on 3/19/2015.
*/
public class NavItem {
String mTitle;
int mIcon;
public NavItem(String title, int icon) {
mTitle = title;
mIcon = icon;
}
}
creating layout drawer_item.xml which is use to create menu for navigation drawer.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<ImageView
android:id="@+id/icon"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/about"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp" />
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:text="text"
android:textColor="@color/button_material_dark"
/>
</LinearLayout>
</LinearLayout>Download the sample hope this help in you project.