Download - Android ui patterns
![Page 1: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/1.jpg)
Android UI Patterns
Presented byVladan Pulec
Created by Vladan Pulec and Peter Pascale
![Page 2: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/2.jpg)
Agenda
Android UI HistoryAndroid 4 UI Highlights
Android UI Patterns
![Page 3: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/3.jpg)
Android Version History
Look and Feel Formalized
2009
![Page 4: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/4.jpg)
Android Version History
2010 Google IO
Dashboard UI Pattern
![Page 5: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/5.jpg)
Android Version History
2011 Google IO
Tablet Patterns
No More Dashboard
![Page 6: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/6.jpg)
Android Version History
Ice Cream SandwichOctober 19 2010
Honeycomb UI - Unification
No More Hardware Buttons
![Page 7: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/7.jpg)
Android Market Share
http://blog.nielsen.com/nielsenwire/online_mobile/generation-app-62-of-mobile-users-25-34-own-smartphones/
![Page 8: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/8.jpg)
Android Market Share
Source: Nielsen (http://www.bgr.com/2011/12/15/smartphone-penetration-skyrockets-in-2011-iphone-becomes-no-1-handset/ )
![Page 9: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/9.jpg)
Android Versions - Reality
Source: developer.android.comAs of March 5, 2012
![Page 10: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/10.jpg)
UI Design Pattern Goals
Image Source: http://www.flickr.com/photos/jdhancock/5138860024/
![Page 11: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/11.jpg)
Tablet vs. Phone User Experience
Users hold and interact with phones and tablets differently
UI needs to be adaptive to support user interaction
![Page 12: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/12.jpg)
UI Design Goals Related to Patterns
Stay Consistent
Use Visual Hierarchy
Value Simplicity
Pay Attention to Patterns
Image Source: http://www.flickr.com/photos/45574318@N00/5370376951/
![Page 13: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/13.jpg)
Android 4.0 UI Features
Simplified Look and Feel
Unified Tablet/Phone Platform
System Bar and Action Bar
Virtual Navigation Buttons
No Hardware Buttons
Image Source: http://www.flickr.com/photos/lwallenstein/3870027760/sizes/m/in/photostream/
![Page 14: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/14.jpg)
Navigation in Android 4.0
Software Navigation Buttons
System Back
System Home
Recents
No Search or Menu
![Page 15: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/15.jpg)
Android UI Patterns
Action Bar
Multi-Pane Layout
Carousel
Quick Actions
Dashboard
Workspaces
![Page 16: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/16.jpg)
Action Bar
Multi-Pane Layout
Carousel
Quick Actions
Dashboard
Workspaces
![Page 17: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/17.jpg)
Action Bar
Dedicated Real Estate at the Top of Each Screen
Make Frequent Actions Prominent
Support Navigation
Indicate Current Location in App
Consistent Between Tablets and Phones
Provide Branding
![Page 18: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/18.jpg)
Action Bar - Sections
Where am I?application icon or logo
can be used for "upward" navigation
![Page 19: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/19.jpg)
Action Bar - Sections
What can I see?view details
(can have a navigation component)can include tabs, dropdowns, breadcrumbs
![Page 20: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/20.jpg)
Action Bar - Sections
What can I do?action buttons (icons, text, or both)
most important or frequently used actions
new place for Search and Menu
![Page 21: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/21.jpg)
Action Bar - Examples
![Page 22: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/22.jpg)
Action BarConsistency Between Phone and Tablet
![Page 23: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/23.jpg)
Action Bar - AntipatternsIgnoring the "Where - See - Do" Best Practice
Button controls at the bottom of the screen
Inconsistent across different applications
![Page 24: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/24.jpg)
ActionBar Code Demo
https://github.com/vpulec/ActionBar-Demo
![Page 25: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/25.jpg)
Backward Compatibility
ActionBar native support in Honeycomb and up
Remedy
• Compatibility Pack can be used for earlier version
• ActionBarSherlock (actionbarsherlock.com) makes the implementation easier
![Page 26: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/26.jpg)
Backwards Compatibility Library
http://developer.android.com/sdk/compatibility-library.html
![Page 27: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/27.jpg)
Action Bar - Summary
Replaces traditional title bar
Makes frequently used actions prominent
Convenient means of handling menu and search
Dedicated, persistent real estate
Displays application icon together with the activity title
![Page 28: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/28.jpg)
Action Bar
Multi-Pane Layout
Carousel
Quick Actions
Dashboard
Workspaces
![Page 29: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/29.jpg)
Multi-Pane Layout
![Page 30: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/30.jpg)
Multi-Pane Layout
![Page 31: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/31.jpg)
Multi-Pane Layout - Orientation Change
Preserve Functional Parity
![Page 32: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/32.jpg)
Implementing Multi-Pane Layout
Fragments... The Building Blocks
The Resource System... The Dynamic Assembler
Backwards Compatibility Library... support 1.6+
![Page 33: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/33.jpg)
Fragments
![Page 34: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/34.jpg)
Fragments Reusable Section of an Activity
Master List Fragment
Detail Fragment
![Page 35: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/35.jpg)
Fragment Basics
Behavior
Layout
.xml
.java
or programatic... or not at all...
![Page 36: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/36.jpg)
Resource System Changes
Old Layout Categories - Since 1.6:
res/layout/my-layout.xml <-- Typical
Or
res/layout-land/my-layout.xmlres/layout-port/my-layout.xml
![Page 37: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/37.jpg)
Resource System Changes
Honeycomb Layout Categories - 3.0 - 3.1:
Size small, normal, large, xlargeOrientation port, land Ex:res/layout/my-layout.xmlres/layout-xlarge-land/my-layout.xmlres/layout-xlarge-port/my-layout.xml
![Page 38: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/38.jpg)
Resource System Changes
Honeycomb Layout Categories - 3.0 - 3.1:
Size small, normal, large, xlargeOrientation port, land Ex:res/layout/my-layout.xmlres/layout-xlarge-land/my-layout.xmlres/layout-xlarge-port/my-layout.xml
Deprecated
![Page 39: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/39.jpg)
Resource System Changes
New Layout Categories - 3.2+:
Allows Specific Screen Size Designation - Not Just Categories
res/layout/main_activity.xml Phonesres/layout-sw600dp/main_activity.xml 7" Tabletsres/layout-sw720dp/main_activity.xml 10" Tablets sw = Smallest Widthw = Available Min Widthh = Available Min Height
http://developer.android.com/guide/practices/screens_support.htmlhttp://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts
![Page 40: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/40.jpg)
Multi-Pane Layout Code Demo
https://github.com/peterpascale/FragmentExample
![Page 41: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/41.jpg)
Action Bar
Multi-Pane Layout
Carousel
Quick Actions
Dashboard
Workspaces
![Page 42: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/42.jpg)
Carousel - "Beyond the List"Break the Monotony of List Views
![Page 43: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/43.jpg)
Carousel - "Beyond the List"YouTube Video Wall
![Page 44: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/44.jpg)
Carousel - Implementation
CarouselView
- Renderscript - Ready for Customization
Gallery
- Single Items, Single Images - Not Full Screen
http://j.mp/io2011-carousel-sample
![Page 45: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/45.jpg)
Action Bar
Multi-Pane Layout
Carousel
Quick Actions
Dashboard
Workspaces
![Page 46: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/46.jpg)
Quick Actions
Easy access to contextual actions
Practical even for limited real-estate
User easily sees context even when quick action is open
![Page 47: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/47.jpg)
Action Bar
Multi-Pane Layout
Carousel
Quick Actions
Dashboard
Workspaces
![Page 48: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/48.jpg)
Dashboard
Good application entry point
Takes a lot of real estate
May appear that application has limited functionality
May be overwhelming to a new user
![Page 49: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/49.jpg)
Action Bar
Multi-Pane Layout
Carousel
Quick Actions
Dashboard
Workspaces
![Page 50: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/50.jpg)
Workspaces
Useful when dealing with a lot of data
Clear navigation
![Page 51: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/51.jpg)
Thank You
![Page 52: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/52.jpg)
Android UI PatternsNew Patterns Problem Solution Since Phone Tablet
Action Bar Access to most common actions
Horizontal action bar on top of the screen
3.0 Yes Yes
Carousel Engaging way to select options
scrolling 2D/3D carousel 3rd party(3.0+)
Yes Yes
Multi-pane Layout View Provide effective use of large screens
Composite UI with reusable components
3.0(with 1.6
compatibility)
No Yes
Existing Patterns Problem Solution Since Phone Tablet
Dashboard Application home screen Main brander landing page Any In Some Cases
No
Quick Action Menu Provide contextual actions on a small screen
simple pop-up menu 3rd party(2.0+)
Yes In Some Cases
Workspaces Displaying a lot of data on a small screen
horizontally scrollable tabs Any Yes No
![Page 53: Android ui patterns](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c806b84a79599c148b459c/html5/thumbnails/53.jpg)
Resources
• http://en.wikipedia.org/wiki/User_interface_design• http://www.androiduipatterns.com/• http://momentummobile.com/mobile-app-ui-ux-design.html• http://developer.android.com/guide/topics/ui/declaring-layout.html• http://developer.android.com/guide/practices/screens_support.html• http://developer.android.com/guide/practices/ui_guidelines/icon_design.html • http://www.google.com/events/io/2011/sessions/designing-and-implementing-android-uis-for-phones-
and-tablets.html• http://www.donnfelker.com/downloads/AndroidTabletDevelopment.pdf• http://developer.android.com/guide/topics/fundamentals/fragments.html• http://j.mp/io2011-carousel-sample