Create Navigation Drawer Team 2 Zhong Wang Jiaming Dong Philip Wu Lingduo 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. DrawerLayoutSupport 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.DrawerLayout - 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.DrawerLayout

Sample DrawerLayout

Sample DrawerLayout - the above layout uses a DrawerLayout with two child views:DrawerLayout Change activity_main.xml to navigation drawer layout. -a FrameLayout to contain the main content (populated by a Fragment at runtime),FrameLayoutFragment -and a ListView (ExandableListView) for the navigation drawer.ListView

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.FrameLayoutDrawerLayout 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).ListView 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 properties DrawerLayout mDrawerlayout; ActionBarDrawerToggle mDrawerToggle; ImageButton imgRightMenu; ExpandableListAdapter mDrawerList_Right; ExpandableListView expendListView; List listDataHeader; HashMap > listDataChild; Initialize the Drawer List In 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).ListViewAdapterArrayAdapterSimpleCursorAdapter For example, you can initialize the navigation list with a string array:string array

protected 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() 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 submenus listDataHeader = new ArrayList (); listDataChild = new HashMap >(); // Adding child data listDataHeader.add("Top 250"); … // Adding child data List top250 = new ArrayList (); top250.add("The Shawshank Redemption"); top250.add("The Godfather"); listDataChild.put(listDataHeader.get(0), top250); // Header, Child data listDataChild.put(listDataHeader.get(1), nowShowing);

ExpandableListAdapter An adapter that links a ExpandableListView with the underlying data.ExpandableListView 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.View

public View getChildView(int groupPosition, final int childPosition, boolean isLastChild, View convertView, ViewGroup parent) public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {

protected void onCreate(Bundle savedInstanceState) public boolean onCreateOptionsMenu(Menu menu) public boolean onOptionsItemSelected(MenuItem item) {