Android Sliding Menu Navigation like Facebook App
Now learn everything you want about android sliding menu navigation like Facebook. So, go ahead and take a look.
Technology
August 17, 2017
Barkan Saeed
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.
Its Guideline and sample can be found in detail in the android support library v13, but I’d mention an approach pretty straightforward forward like a 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 has its 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 are 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 the 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); } } |