Designing and ImplementingAndroid UIs for Phones and TabletsMatias DuarteRich FulcherRoman NurikAdam PowellChristian Rober...
Ask questions                                          Give feedbackhttp://goo.gl/mod/zdyR                                ...
Agenda1. Introduction to tablets2. Honeycomb visual design3. Tablet UI patterns + Honeycomb framework features    – Intera...
Introduction to tablets
Design Goals for Honeycomb6
Design Goals for Honeycomb7
Design Goals for Honeycomb8
The Beginning of a Journey9
Honeycomb visual design
Introducing: Holographic UI
Holo Theme: Design Goals1 / Enable flexible, dynamic UI2 / Simplify, open up design3 / Enable extensibility12
1 / Enable dynamic UI: early explorations
1 / Enable flexible, dynamic UI
1 / Enable flexible, dynamic UI
1 / Enable flexible, dynamic UI
1 / Enable flexible, dynamic UI
Holo Theme: Design Goals1 / Enable flexible, dynamic UI2 / Simplify, open up design3 / Enable extensibility18
2 / Simplify: removing boxes
2 / Simplify: removing boxes
2 / Simplify: robust spacing, grid metrics
2 / Simplify: robust spacing, grid metrics
Holo Theme: Design Goals1 / Enable flexible, dynamic UI2 / Simplify, open up design3 / Enable extensibility24
3 / Enable extensibility: Design tips๏ Choose light or dark theme as a start point     – Consider changing highlight color...
Application Branding     Density-specific       app icons                        Hi-res Market icon26
Application Branding                                         Promotional                                             graph...
Honeycomb UI patterns andframework features
UI Patterns๏ Like a software design pattern, a UI design pattern describes  a general solution to a recurring problem๏ Fra...
Action BarIntroduction๏ Not a new pattern     – Presented as phone UI pattern at last years I/O     – Used in many apps th...
Action BarGeneral organization๏ App icon๏ View details๏ Action buttons31
Action BarGeneral organization๏ App icon     – Can be replaced with logo or other branding     – Used to support “upward” ...
Action BarGeneral organization๏ View details     – Simple: non-interactive title bar replacement     – Richer: Tabs, drop-...
Action BarGeneral organization๏ Action buttons     – More important / frequently-accessed action at left     – Buttons can...
Action BarContextual actions๏ Action bar can transform its appearance when items are selected     – Useful for single or m...
Action BarImplementation๏ Basic action bar     – Theme.Holo or targetSdkVersion ≥ 11.     – Action items from res/menu/๏ C...
Action BarCompatibility1. Write a custom action bar implementation pre-Honeycomb     http://code.google.com/p/iosched2. Al...
Action BarPhones and smaller screens๏ Swap out elements for space-conservative variants     – Icon + text reduced to just ...
Action BarPhones andsmaller screens39
Multi-pane LayoutsIntroduction๏ Take advantage of vastly increased real estate     – Give more context     – Consolidate m...
Multi-pane Layouts                                           StrategiesOrientation change๏ Orientation changes should  pre...
Multi-pane LayoutsImplementation — Fragments๏ Fragment class๏ Optionally use the <fragment> tag in layout XML42
Multi-pane LayoutsA quick intro to Fragments๏ “Fragments” of an Activity๏ Unit of reuse between Activities๏ Separation of ...
Multi-pane LayoutsCompatibility๏ Can use Fragments with the Android support library  available through the SDK manager๏ Us...
Multi-pane LayoutsUsing resources๏ You’ve probably seen this before:     – drawable-ldpi/     – drawable-mdpi/     – drawa...
Multi-pane LayoutsUsing resources๏ Activities can inflate layouts with different fragment configurations46
Multi-pane LayoutsUsing resources๏ Activities can inflate layouts with different fragment configurations        Stack     ...
Multi-pane LayoutsUsing resources๏ Activities can inflate layouts with different fragment configurations                  ...
Multi-pane LayoutsUsing resources๏ Activities can inflate layouts with different fragment configurations                  ...
Multi-pane LayoutsUsing resources๏ Some other handy uses:     – Fragments can use layouts with different view configuratio...
App NavigationIntroduction๏ One of the more dramatic changes in Honeycomb๏ Increased variety of mechanisms for direct, dee...
App NavigationHighlights                       Richer home screen widgetsRicher notifications                             ...
App NavigationNavigation and user memory๏ Android has traditionally relied on temporal memory:     –   Users are good at r...
App NavigationBack versus Up๏ SYSTEM BACK navigates history between related screens๏ APPLICATION UP navigates hierarchy wi...
App NavigationExample Flows Contacts Task                 Contacts55
App NavigationExample Flows Contacts Task                 Contacts   Contact                            details56
App NavigationExample Flows                            BACK Contacts Task                 Contacts          Contact       ...
App NavigationExample Flows                            UP Contacts Task                 Contacts        Contact           ...
App NavigationExample Flows Contacts Task                 Contacts59
App NavigationExample Flows Contacts Task                 Contacts   Contact                            details60
App NavigationExample Flows Contacts Task                 Contacts   Contact   Compose                            details ...
App NavigationExample Flows                                      BACK Contacts Task                 Contacts   Contact    ...
App NavigationExample Flows Contacts Task                 Contacts   Contact   Compose                            details ...
App NavigationWhat you need to do๏ If you have an app with hierarchy, support UP in action bar๏ If you support system deep...
Beyond the ListIntroduction๏ Views for media-rich applications๏ “Hero moments” to break the monotony of list views๏ Encour...
Beyond the ListExamples66
Beyond the ListImplementation๏ CarouselView     – Renderscript     – Intended for customization        http://j.mp/io2011-...
Case study — Google I/O 2011 App
Download the app now.     We’ll wait.                             http://goo.gl/UhnLT69
How it worksBasics๏ Single .APK๏ Custom layouts, drawable, style, dimension  resources for -xlarge-v11     – Gingerbread t...
How it worksActivities๏ Different types of activities:     – Universal:     HomeActivity     – Phone-only:    SessionsActi...
How it worksAction bar๏ Custom action bar (ActionBarCompat) for phones     – Still using res/menu/     – Action bar and bu...
Tab Drawables — Phones and Tablets, Nine-patches๏ drawable-hdpi๏ drawable-xlarge-mdpi-v1176
Body Content Dimensions — Phones and TabletsPhones:         values/dimens.xml                <dimen name="body_padding_lar...
Get the code:http://code.google.com/p/iosched
What We Covered1. Introduction to tablets2. Honeycomb visual design3. Tablet UI patterns + Honeycomb framework features   ...
Ask questions                        Give feedbackhttp://goo.gl/mod/zdyR                 http://goo.gl/4dTQp              ...
Designing and implementing_android_uis_for_phones_and_tablets
Designing and implementing_android_uis_for_phones_and_tablets
Designing and implementing_android_uis_for_phones_and_tablets
Designing and implementing_android_uis_for_phones_and_tablets
Designing and implementing_android_uis_for_phones_and_tablets
Designing and implementing_android_uis_for_phones_and_tablets
Upcoming SlideShare
Loading in...5
×

Designing and implementing_android_uis_for_phones_and_tablets

380

Published on

Designing and implementing_android_uis_for_phones_and_tablets

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

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

No notes for slide

Designing and implementing_android_uis_for_phones_and_tablets

  1. 1. Designing and ImplementingAndroid UIs for Phones and TabletsMatias DuarteRich FulcherRoman NurikAdam PowellChristian Robertson #io2011 #Android2
  2. 2. Ask questions Give feedbackhttp://goo.gl/mod/zdyR http://goo.gl/4dTQp Note: Both links are also available in the Google I/O Android App
  3. 3. Agenda1. Introduction to tablets2. Honeycomb visual design3. Tablet UI patterns + Honeycomb framework features – Interaction design – Implementation4. Case study — Google I/O 2011 App4
  4. 4. Introduction to tablets
  5. 5. Design Goals for Honeycomb6
  6. 6. Design Goals for Honeycomb7
  7. 7. Design Goals for Honeycomb8
  8. 8. The Beginning of a Journey9
  9. 9. Honeycomb visual design
  10. 10. Introducing: Holographic UI
  11. 11. Holo Theme: Design Goals1 / Enable flexible, dynamic UI2 / Simplify, open up design3 / Enable extensibility12
  12. 12. 1 / Enable dynamic UI: early explorations
  13. 13. 1 / Enable flexible, dynamic UI
  14. 14. 1 / Enable flexible, dynamic UI
  15. 15. 1 / Enable flexible, dynamic UI
  16. 16. 1 / Enable flexible, dynamic UI
  17. 17. Holo Theme: Design Goals1 / Enable flexible, dynamic UI2 / Simplify, open up design3 / Enable extensibility18
  18. 18. 2 / Simplify: removing boxes
  19. 19. 2 / Simplify: removing boxes
  20. 20. 2 / Simplify: robust spacing, grid metrics
  21. 21. 2 / Simplify: robust spacing, grid metrics
  22. 22. Holo Theme: Design Goals1 / Enable flexible, dynamic UI2 / Simplify, open up design3 / Enable extensibility24
  23. 23. 3 / Enable extensibility: Design tips๏ Choose light or dark theme as a start point – Consider changing highlight color and background image – When overriding styles and themes, override all assets๏ Open design, removing boxes where appropriate – Spacing and metrics matter – “Stretch to fill” on tablets doesn’t work for many UI elements๏ Spend time on icons & promo graphics ...25
  24. 24. Application Branding Density-specific app icons Hi-res Market icon26
  25. 25. Application Branding Promotional graphic Feature banner graphic27
  26. 26. Honeycomb UI patterns andframework features
  27. 27. UI Patterns๏ Like a software design pattern, a UI design pattern describes a general solution to a recurring problem๏ Framework-supported๏ Guidelines, not restrictions๏ Topics we’ll discuss today: 1. Action Bar 2. Multi-pane Layouts 3. App Navigation 4. Beyond the List29
  28. 28. Action BarIntroduction๏ Not a new pattern – Presented as phone UI pattern at last years I/O – Used in many apps through Android Market – Honeycomb has greatly extended its usefulness๏ Dedicated real estate at the top of each screen – Generally persistent throughout application๏ Used to make frequently used actions prominent๏ Supports navigation๏ Convenient means of handling Menu and Search30
  29. 29. Action BarGeneral organization๏ App icon๏ View details๏ Action buttons31
  30. 30. Action BarGeneral organization๏ App icon – Can be replaced with logo or other branding – Used to support “upward” navigation within the app32
  31. 31. Action BarGeneral organization๏ View details – Simple: non-interactive title bar replacement – Richer: Tabs, drop-down menus, breadcrumbs33
  32. 32. Action BarGeneral organization๏ Action buttons – More important / frequently-accessed action at left – Buttons can be icon-only, text-only, or icon-and-text – Overflow menu34
  33. 33. Action BarContextual actions๏ Action bar can transform its appearance when items are selected – Useful for single or multiple selection – Typically invoking via touch and hold๏ Like normal action bar, three sections: – Done button (for releasing selection) – Selection details – Action Buttons๏ Implemented using ActionMode35
  34. 34. Action BarImplementation๏ Basic action bar – Theme.Holo or targetSdkVersion ≥ 11. – Action items from res/menu/๏ Customizing the action bar – ActionBar class – showAsAction for menu items http://j.mp/customizing-action-bar36
  35. 35. Action BarCompatibility1. Write a custom action bar implementation pre-Honeycomb http://code.google.com/p/iosched2. Alternatively, defer to the standard Options menu37
  36. 36. Action BarPhones and smaller screens๏ Swap out elements for space-conservative variants – Icon + text reduced to just icon – Overflow icon hidden, invoked using MENU key๏ Split single bar into two – View portion such as Tabs can become second row, below action bar – Actions can move into bottom action bar๏ 2-3 main action buttons, others placed in Overflow – Determined by showAsAction = “ifRoom” or “always”38
  37. 37. Action BarPhones andsmaller screens39
  38. 38. Multi-pane LayoutsIntroduction๏ Take advantage of vastly increased real estate – Give more context – Consolidate multiple related phone screens into a single compound view – Avoid excessively long line lengths๏ Panes to the right should generally present more content or details for items selected in the panes on the left.40
  39. 39. Multi-pane Layouts StrategiesOrientation change๏ Orientation changes should preserve functional parity – User shouldn’t have to rotate device to achieve a task Stretch Stack (e.g. Settings) (e.g. Calendar)๏ Strategies apply per-screen, not per app๏ For the show/hide orientation strategy, use UP navigation to show the master pane Expand/collapse Show/hide – e.g. Gmail conversation view (e.g. Google Talk) (e.g. Gmail)41
  40. 40. Multi-pane LayoutsImplementation — Fragments๏ Fragment class๏ Optionally use the <fragment> tag in layout XML42
  41. 41. Multi-pane LayoutsA quick intro to Fragments๏ “Fragments” of an Activity๏ Unit of reuse between Activities๏ Separation of concerns๏ Fragments don’t necessarily have views – Fragments are a lifecycle construct, not necessarily a visual construct๏ ...but this talk is about UI.43
  42. 42. Multi-pane LayoutsCompatibility๏ Can use Fragments with the Android support library available through the SDK manager๏ Use getSupportFragmentManager๏ All activities extend FragmentActivity http://j.mp/fragments-for-all44
  43. 43. Multi-pane LayoutsUsing resources๏ You’ve probably seen this before: – drawable-ldpi/ – drawable-mdpi/ – drawable-hdpi/๏ But you can also do this: – layout-normal/ – layout-large/ – layout-xlarge/ – layout-xlarge-port/45
  44. 44. Multi-pane LayoutsUsing resources๏ Activities can inflate layouts with different fragment configurations46
  45. 45. Multi-pane LayoutsUsing resources๏ Activities can inflate layouts with different fragment configurations Stack (e.g. Calendar)47
  46. 46. Multi-pane LayoutsUsing resources๏ Activities can inflate layouts with different fragment configurations layout-xlarge-land/my_layout.xml <LinearLayout android:orientation=”horizontal” android:layout_width=”match_parent” android:layout_height=”match_parent”> <fragment android:name=”com.example.MainPaneFragment” android:id=”@+id/main_pane” Stack android:layout_width=”0dip” android:layout_weight=”1” android:layout_height=”match_parent” /> (e.g. Calendar) <LinearLayout android:orientation=”vertical” android:layout_width=”wrap_content” android:layout_height=”match_parent”> <fragment android:name=”com.example.MonthFragment” android:id=”@+id/month_pane” android:layout_width=”wrap_content” android:layout_height=”0dip” android:layout_weight=”1” /> <fragment android:name=”com.example.CalendarListFragment” android:id=”@+id/list_pane” android:layout_width=”wrap_content” android:layout_height=”0dip” android:layout_weight=”1” /> </LinearLayout>48 </LinearLayout>
  47. 47. Multi-pane LayoutsUsing resources๏ Activities can inflate layouts with different fragment configurations layout-xlarge-port/my_layout.xml <LinearLayout android:orientation=”vertical” android:layout_width=”match_parent” android:layout_height=”match_parent”> <fragment android:name=”com.example.MainPaneFragment” android:id=”@+id/main_pane” Stack android:layout_width=”match_parent” android:layout_height=”0dip” android:layout_weight=”1” /> (e.g. Calendar) <LinearLayout android:orientation=”horizontal” android:layout_width=”match_parent” android:layout_height=”wrap_content”> <fragment android:name=”com.example.MonthFragment” android:id=”@+id/month_pane” android:layout_width=”0dip” android:layout_weight=”1” android:layout_height=”wrap_content” /> <fragment android:name=”com.example.CalendarListFragment” android:id=”@+id/list_pane” android:layout_width=”0dip” android:layout_weight=”1” android:layout_height=”wrap_content” /> </LinearLayout>49 </LinearLayout>
  48. 48. Multi-pane LayoutsUsing resources๏ Some other handy uses: – Fragments can use layouts with different view configurations – List items can be more detailed or compact as needed – integer or boolean resources can have different values50
  49. 49. App NavigationIntroduction๏ One of the more dramatic changes in Honeycomb๏ Increased variety of mechanisms for direct, deep navigation into an app51
  50. 50. App NavigationHighlights Richer home screen widgetsRicher notifications ‘Recents’52
  51. 51. App NavigationNavigation and user memory๏ Android has traditionally relied on temporal memory: – Users are good at remembering what just happened – Great for snapping back to one context directly from another – Much harder to sequence precise order of events that happened a little while ago – More potential for error, surprise๏ Users have strong structural memory – Remember relationships between screens in an app – Used to going “Home” in web apps – Clearer expectations for behavior53
  52. 52. App NavigationBack versus Up๏ SYSTEM BACK navigates history between related screens๏ APPLICATION UP navigates hierarchy within a single app54
  53. 53. App NavigationExample Flows Contacts Task Contacts55
  54. 54. App NavigationExample Flows Contacts Task Contacts Contact details56
  55. 55. App NavigationExample Flows BACK Contacts Task Contacts Contact details57
  56. 56. App NavigationExample Flows UP Contacts Task Contacts Contact details58
  57. 57. App NavigationExample Flows Contacts Task Contacts59
  58. 58. App NavigationExample Flows Contacts Task Contacts Contact details60
  59. 59. App NavigationExample Flows Contacts Task Contacts Contact Compose details email61
  60. 60. App NavigationExample Flows BACK Contacts Task Contacts Contact Compose details email62
  61. 61. App NavigationExample Flows Contacts Task Contacts Contact Compose details email UP Gmail Task Gmail63
  62. 62. App NavigationWhat you need to do๏ If you have an app with hierarchy, support UP in action bar๏ If you support system deep links into your app, inject screens “above” the target into the back stack – E.g. Deep link from a widget – E.g. Deep link from a notification64
  63. 63. Beyond the ListIntroduction๏ Views for media-rich applications๏ “Hero moments” to break the monotony of list views๏ Encourage more engaged exploration, akin to flipping through a magazine65
  64. 64. Beyond the ListExamples66
  65. 65. Beyond the ListImplementation๏ CarouselView – Renderscript – Intended for customization http://j.mp/io2011-carousel-sample๏ FragmentPager, Workspace for showing one item or page at a time๏ Don’t use the Gallery widget67
  66. 66. Case study — Google I/O 2011 App
  67. 67. Download the app now. We’ll wait. http://goo.gl/UhnLT69
  68. 68. How it worksBasics๏ Single .APK๏ Custom layouts, drawable, style, dimension resources for -xlarge-v11 – Gingerbread tablets will use ‘normal’, phone layout๏ Fragment compatibility library73
  69. 69. How it worksActivities๏ Different types of activities: – Universal: HomeActivity – Phone-only: SessionsActivity (single fragment) – Tablet-only: SessionsMultiPaneActivity๏ Activity helpers – ActivityHelper BaseSinglePaneActivity – ActivityHelperHoneycomb BaseMultiPaneActivity74
  70. 70. How it worksAction bar๏ Custom action bar (ActionBarCompat) for phones – Still using res/menu/ – Action bar and buttons are just styled Views public void onPostCreate(Bundle savedInstanceState) { SimpleMenu menu = new SimpleMenu(mActivity); onCreatePanelMenu(Window.FEATURE_OPTIONS_PANEL, menu); for (int i = 0; i < menu.size(); i++) { MenuItem item = menu.getItem(i); addActionButtonCompatFromMenuItem(item); } }75
  71. 71. Tab Drawables — Phones and Tablets, Nine-patches๏ drawable-hdpi๏ drawable-xlarge-mdpi-v1176
  72. 72. Body Content Dimensions — Phones and TabletsPhones: values/dimens.xml <dimen name="body_padding_large"> 10dp </dimen> <dimen name="text_size_xlarge"> 18sp </dimen> <dimen name="speaker_image_size"> 36dp </dimen>Tablets: values-xlarge-v11/dimens.xml <dimen name="body_padding_large"> 20dp </dimen> <dimen name="text_size_xlarge"> 32sp </dimen> <dimen name="speaker_image_size"> 64dp </dimen>77
  73. 73. Get the code:http://code.google.com/p/iosched
  74. 74. What We Covered1. Introduction to tablets2. Honeycomb visual design3. Tablet UI patterns + Honeycomb framework features – Interaction design – Implementation4. Case study — Google I/O 2011 App79
  75. 75. Ask questions Give feedbackhttp://goo.gl/mod/zdyR http://goo.gl/4dTQp #io2011 #Android
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×