Navigation Drawer with TabView in Android
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.w7app; 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.w7app; 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.w7app; 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.w7app; /** * 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>
No comments:
Post a Comment