Professional Documents
Culture Documents
Note : Drawer Layout was added to Android Support Library, revision 19.0.1
Developer site : Support library
Design Pattern
Display
By swiping from the left edge of the screen.
By touching the application icon on the action bar.
Dismiss
Touching the app icon (at top left corner) .
Touching the content outside drawer .
Swapping anywhere on the Screen .
Pressing Back
For More Brief on design visit developer site Navigation Drawer . In this tutorial we will see
an example in which i have added three items for listview , onclick of any particular item of
the list , the corresponding content will be displayed . Below is the diagrammatic
representation .
While making this tutorial i was not able to import Drawer class ,reason i have not
updated the Development environment with support library so to do that follow the
below steps (do if you are not able to import drawer class or getting error ).
1. In Eclipse right-click over the project, then choose Android Tools > Add Support
Library
2. Accept License and then click Install.
DOWNLOAD CODE
Lets See An Example
Project Detail
Project Name
SlidingMenu
Package
com.pavan.slidingmenu
API 17
Theme
String Constant
Before i start coding i will initialize all the strings and arrays inside the inside
res/strings.xml. and also i have kept all the images inside the drawable folder of project.
file : strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">SlidingMenu</string>
<string name="action_settings">Settings</string>
<string name="hello_world">Hello world!</string>
<string name="imgdesc">imgdesc</string>
<string-array name="titles">
<item>Facebook</item>
<item>Google-Plus</item>
<item>TutorialsBuzz</item>
</string-array>
<array name="icons">
<item>@drawable/fb</item>
<item>@drawable/gplus</item>
<item>@drawable/tb</item>
</array>
</resources>
I have edited the images and added to the drawable resource directory which you can find
inside the download source code.
ListView Set Up
I am setting up a Custom ListView for ListView Inside which contains one ImageView and
one TextView, so create list_item.xml inside layout directory ,this layout is used to defines
the design of each row items in a list view .
file : list_tem.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:padding="5dp" >
<ImageView
android:id="@+id/icon"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:contentDescription="@string/imgdesc" />
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:layout_toRightOf="@id/icon"
android:gravity="center_vertical"
android:textColor="#000000"
android:textSize="20sp" />
</RelativeLayout>
Bean Class
Create a Bean Class RowItem which is used for setting and getting row data's of each items
in ListView ( icons and titles).
file : RowItem.java
package com.pavan.slidingmenu;
public class RowItem {
private String title;
private int icon;
public RowItem(String title, int icon) {
this.title = title;
this.icon = icon;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public int getIcon() {
return icon;
}
public void setIcon(int icon) {
this.icon = icon;
}
}
Adapter
Create a Custom adapter which extends BaseAdapter , this is used for inflating each row
items of the listview .
file : CustomAdapter.java
package com.pavan.slidingmenu;
import java.util.List;
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 CustomAdapter extends BaseAdapter {
ListView
Items
Fragments
XML Layout
Java Class
fb_fragment.xml FB_Fragment.java
Google-Plus
gp_fragment.xml GP_Fragment.java
mDrawerList.setAdapter(adapter); mDrawerList.setOnItemClickListener(new
SlideitemListener()); ... ... ... class SlideitemListener implements
ListView.OnItemClickListener {
@Override
public void onItemClick(AdapterView parent, View view, int position, long id) {
updateDisplay(position);
}
}
Main Activity
file : MainActivity.java
package com.pavan.slidingmenu;
import java.util.ArrayList;
import java.util.List;
import android.annotation.SuppressLint;
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.ArrayAdapter;
import android.widget.ListView;
import com.pavan.slidingmenu.slidelist.FB_Fragment;
import com.pavan.slidingmenu.slidelist.GP_Fragment;
import com.pavan.slidingmenu.slidelist.TB_Fragment;
public class MainActivity extends Activity {
String[] menutitles; TypedArray menuIcons;
// nav drawer title
private CharSequence mDrawerTitle;
private CharSequence mTitle;
private DrawerLayout mDrawerLayout;
private ListView mDrawerList;
private ActionBarDrawerToggle mDrawerToggle;
private List<RowItem> rowItems;
private CustomAdapter adapter;
@SuppressLint("NewApi")
@Override protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.activity_main);
mTitle = mDrawerTitle = getTitle();
menutitles = getResources().getStringArray(R.array.titles);
menuIcons = getResources().obtainTypedArray(R.array.icons);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.slider_list);
rowItems = new ArrayList<RowItem>();
for (int i = 0; i < menutitles.length; i++) {
RowItem items = new RowItem(menutitles[i], menuIcons.getResourceId( i, -1));
rowItems.add(items);
}
menuIcons.recycle();
adapter = new CustomAdapter(getApplicationContext(), rowItems);
mDrawerList.setAdapter(adapter);
mDrawerList.setOnItemClickListener(new SlideitemListener());
// 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, R.string.app_name,R.string.app_name)
{
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
updateDisplay(0);
}
} class SlideitemListener implements ListView.OnItemClickListener {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id)
{ updateDisplay(position);
}
} private void updateDisplay(int position) {
More on Menus
1. Android Option Menu .
2. Android Context Menu .
3. Android Popup Menu .
11
96 comments:
Dheeraj 5 April 2014 at 00:41
Its working on api level 11 but i want to support android version 2.2
Reply
Reply
hw cn i display a map on clicking the map oprtion from the navigation drawer ?
Reply
Thanks in advance,
Alain Camacho
Reply
please new subscriber co-operate , it takes 9-10hrs to update for new subscription .
Reply
good job man .. but i want if i clicked in on facebook in the sliding menu it well open facebook
page or site or any webview ? how can i do that please ?
Reply
Replies
Pavan Deshpande 19 January 2015 at 20:52
@Ashvin
db is updated you can download , let me know any issue
Reply
java.lang.RuntimeException:
Unable
to
start
activity
ComponentInfo{com.auberginesolutions.slidermenu/com.auberginesolutions.slidermenu.MainA
ctivity}: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or
descendant) with this activity.
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2245)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2299)
at android.app.ActivityThread.access$700(ActivityThread.java:150)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1280)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:137)
at android.app.ActivityThread.main(ActivityThread.java:5283)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:511)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1102)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:869)
at dalvik.system.NativeStart.main(Native Method)
Caused by: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or
descendant) with this activity.
at
android.support.v7.app.ActionBarActivityDelegate.onCreate(ActionBarActivityDelegate.java:151)
at
android.support.v7.app.ActionBarActivityDelegateBase.onCreate(ActionBarActivityDelegateBase
.java:138)
at android.support.v7.app.ActionBarActivity.onCreate(ActionBarActivity.java:123)
at com.auberginesolutions.slidermenu.MainActivity.onCreate(MainActivity.java:46)
at android.app.Activity.performCreate(Activity.java:5283)
at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1097)
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2209)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2299)
at android.app.ActivityThread.access$700(ActivityThread.java:150)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1280)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:137)
at android.app.ActivityThread.main(ActivityThread.java:5283)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:511)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1102)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:869)
at dalvik.system.NativeStart.main(Native Method)
Reply
@Aprurba Mondol
Make sure to import
"import android.app.Fragment;
import android.app.FragmentManager;"
Instead of
"import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager"
Reply
to
Reply
Comment as:
Publish
Sign out
Notify me
Preview
Home
Powered by Blogger.