Create Navigation Drawer

Team 2Zhong WangJiaming Dong

Philip WuLingduo Kong

Introduction- The navigation drawer is a panel that displays

the app’s main navigation options on the left (or optionally from right) edge of the screen.

- It is hidden most of the time, but is revealed when the user swipes a finger from the left (or optionally from right) edge of the screen

- or, while at the top level of the app, the user touches the app icon in the action bar.

- implement a navigation drawer using the DrawerLayout APIs available in the Support Library.

Create a Drawer Layout- To add a navigation drawer, declare your user interface with a DrawerLayout object as the root view of your layout.

- Inside the DrawerLayout, add one view that contains the main content for the screen (your primary layout when the drawer is hidden) and another view that contains the contents of the navigation drawer.

Sample DrawerLayout• <android.support.v4.widget.DrawerLayout

xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/drawer_layout" android:background="#FFFFFF" tools:context=".MainActivity">

• <!-- The main content view --> <FrameLayout android:id="@+id/Frame_Layout" android:layout_width="match_parent" android:layout_height="match_parent"/>

• <!-- The navigation drawer --> <ExpandableListView android:id="@+id/drawer_list_right" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="end" android:divider="@android:color/transparent" android:background="#FFFFFF"/>

</android.support.v4.widget.DrawerLayout>

Sample DrawerLayout

- the above layout uses a DrawerLayout with two child views:

Change activity_main.xml to navigation drawer layout.

- a FrameLayout to contain the main content (populated by a Fragment at runtime),

- and a ListView (ExandableListView) for the navigation drawer.

This layout demonstrates some important layout characteristics:

•The main content view (the FrameLayout above) must be the first child in the DrawerLayout because the XML order implies z-ordering and the drawer must be on top of the content.

•The main content view is set to match the parent view's width and height, because it represents the entire UI when the navigation drawer is hidden.

•The drawer view (the ListView) must specify its horizontal gravity with the android:layout_gravity attribute. To support right-to-left (RTL) languages, specify the value with "start" instead of "left" (so the drawer appears on the right when the layout is RTL).

•The drawer view specifies its width in dp units and the height matches the parent view. The drawer width should be no more than 320dp so the user can always see a portion of the main content.

Prepare MainActivity propertiesDrawerLayout mDrawerlayout;ActionBarDrawerToggle mDrawerToggle;ImageButton imgRightMenu;ExpandableListAdapter mDrawerList_Right;ExpandableListView expendListView;List<String> listDataHeader;HashMap<String, List<String>> listDataChild;

Initialize the Drawer ListIn your activity, one of the first things to do is initialize the navigation drawer's list of items. How you do so depends on the content of your app, but a navigation drawer often consists of a ListView, so the list should be populated by an Adapter (such as ArrayAdapter or SimpleCursorAdapter).For example, you can initialize the navigation list with a string array:

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

//===============Initialization of Variables=========================//

mDrawerlayout = (DrawerLayout) findViewById(R.id.drawer_layout); imgRightMenu = (ImageButton) findViewById(R.id.imgRightMenu); mDrawerlayout.setDrawerListener(mDrawerToggle); expendListView = (ExpandableListView) findViewById(R.id.drawer_list_right);

// Set the list's click listener expendListView.setOnGroupClickListener(myListGroupClicked);

prepareListData(); mDrawerList_Right = new ExpandableListAdapter(this, listDataHeader, listDataChild);

// Set the adapter for the list view expendListView.setAdapter(mDrawerList_Right);

//============== Define a Custom Header for Navigation drawer=================//

LayoutInflater inflator = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);View v = inflator.inflate(R.layout.navigation_header, null);

imgRightMenu = (ImageButton) v.findViewById(R.id.imgRightMenu);

getSupportActionBar().setHomeButtonEnabled(true);

// getSupportActionBar().setDisplayHomeAsUpEnabled(true);

getSupportActionBar().setDisplayShowTitleEnabled(false);

getSupportActionBar().setDisplayUseLogoEnabled(false);

getSupportActionBar().setDisplayShowCustomEnabled(true);

getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.parseColor("#1281A9")));

getSupportActionBar().setIcon( new ColorDrawable(getResources().getColor(android.R.color.transparent)));

getSupportActionBar().setCustomView(v);

imgRightMenu.setOnClickListener(new OnClickListener() {

@Override public void onClick(View v) { // TODO Auto-generated method stub

if (mDrawerlayout.isDrawerOpen(expendListView)) { mDrawerlayout.closeDrawer(expendListView); } else { mDrawerlayout.openDrawer(expendListView); } }});

private ExpandableListView.OnGroupClickListener myListGroupClicked = new ExpandableListView.OnGroupClickListener() {

public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {

if(groupPosition == 3) { Intent preference = new Intent(MainActivity.this, PreferencesActivity.class); startActivity(preference); } return false; }

};

Create menu and submenuslistDataHeader = new ArrayList<String>();listDataChild = new HashMap<String, List<String>>();

// Adding child datalistDataHeader.add("Top 250");… …// Adding child dataList<String> top250 = new ArrayList<String>();top250.add("The Shawshank Redemption");top250.add("The Godfather");

listDataChild.put(listDataHeader.get(0), top250); // Header, Child datalistDataChild.put(listDataHeader.get(1), nowShowing);

ExpandableListAdapter

An adapter that links a ExpandableListView with the underlying data.

The implementation of this interface will provide access to the data of the children (categorized by groups), and also instantiate Views for children and groups.

ExpandableListAdapter@Overridepublic View getChildView(int groupPosition, final int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {

@Overridepublic View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {

PreferencesActivity@Overrideprotected void onCreate(Bundle savedInstanceState) {

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {

@Overridepublic boolean onOptionsItemSelected(MenuItem item) {