The document discusses designing user interfaces for Android applications that work well across multiple screen sizes. It recommends using a navigation drawer for the main application navigation, with four top-level screens as a minimum structure. Content should be organized into fragments that can be reused on phones and tablets. Layouts should be designed to fork the UI between phone and tablet configurations by checking resource boolean values that specify screen size and orientation. Sample wireframes demonstrate how the same app content can be presented differently for phones versus tablets.

1. BUILD
a
User Experience
... on Android

2. ABOUT.ME
Slides http://bit.ly/and-nav
http://eyal.fr
Eyal LEZMY

3. ... don't loose your user
DESIGN
Effective

4. Once Upon a Time...
a webservice, far far away...

5. Planning the screens
It's all about movies...

6. Planning the relationships

7. Planning the relationships
Netflix Content General actions & information

8. Handle the bar

9. ... all roads lead to Home
HOME
sweet
Home

10. Useful for
"tools apps"
Dashboard

11. Dashboard

12. Dropdown Tabs + Content

13. Dropdown Tabs + Content
Closed ecosystems,
multi-accounts
Different nature
of content
Different level
of content

14. Feature and organize
the content
Tabs + Content

15. Tabs + Content

16. Navigation drawer + Content
4 top-level screens minimum
Most important
screens of
your app

17. Navigation drawer + Content
4 top-level screens minimum
Structure the
content

18. Navigation drawer + Content
Add general
actions (search,
shorcuts, ...)
4 top-level screens minimum

19. Make your
action bar
more contextual
Optional
Navigation drawer + Content
4 top-level screens minimum

20. Navigation drawer + Content
4 top-level screens minimum
Except Settings,
About & Help
by convention
Make your
action bar
more contextual
Optional

21. Very powerful...
but complex !
You have to know why
you are using it!
Navigation drawer + Content

22. Choose your home
It's all about movies... as I said

23. Content + Tab
of course :-)
Our choice

24. All roads lead to Home

25. Latteral navigation

26. ...from S to XXL
Size
Matters

27. Multi-pane Layout Pattern
Multiple screen sizes

28. Multiple screen sizes
PanelPanel Panel PanelPanel
Panel Panel Panel
Panel
Multi-pane Layout Pattern

29. Multi-panel design layout
Panel
Fragment!
Design Dev

30. Frag...
what?!

31. The fragment
Open

32. The fragment
Update

33. Use the system resources
res/layout/main.xml
res/layout-large/main_two_panes.xml
res/layout-sw600dp/main_two_panes.xml
Multi-screen UI
Default>= 7"
>= 600dp

34. Avoid file duplication with aliases
res/layout/main.xml
res/layout/main_two_panes.xml
res/values-large/layout.xml
res/values-sw600dp/layout.xml
Multi-screen UI
Define the 2 layouts
on the default folder
Define aliases using
the filters

35. Avoid file duplication with aliases
<resources>
<item name="main" type="layout">
@layout/main_two_panes
</item>
</resources>
Multi-screen UI
Override main by main_two_panes
for large and sw600dp screens

36. Fork the code
Multi-screen UI
res/values/bools.xml
res/values-large/bools.xml
res/values-sw600dp/bools.xml
<resources>
<bool name="isTwoPanes">
true|false
</bool>
</resources>
true or false:
explicite definition
Boolean values dealing
with the filters

37. Fork the code
boolean isTwoPanes = res.getBoolean(R.bool.isTwoPanes);
if (isTwoPanes)
// launch a tablet activity
else
// launch a phone activity
Multi-screen UI
We fork the code based on
the isTwoPanes value

38. ... and now the result
We're
done!

39. Wireframe for phone

40. Wireframe for tablet

41. Design Effective Navigation
http://developer.android.com/training/design-navigation/index.html
Navigation Drawer
http://developer.android.com/design/patterns/navigation-drawer.html
Fragments
http://developer.android.com/guide/components/fragments.html
Implement Effective Navigation
http://developer.android.com/training/implementing-navigation/index.html
REFERENCES

42. THANK YOU!
Slides http://bit.ly/and-nav
http://eyal.fr