This document provides an overview and instructions for implementing a sliding menu navigation component. It discusses the design considerations for the menu content and interaction with the action bar. Technical details are given for using DrawerLayout to position the menu and main content views as well as handling click and slide events. The summary restates the importance of navigation and how the sliding menu reflects the app's structure. Homework involves expanding the sample code to include dual sliding menus from the left and right without using DrawerLayout.

1. Sliding Menu Training
2014/02/11 John

2. Outline
● Overview
● Design
● Drawer Layout
● Handle the clicked event
● Listen for sliding event
● Summary & HW

3. Overview
Consistent navigation is an essential
component of the overall user experience.

4. Overview
Sliding menu is a reflection of
app’s structure and its major
navigation hubs. Usually,
Sliding Menu is also called
Navigation drawer.

5. Design
Displaying

6. Design
Content of Menu
● Titles
● or Icons
● or counters

7. Design
Menu and Action Bar
Clean up the action bar when the drawer is fully expanded.
● App icon
● App name
● Remove actions

8. Design
Interaction Details
● Give the user a quick peek
● Highlights

9. Drawer Layout
To use a DrawerLayout, 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.
ref: http://goo.gl/MK56ca

10. Drawer Layout
primary content view
drawers

11. Drawer Layout

12. Listen for sliding event
ref: http://goo.gl/jahPU

13. Handle the clicked event
ref: http://goo.gl/2GXPc

14. Summary
● An essential component on navigating
● Reflection of app’s structure
● Touching, Swiping, and Pressing Back
● Expanding and Collapsing relate with Action
Bar

15. Homework
Sample source code: (You can also fInd it at the video record nearby if this link is invalid.)
https://www.dropbox.com/s/qh46pjb8iq0j409/TrainingSlidingMenu.zip
● Two sliding menu
● Expanded from left and right
Advance
● Achieve sliding menu dosen’t use
DrawerLayout.