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

Android UI Design Patterns at Droidcon Paris 2013

Android UI Design Patterns at Droidcon Paris 2013

A mobile application is not only a code story !

Beyond the design, it's important to think about organizing its information which is displayed and its interaction with the user.
To solve the problems which are raised by this analysis, some solution already exists : UI Design Patterns.

Like to GitHub corresponding app : https://github.com/MathieuCalba/android-ui-design-pattern

Mathieu Calba

June 17, 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. Menu Drawer • Responsive • Dynamic • Quick access •

    Not easy to discover / use Usefull when there is a complex navigation aka Fly In App Menu 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/ PagerSlidingTabStrip from Andreas Stuetz - Play Store style from API Level 8 https://github.com/astuetz/PagerSlidingTabStrip
  7. Dialog • Never read • Force user interaction • Interrupt

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

    • Not contextual (with a screen) Technically ? SDK : http://developer.android.com/guide/topics/ui/notifiers/toasts.html
  9. • 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
  10. 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
  11. • Select an article on the left list • There

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

    320 dp 640 x 480 dp 960 x 720 dp
  13. 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