Like Us on Facebook

Android Navigation Drawer with Swipe Tabs using Material Design support library

Hi guys , In the  previous tutorial  I told you how to create  Webview with Sliding menu .In this post I am going to discuss  Android Navigation Drawer with Swipe Tabs using Design support library.Both the NavigationDrawer and NavigationTabs are great for a user to navigate your app.But today most of app using tab with navigation drawer to provide user better interface and provides more feature on single screen. This makes your apps  More simple and engaging. We use Android Material Design support library to make  this  tutorial. Let's start the application.

Read More
Android WebView with Sliding Menu tutorial
How to Create Mobile Application of a Website
How to Integrate Payment Gateway to Android Application
How to Create your First Android game

Prerequisites:
  • JDK 7.0 or Above
  • Android Studio 2.0
 
Steps to Follow:
Step 1: Create a New Android Studio project name SlidingTabs.

Step 2: Select minimum API level 17  so that it can support maximum of Android Device available in the google play.

Step 3: Select  Blank  Activity and Give your layout xml name is activity_main and click finish.

Step 4: We need 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 23
buildToolsVersion "24.0.0"

defaultConfig {
applicationId "com.example.slidingtabs"
minSdkVersion 17
targetSdkVersion 23
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.4.0'
}
.
Step 5. 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 6. Open your activity_main.xml and add following code.
 
<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">
<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">

<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>
 
Step 7: Inside MainActivity write this following code
 
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;

private String[] tabs = {"Home", "Android","Php","Smartphone"};
int[] iconList = new int[]{R.drawable.home, R.drawable.android
            ,R.drawable.php,R.drawable.smartphone};
@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.logo));
mNavItems.add(new NavItem("Tutorials",R.drawable.logo));
mNavItems.add(new NavItem("Finance",R.drawable.logo));
mNavItems.add(new NavItem("Reviews",R.drawable.logo));
mNavItems.add(new NavItem("Tech",R.drawable.logo));
mNavItems.add(new NavItem("Lifestyle",R.drawable.logo));
mNavItems.add(new NavItem("Category",R.drawable.logo));
mNavItems.add(new NavItem("Login/Signup",R.drawable.logo));
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;
for (String tab_name : tabs) {
actionBar.addTab(actionBar.newTab().setText(tab_name).setIcon(iconList[a])
                    .setTabListener(this));
actionBar = getSupportActionBar();
a++;
final android.support.v7.app.ActionBar ActionBar = actionBar;
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override
public void onPageSelected(int position) {
ActionBar.setSelectedNavigationItem(position);
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}

@Override
public void onPageScrollStateChanged(int arg0) {
}
});

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;
}
}
 
step 8: create a new Adapter class TabsPagerAdapter.java and write the following code inside it
 
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 androids();
case 2:
return new php();
}
return null;
}
@Override
public int getCount() {
// get item count - equal to number of tabs
return 3;
}
}
 
step 9: then creating a new class DrawerListAdapter.java to inflate navigation drawer menu with ImageView and TextView.
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;
}
}
 
step 10: creating array list class NavItem.java . add the following code inside it.
 
public class NavItem {
String mTitle;
int mIcon;
public NavItem(String title, int icon) {
mTitle = title;
mIcon = icon;
}
}

step 11: 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/logo"
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>

Posted By UandBlog

UandBlog is a Global Leading source of Finance, Health, Lifestyle, Technology, Gaming and Programing and other information, it is a fastest growing blog for all , for latest post or information like us on facebook , follow on Twitter, Google+ and Pinterest.

Comments ( 0 )

    Leave a comment..

    Click to login.

    Subscribe Latest Information

    Most Popular Posts

    You May Like Also