Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Android UI Design Pattern in practice (English version)

Android UI Design Pattern in practice (English version)

Mathieu Calba

February 07, 2013

More Decks by Mathieu Calba

Other Decks in Programming


  1. Why should you use them ? The best solution to

    solve your problem Mental Model Homogeneity Libraries Do not reinvent the wheel
  2. Why should not you use them ? Trendy solution To

    solve a nonexistant problem Copy a competitor
  3. How to implement it ? SDK since API level 11

    ActionBarSherlock from Jake Wharton - Backport to API Level 7 http://actionbarsherlock.com/ http://developer.android.com/ guide/topics/ui/actionbar.html
  4. Fly-in App Menu • Responsive • Dynamic • Quick access

    • Not easy to discover / use Usefull when there is a complex navigation aka Menu Drawer or Sliding Menu... https://speakerdeck.com/cyrilmottier/the-fly-in- app-menu-for-designers-and-developers Cyril Mottier’s slides
  5. ActionBar’s Spinner • Easy access • Filter or tab substitute

    to gain screen space • Standard • Can be confusing if used with 2 kind of data (like changing account and categories) http://developer.android.com/guide/ topics/ui/actionbar.html#Dropdown Technically :
  6. How to implement it ? SDK with ActionBar API since

    API Level 11 ViewPagerIndicator from Jake Wharton - Different Styles from API Level 7 http://developer.android.com/guide/ topics/ui/actionbar.html#Tabs http://viewpagerindicator.com/
  7. Article listing News : Image + Title Briefs : Title

    + Date/Hour Reports & Tests : Image + Title
  8. Dialog • Never read • Force user interaction • Interrupt

    the user For irreversible actions Technically ? SDK : http://developer.android.com/guide/topics/ui/dialogs.html
  9. Toast • Customizable • No user interaction • Not intrusive

    • Not contextual (with a screen) Technically ? SDK : http://developer.android.com/guide/topics/ui/notifiers/toasts.html
  10. • Contextual to screen • Basic styles with different levels

    of importance Based on Toast Defined par Cyril Mottier Crouton Technically ? Library by Benjamin Weiss : https://github.com/keyboardsurfer/Crouton
  11. Basic style Many extended styles Big Text Inbox Big Image

    Possibility to add actions System Notifications & Technically : http://developer.android.com/guide/topics/ui/notifiers/notifications.html
  12. • Select an article on the left list • There

    is no favorite items yet First use Empty View
  13. Small Normal Large XLarge 426 x 320 dp 470 x

    320 dp 640 x 480 dp 960 x 720 dp
  14. Thanks/Credits • Cyril Mottier for Photoshop templates for screenshots and

    other blog posts http://android.cyrilmottier.com/ • Juhani Lehtimaëki - Book Smashing Android UI • Kirill Grouchnikov - http://www.pushing-pixels.org/ • Guillaume Berry for up/down icons • YANA - Code available on GitHub : https://github.com/ MathieuCalba/android-ui-design-pattern