Android: Android Sliding Menu using Navigation Drawer

AndroidManifest.Xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="info.androidhive.slidingmenu"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk
android:minSdkVersion="11"
android:targetSdkVersion="17" />

<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="info.androidhive.slidingmenu.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>
------------------------------------------------------------------------------------------------------

activityMain.xml

<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">


<FrameLayout
android:id="@+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />


<ListView
android:id="@+id/list_slidermenu"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="@color/list_divider"
android:dividerHeight="1dp"
android:listSelector="@drawable/list_selector"
android:background="@color/list_background"/>
</android.support.v4.widget.DrawerLayout>

-----------------------------------------------------------------------------------------------------

drawer_list_item.Xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@drawable/list_selector">

<ImageView
android:id="@+id/icon"
android:layout_width="25dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:contentDescription="@string/desc_list_item_icon"
android:src="@drawable/ic_home"
android:layout_centerVertical="true" />

<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="@id/icon"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:textColor="@color/list_item_title"
android:gravity="center_vertical"
android:paddingRight="40dp"/>

<TextView android:id="@+id/counter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/counter_bg"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="8dp"
android:textColor="@color/counter_text_color"/>

</RelativeLayout>

-----------------------------------------------------------------------------------------------------

Fragment_community.Xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/txtLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="16dp"
android:text="Communities View"/>

<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/txtLabel"
android:src="@drawable/ic_communities"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"/>

</RelativeLayout>

-----------------------------------------------------------------------------------------------------

Fragment_find_people.Xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/txtLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="16dp"
android:text="Find People View"/>

<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/txtLabel"
android:src="@drawable/ic_people"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"/>

</RelativeLayout>

-----------------------------------------------------------------------------------------------------

Fragment_home.Xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/txtLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="16dp"
android:text="Home View"/>

<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/txtLabel"
android:src="@drawable/ic_home"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"/>

</RelativeLayout>

-----------------------------------------------------------------------------------------------------

Fragment_pages.Xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/txtLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="16dp"
android:text="Pages View"/>

<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/txtLabel"
android:src="@drawable/ic_pages"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"/>

</RelativeLayout>

-----------------------------------------------------------------------------------------------------

Fragment_photos.Xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/txtLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="16dp"
android:text="Photos View"/>

<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/txtLabel"
android:src="@drawable/ic_photos"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"/>

</RelativeLayout>

-----------------------------------------------------------------------------------------------------

Fragment_whats_hot.Xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/txtLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="16dp"
android:text="What's Hot View"/>

<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/txtLabel"
android:src="@drawable/ic_whats_hot"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"/>

</RelativeLayout>

-----------------------------------------------------------------------------------------------------

strings.xml

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

<string name="app_name">Slider Menu</string>
<string name="action_settings">Settings</string>
<string name="hello_world">Hello world!</string>
<string name="drawer_open">Slider Menu Opened</string>
<string name="drawer_close">Slider Menu Closed</string>


<string-array name="nav_drawer_items">
<item >Home</item>
<item >Find People</item>
<item >Photos</item>
<item >Communities</item>
<item >Pages</item>
<item >What\'s Hot</item>
</string-array>



<array name="nav_drawer_icons">
<item>@drawable/ic_home</item>
<item>@drawable/ic_people</item>
<item>@drawable/ic_photos</item>
<item>@drawable/ic_communities</item>
<item>@drawable/ic_pages</item>
<item>@drawable/ic_whats_hot</item>
</array>


<string name="desc_list_item_icon">Item Icon</string>

</resources>

-----------------------------------------------------------------------------------------------------

color.Xml

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

</resources>

-----------------------------------------------------------------------------------------------------

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">

  <gradient

      android:startColor="@color/list_background"

      android:endColor="@color/list_background"

      android:angle="90" />

</shape>

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

 Create another xml layout under res ⇒ drawable named list_item_bg_pressed.xml with following content.

list_item_bg_pressed.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">

  <gradient

      android:startColor="@color/list_background_pressed"

      android:endColor="@color/list_background_pressed"

      android:angle="90" />

</shape>

 Create another xml file to combine both the drawable states under res ⇒ drawable namedlist_selector.xml

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/list_item_bg_normal" android:state_activated="false"/>

    <item android:drawable="@drawable/list_item_bg_pressed" android:state_pressed="true"/>

    <item android:drawable="@drawable/list_item_bg_pressed" android:state_activated="true"/>

</selector>

  We need one more drawable xml for rounde corner background for the counter value. So create a xml file named counter_bg.xml under res ⇒ drawable.

If you want to know how to add a rounded corner border layout, you can learn from How to add Rounded Corner borders to Android Layout

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

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle" >

    <!-- view background color -->

    <solid android:color="@color/counter_text_bg" >

    </solid>

    <!-- If you want to add some padding -->

    <padding

        android:right="3dp"

        android:left="3dp" >

    </padding>

    <!-- Here is the corner radius -->

    <corners android:radius="2dp" >

    </corners>

</shape>

MainActivity.Java
:::

import java.util.ArrayList;

import android.app.Activity;

import android.app.Fragment;

import android.app.FragmentManager;

import android.content.res.Configuration;

import android.content.res.TypedArray;

import android.os.Bundle;

import android.support.v4.app.ActionBarDrawerToggle;

import android.support.v4.widget.DrawerLayout;

import android.util.Log;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.widget.AdapterView;

import android.widget.ListView;

public class MainActivity extends Activity {

private DrawerLayout mDrawerLayout;

private ListView mDrawerList;

private ActionBarDrawerToggle mDrawerToggle;

// nav drawer title

private CharSequence mDrawerTitle;

// used to store app title

private CharSequence mTitle;

// slide menu items

private String[] navMenuTitles;

private TypedArray navMenuIcons;

private ArrayList<NavDrawerItem> navDrawerItems;

private NavDrawerListAdapter adapter;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mTitle = mDrawerTitle = getTitle();

// load slide menu items

navMenuTitles = getResources().getStringArray(R.array.nav_drawer_items);

// nav drawer icons from resources

navMenuIcons = getResources()

.obtainTypedArray(R.array.nav_drawer_icons);

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

mDrawerList = (ListView) findViewById(R.id.list_slidermenu);

navDrawerItems = new ArrayList<NavDrawerItem>();

// adding nav drawer items to array

// Home

navDrawerItems.add(new NavDrawerItem(navMenuTitles[0], navMenuIcons.getResourceId(0, -1)));

// Find People

navDrawerItems.add(new NavDrawerItem(navMenuTitles[1], navMenuIcons.getResourceId(1, -1)));

// Photos

navDrawerItems.add(new NavDrawerItem(navMenuTitles[2], navMenuIcons.getResourceId(2, -1)));

// Communities, Will add a counter here

navDrawerItems.add(new NavDrawerItem(navMenuTitles[3], navMenuIcons.getResourceId(3, -1), true, "22"));

// Pages

navDrawerItems.add(new NavDrawerItem(navMenuTitles[4], navMenuIcons.getResourceId(4, -1)));

// What's hot, We will add a counter here

navDrawerItems.add(new NavDrawerItem(navMenuTitles[5], navMenuIcons.getResourceId(5, -1), true, "50+"));

// Recycle the typed array

navMenuIcons.recycle();

mDrawerList.setOnItemClickListener(new SlideMenuClickListener());

// setting the nav drawer list adapter

adapter = new NavDrawerListAdapter(getApplicationContext(),

navDrawerItems);

mDrawerList.setAdapter(adapter);

// enabling action bar app icon and behaving it as toggle button

getActionBar().setDisplayHomeAsUpEnabled(true);

getActionBar().setHomeButtonEnabled(true);

mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,

R.drawable.ic_drawer, //nav menu toggle icon

R.string.app_name, // nav drawer open - description for accessibility

R.string.app_name // nav drawer close - description for accessibility

) {

public void onDrawerClosed(View view) {

getActionBar().setTitle(mTitle);

// calling onPrepareOptionsMenu() to show action bar icons

invalidateOptionsMenu();

}

public void onDrawerOpened(View drawerView) {

getActionBar().setTitle(mDrawerTitle);

// calling onPrepareOptionsMenu() to hide action bar icons

invalidateOptionsMenu();

}

};

mDrawerLayout.setDrawerListener(mDrawerToggle);

if (savedInstanceState == null) {

// on first time display view for first nav item

displayView(0);

}

/**

* Slide menu item click listener

* */

private class SlideMenuClickListener implements

ListView.OnItemClickListener {

@Override

public void onItemClick(AdapterView<?> parent, View view, int position,

long id) {

// display view for selected nav drawer item

displayView(position);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

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

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// toggle nav drawer on selecting action bar app icon/title

if (mDrawerToggle.onOptionsItemSelected(item)) {

return true;

}

// Handle action bar actions click

switch (item.getItemId()) {

case R.id.action_settings:

return true;

default:

return super.onOptionsItemSelected(item);

}

/* *

* Called when invalidateOptionsMenu() is triggered

@Override

public boolean onPrepareOptionsMenu(Menu menu) {

// if nav drawer is opened, hide the action items

boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);

menu.findItem(R.id.action_settings).setVisible(!drawerOpen);

return super.onPrepareOptionsMenu(menu);

}

/**

* Diplaying fragment view for selected nav drawer list item

* */

private void displayView(int position) {

// update the main content by replacing fragments

Fragment fragment = null;

switch (position) {

case 0:

fragment = new HomeFragment();

break;

case 1:

fragment = new FindPeopleFragment();

break;

case 2:

fragment = new PhotosFragment();

break;

case 3:

fragment = new CommunityFragment();

break;

case 4:

fragment = new PagesFragment();

break;

case 5:

fragment = new WhatsHotFragment();

break;

default:

break;

}

if (fragment != null) {

FragmentManager fragmentManager = getFragmentManager();

fragmentManager.beginTransaction()

.replace(R.id.frame_container, fragment).commit();

// update selected item and title, then close the drawer

mDrawerList.setItemChecked(position, true);

mDrawerList.setSelection(position);

setTitle(navMenuTitles[position]);

mDrawerLayout.closeDrawer(mDrawerList);

} else {

// error in creating fragment

Log.e("MainActivity", "Error in creating fragment");

}

@Override

public void setTitle(CharSequence title) {

mTitle = title;

getActionBar().setTitle(mTitle);

}

/**

* When using the ActionBarDrawerToggle, you must call it during

* onPostCreate() and onConfigurationChanged()...

@Override

protected void onPostCreate(Bundle savedInstanceState) {

super.onPostCreate(savedInstanceState);

// Sync the toggle state after onRestoreInstanceState has occurred.

mDrawerToggle.syncState();

}

@Override

public void onConfigurationChanged(Configuration newConfig) {

super.onConfigurationChanged(newConfig);

// Pass any configuration change to the drawer toggls

mDrawerToggle.onConfigurationChanged(newConfig);

}

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

CommunityFragment.Java
:::

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class CommunityFragment extends Fragment {

public CommunityFragment(){}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View rootView = inflater.inflate(R.layout.fragment_community, container, false);

return rootView;

}

}

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

PagesFragment.Java
:::

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class PagesFragment extends Fragment {

public PagesFragment(){}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View rootView = inflater.inflate(R.layout.fragment_pages, container, false);

return rootView;

}

}

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

PhotosFragment.Java
:::

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class PhotosFragment extends Fragment {

public PhotosFragment(){}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View rootView = inflater.inflate(R.layout.fragment_photos, container, false);

return rootView;

}

}

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

WhatsHotFragment.Java
:::

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class WhatsHotFragment extends Fragment {

public WhatsHotFragment(){}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View rootView = inflater.inflate(R.layout.fragment_whats_hot, container, false);

return rootView;

}

}

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

NavDrawerListAdapter.Java::

import java.util.ArrayList;

import android.app.Activity;

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;

public class NavDrawerListAdapter extends BaseAdapter {

private Context context;

private ArrayList<NavDrawerItem> navDrawerItems;

public NavDrawerListAdapter(Context context, ArrayList<NavDrawerItem> navDrawerItems){

this.context = context;

this.navDrawerItems = navDrawerItems;

}

@Override

public int getCount() {

return navDrawerItems.size();

}

@Override

public Object getItem(int position) {

return navDrawerItems.get(position);

}

@Override

public long getItemId(int position) {

return position;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

if (convertView == null) {

LayoutInflater mInflater = (LayoutInflater)

context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);

convertView = mInflater.inflate(R.layout.drawer_list_item, null);

}

ImageView imgIcon = (ImageView) convertView.findViewById(R.id.icon);

TextView txtTitle = (TextView) convertView.findViewById(R.id.title);

TextView txtCount = (TextView) convertView.findViewById(R.id.counter);

imgIcon.setImageResource(navDrawerItems.get(position).getIcon());

txtTitle.setText(navDrawerItems.get(position).getTitle());

// displaying count

// check whether it set visible or not

if(navDrawerItems.get(position).getCounterVisibility()){

txtCount.setText(navDrawerItems.get(position).getCount());

}else{

// hide the counter view

txtCount.setVisibility(View.GONE);

}

return convertView;

}

}

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

NavDrawerItem.Java::

public class NavDrawerItem {

private String title;

private int icon;

private String count = "0";

// boolean to set visiblity of the counter

private boolean isCounterVisible = false;

public NavDrawerItem(){}

public NavDrawerItem(String title, int icon){

this.title = title;

this.icon = icon;

}

public NavDrawerItem(String title, int icon, boolean isCounterVisible, String count){

this.title = title;

this.icon = icon;

this.isCounterVisible = isCounterVisible;

this.count = count;

}

public String getTitle(){

return this.title;

}

public int getIcon(){

return this.icon;

}

public String getCount(){

return this.count;

}

public boolean getCounterVisibility(){

return this.isCounterVisible;

}

public void setTitle(String title){

this.title = title;

}

public void setIcon(int icon){

this.icon = icon;

}

public void setCount(String count){

this.count = count;

}

public void setCounterVisibility(boolean isCounterVisible){

this.isCounterVisible = isCounterVisible;

}

}

-----------------------------------------------------------------------------------------------------

If u have any more doubts please see this site http://www.androidhive.info/

Android

Tuesday, 26 November 2013

Android Sliding Menu using Navigation Drawer

NavDrawerItem.Java::

No comments:

Post a Comment

About Me