Your SlideShare is downloading. ×
Build a user experience on Android
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Build a user experience on Android

378
views

Published on

Speaker's notes here : http://bit.ly/and-nav …

Speaker's notes here : http://bit.ly/and-nav

This is a feedback about user experience creation, following a simple Android app I had to create.
In this presentation I'll tell you about this story, trying to identify the points that will hep you to make the good choice on your own project.

Published in: Technology, News & Politics

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
378
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. BUILD a User Experience ... on Android
  • 2. ABOUT.ME Slides http://bit.ly/and-nav http://eyal.fr
  • 3. DESIGN Effective ... don't loose your user
  • 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. HOME sweet Home ... all roads lead to Home
  • 10. Dashboard Useful for "tools apps"
  • 11. Dashboard
  • 12. Dropdown Tabs + Content
  • 13. Dropdown Tabs + Content Closed ecosystems, multi-accounts Different nature of content Different level of content
  • 14. Tabs + Content Feature and organize the content
  • 15. Tabs + Content
  • 16. Navigation drawer + Content 4 top-level screens minimum
  • 17. Navigation drawer + Content Most important screens of your app 4 top-level screens minimum
  • 18. Navigation drawer + Content Structure the content 4 top-level screens minimum
  • 19. Navigation drawer + Content Add general actions (search, shorcuts, ...) 4 top-level screens minimum
  • 20. Navigation drawer + Content Make your action bar more contextual Optional 4 top-level screens minimum
  • 21. Navigation drawer + Content Make your action bar more contextual Optional Except Settings, About & Help by convention 4 top-level screens minimum
  • 22. Navigation drawer + Content Very powerful... but complex ! You have to know why you are using it!
  • 23. Choose your home It's all about movies... as I said
  • 24. Our choice Content + Tab of course :-)
  • 25. All roads lead to Home
  • 26. Latteral navigation
  • 27. Size Matters ...from S to XXL
  • 28. Multiple screen sizes Multi-pane Layout Pattern
  • 29. Multiple screen sizes Panel Panel Panel Panel Panel Panel Panel Multi-pane Layout Pattern Panel Panel
  • 30. Multi-panel design layout Design Dev
  • 31. Multi-panel design layout Panel Design Dev
  • 32. Multi-panel design layout Fragment! Panel Design Dev
  • 33. Frag... what?!
  • 34. The fragment Open
  • 35. The fragment Update
  • 36. Multi-screen UI Use the system resources res/layout/main.xml res/layout-large/main_two_panes.xml res/layout-sw600dp/main_two_panes.xml
  • 37. Multi-screen UI Use the system resources res/layout/main.xml res/layout-large/main_two_panes.xml res/layout-sw600dp/main_two_panes.xml Default
  • 38. Multi-screen UI Use the system resources res/layout/main.xml res/layout-large/main_two_panes.xml res/layout-sw600dp/main_two_panes.xml >= 7" Default
  • 39. Multi-screen UI Use the system resources res/layout/main.xml res/layout-large/main_two_panes.xml res/layout-sw600dp/main_two_panes.xml >= 600dp >= 7" Default
  • 40. Multi-screen UI 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
  • 41. Multi-screen UI 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 Define the 2 layouts on the default folder
  • 42. Multi-screen UI 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 Define aliases using the filters Define the 2 layouts on the default folder
  • 43. Multi-screen UI Avoid file duplication with aliases <resources> <item name="main" type="layout"> @layout/main_two_panes </item> </resources>
  • 44. Multi-screen UI Avoid file duplication with aliases <resources> <item name="main" type="layout"> @layout/main_two_panes </item> </resources> Override main by main_two_panes for large and sw600dp screens
  • 45. Multi-screen UI Fork the code res/values/bools.xml res/values-large/bools.xml res/values-sw600dp/bools.xml <resources> <bool name="isTwoPanes"> true|false </bool> </resources>
  • 46. Multi-screen UI Fork the code res/values/bools.xml res/values-large/bools.xml res/values-sw600dp/bools.xml <resources> <bool name="isTwoPanes"> true|false </bool> </resources> Boolean values dealing with the filters
  • 47. Multi-screen UI Fork the code 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
  • 48. Multi-screen UI Fork the code boolean isTwoPanes = res.getBoolean(R.bool.isTwoPanes); if (isTwoPanes) // launch a tablet activity else // launch a phone activity
  • 49. Multi-screen UI Fork the code boolean isTwoPanes = res.getBoolean(R.bool.isTwoPanes); if (isTwoPanes) // launch a tablet activity else // launch a phone activity We fork the code based on the isTwoPanes value
  • 50. We're done! ... and now the result
  • 51. Wireframe for phone
  • 52. Wireframe for tablet
  • 53. REFERENCES 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
  • 54. THANK YOU! Slides http://bit.ly/and-nav http://eyal.fr