• Vizteck Author

Android Sliding Menu Navigation like Facebook App

Google’s new UI pattern, “Android Navigation Drawer” a.k.a Sliding Menu Navigation, was introduced in the Google I/O 2013 held in May. The UI Pattern is mostly used in famous Apps like Facebook, Google +, Google Keep, Evernote, Youtube, Foursquare,Zappos, LinkedIn and Handouts etc.



It’s Guideline and sample can be found in detail in the android support library v13, but I’d mention an approach pretty straight forward like piece of cake with Source Code.


Before you decide to use a navigation drawer in your app, you should know What, Where/When, and How an App uses Navigation Drawer



What is Navigation Drawer (Sliding Menu Navigation)?


Navigation drawer is a panel that enables displaying of an app’s main navigation option on the left edge of the screen. The drawer is hidden most of the time, only to reveal when the user swipes a finger from the left edge of the screen or when the user touches the action bar’s app icon while at the app’s top level.


When to use Navigation Drawer in your apps?

Navigation Drawer is not a replacement for the general spinners or tabs that most apps use. Each of them have their own features, and it is the Structure of your app that should help choose the correct UI pattern suitable for top level switching screens/Activities. Design Structure document is in detail here


How to use Navigation Drawer


First download the ic_drawer.png icon from here. It should be placed in drawable-hdpi, drawable-xhdpi and drawable-xxhdpi folders. It can also be downloaded from the link at the end of the page.


XML FILES

In the main_activity.xml file, the newly introduced UI DrawerLayout acts as a top-level container for window content that allows for interactive “drawer” views to be pulled out from the edge of the window.

Drawer positioning and layout is controlled using the android:layout_gravity attribute on child views corresponding to which side of the view you want the drawer to emerge from: left or right. In our case we are doing with left.

Position your primary content view as the first child with a width and height of match_parent. Add drawers as child views after the main content view and set the layout_gravity appropriately. Drawers commonly use match_parent for height with a fixed width.


main_activity.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”>

<!– Displaying Fragments –>
<FrameLayout
android:id=”@+id/frame_container”
android:layout_width=”match_parent”
android:layout_height=”match_parent”

/>

<!– Displaying Drawer –>
<ListView
android:id=”@+id/list_slidermenu”
android:layout_width=240dp”
android:layout_height=”match_parent”
android:layout_gravity=”left”
android:choiceMode=”singleChoice”
android:divider=”@color/list_divider”
android:dividerHeight=1dp”
android:listSelector=”@drawable/drawer_list_selection”
android:background=”@color/list_background”/>
</android.support.v4.widget.DrawerLayout>


Adding your strings (Like Toasts, Messages Warnings) to strings.xml enables you to easily translate the app into other languages. The strings.xml is located in folder values.

By doing this, it saves you extra work which would have been done the hard coded way. Also, there aren’t any warnings of hard coded text in the xml file during development.

We are saving data and List Item Icons in two arrays name nav_drawer_items and nav_drawer_icons respectively that we will access from our MainActivity.java class Added Menu Strings Like “Setting” “Rate App” etc enables you to add Menu as your app requirements in actionbar.


strings.xml



<?xmlversion=1.0″encoding=”utf-8?>
<resources>

<stringname=”app_name”>Navigation Drawer</string>

<!– Menu Strings –>
<stringname=”action_settings”>Settings</string>
<stringname=”action_rateapp”>Rate App</string>
<stringname=”action_refresh”>Refresh</string>
<stringname=”hello_world”>Hello world!</string>
<!– Navigation Drawer Menu Items –>
<string-arrayname=”nav_drawer_items”>
<item>Home</item>
<item>Facebook</item>
<item>Google</item>
<item>Apple</item>
<item>Microsoft</item>
<item>Linkedin</item>
</string-array>

<!– List Item Icons(Images) with strings(text of company name)>
<!– Keep them with titles array accordingly –>
<arrayname=”nav_drawer_icons”>
<item>@drawable/icon_home</item>
<item>@drawable/facebook</item>
<item>@drawable/google</item>
<item>@drawable/apple</item>
<item>@drawable/windows</item>
<item>@drawable/linkedin</item>
</array>

<!– drawer_list_itemImageview Description –>
<stringname=”description_list_icon”>Item Icon</string>

</resources>



In MainActivity.java, we have declared variables loaded list items Text (Facebook, Google, Apple and so on) with Icons from arrays nav_drawer_items and nav_drawer_icons from strings.xml . We also created an adapter and added list item to it.


MainActivity.java



packagecom.vizteck.navigationdrawer;

importcom.vizteck.navigationdrawer.adapter.NavDrawerListAdapter;
importcom.vizteck.navigationdrawer.model.NavDrawerItem;

importjava.util.ArrayList;

importandroid.os.Bundle;
importandroid.app.Activity;
importandroid.app.Fragment;
importandroid.app.FragmentManager;
importandroid.content.res.Configuration;
importandroid.content.res.TypedArray;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;
importandroid.util.Log;
importandroid.view.Menu;
importandroid.view.MenuItem;
importandroid.view.View;
importandroid.widget.AdapterView;
importandroid.widget.ListView;

public class MainActivity extends Activity {
privateDrawerLayoutmDrawerLayout;
privateListViewmDrawerList;
privateActionBarDrawerTogglemDrawerToggle;

// NavigationDrawer title “Nasdaq” in this example
privateCharSequencemDrawerTitle;

// App title “Navigation Drawer” in this example
privateCharSequencemTitle;

// slider menu items details
private String[] navMenuTitles;
privateTypedArraynavMenuIcons;

privateArrayList<NavDrawerItem>navDrawerItems;
privateNavDrawerListAdapter adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mTitle = mDrawerTitle = getTitle();

// getting items of slider from array
navMenuTitles =getResources().getStringArray(R.array.nav_drawer_items);

// getting Navigation drawer icons from res
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>();


// list item in slider at 1 Home Nasdaq details
navDrawerItems.add(new NavDrawerItem(navMenuTitles[0],navMenuIcons.getResourceId(0, -1)));
// list item in slider at 2 Facebook details
navDrawerItems.add(new NavDrawerItem(navMenuTitles[1],navMenuIcons.getResourceId(1, -1)));
// list item in slider at 3 Google details
navDrawerItems.add(new NavDrawerItem(navMenuTitles[2],navMenuIcons.getResourceId(2, -1)));
// list item in slider at 4 Apple details
navDrawerItems.add(new NavDrawerItem(navMenuTitles[3],navMenuIcons.getResourceId(3, -1)));
// list item in slider at 5 Microsoft details
navDrawerItems.add(new NavDrawerItem(navMenuTitles[4],navMenuIcons.getResourceId(4, -1)));
// list item in slider at 6 LinkedIn details
navDrawerItems.add(new NavDrawerItem(navMenuTitles[5],navMenuIcons.getResourceId(5, -1)));


// Recycle array
navMenuIcons.recycle();

mDrawerList.setOnItemClickListener(new SlideMenuClickListener());

// setting list adapter for Navigation Drawer
adapter = new NavDrawerListAdapter(getApplicationContext(),
navDrawerItems);
mDrawerList.setAdapter(adapter);

// Enable action bar icon_luncher as toggle Home 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);
invalidateOptionsMenu(); //Setting, Refresh and Rate App
}

public void onDrawerOpened(View drawerView) {
getActionBar().setTitle(mDrawerTitle);
invalidateOptionsMenu();
}
};
mDrawerLayout.setDrawerListener(mDrawerToggle);

if (savedInstanceState == null) {
displayView(0);
}
}


// Slider menu item click listener

private class SlideMenuClickListener implements
ListView.OnItemClickListener {
@Override
public void onItemClick(AdapterView<?> parent, View view, intposition,
long id) {
// display view for selected item
displayView(position);
}
}

@Override
publicbooleanonCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

@Override
publicbooleanonOptionsItemSelected(MenuItem item) {
// title/icon
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
// Handle action bar actions click
switch (item.getItemId()) {
caseR.id.action_settings:
return true;
default:
returnsuper.onOptionsItemSelected(item);
}
}

//called when invalidateOptionsMenu() invoke

@Override
publicbooleanonPrepareOptionsMenu(Menu menu) {
// if Navigation drawer is opened, hide the action items
booleandrawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
menu.findItem(R.id.action_settings).setVisible(!drawerOpen);
returnsuper.onPrepareOptionsMenu(menu);
}

private void displayView(int position) {
// update the main content with called Fragment
Fragment fragment = null;
switch (position) {
case 0:
fragment = new Fragment1Nasdaq();
break;
case 1:
fragment = new Fragment2Facebook();
break;
case 2:
fragment = new Fragment3Google();
break;
case 3:
fragment = new Fragment4Apple();
break;
case 4:
fragment = new Fragment5Microsoft();
break;
case 5:
fragment = new Fragment6LinkedIn();
break;

default:
break;
}

if (fragment != null) {
FragmentManagerfragmentManager = getFragmentManager();
fragmentManager.beginTransaction().replace(R.id.frame_container,fragment).commit();
mDrawerList.setItemChecked(position, true);
mDrawerList.setSelection(position);
setTitle(navMenuTitles[position]);
mDrawerLayout.closeDrawer(mDrawerList);
} else {

Log.e(this is mainActivity”, “Error in else case);
}
}

@Override
public void setTitle(CharSequence title) {
mTitle = title;
getActionBar().setTitle(mTitle);
}


@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
mDrawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
mDrawerToggle.onConfigurationChanged(newConfig);
}

}



136 views
ADDRESS

Building 145, Bahria Town Phase 4, Civic Center, Islamabad

© 2007- 2020 - Vizteck.com

GET IN TOUCH

+1-508-4227011

  • Facebook
  • Twitter
  • LinkedIn