This document summarizes key Android UI patterns such as the Action Bar, Multi-Pane Layout, Carousel, Quick Actions, Dashboard, and Workspaces. It provides examples of how each pattern addresses common problems and how they have evolved and been implemented in Android since version 3.0. It also discusses goals for Android UI design and differences in experiences between phones and tablets.
11. Tablet vs. Phone User Experience
Users hold and interact with phones and tablets differently
UI needs to be adaptive to support user interaction
12. 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/
13. 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/
14. Navigation in Android 4.0
Software Navigation Buttons
System Back
System Home
Recents
No Search or Menu
17. 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
18. Action Bar - Sections
Where am I?
application icon or logo
can be used for "upward" navigation
19. Action Bar - Sections
What can I see?
view details
(can have a navigation component)
can include tabs, dropdowns, breadcrumbs
20. 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
23. Action Bar - Antipatterns
Ignoring the "Where - See - Do" Best Practice
Button controls at the bottom of the screen
Inconsistent across different applications
25. 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
27. 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
32. Implementing Multi-Pane Layout
Fragments... The Building Blocks
The Resource System... The Dynamic Assembler
Backwards Compatibility Library... support 1.6+
36. Resource System Changes
Old Layout Categories - Since 1.6:
res/layout/my-layout.xml <-- Typical
Or
res/layout-land/my-layout.xml
res/layout-port/my-layout.xml
39. Resource System Changes
New Layout Categories - 3.2+:
Allows Specific Screen Size Designation - Not Just Categories
res/layout/main_activity.xml Phones
res/layout-sw600dp/main_activity.xml 7" Tablets
res/layout-sw720dp/main_activity.xml 10" Tablets
sw = Smallest Width
w = Available Min Width
h = Available Min Height
http://developer.android.com/guide/practices/screens_support.html
http://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts
44. Carousel - Implementation
CarouselView
- Renderscript
- Ready for Customization
Gallery
- Single Items, Single Images
- Not Full Screen
http://j.mp/io2011-carousel-sample
48. 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
52. Android UI Patterns
New Patterns Problem Solution Since Phone Tablet
Action Bar Access to most common Horizontal action bar on top 3.0 Yes Yes
actions of the screen
Carousel Engaging way to select scrolling 2D/3D carousel 3rd party Yes Yes
options (3.0+)
Multi-pane Layout View Provide effective use of Composite UI with reusable 3.0 No Yes
large screens components (with 1.6
compatibility)
Existing Patterns Problem Solution Since Phone Tablet
Dashboard Application home screen Main brander landing page Any In Some No
Cases
Quick Action Menu Provide contextual actions simple pop-up menu 3rd party Yes In Some
on a small screen (2.0+) Cases
Workspaces Displaying a lot of data on a horizontally scrollable tabs Any Yes No
small screen
Peter Android UI as a bit of a moving target. Android 4 - the focus Android UI patterns in the context of Android 4
Peter UI layout established default color schemes boxy immature UI patterns
Peter Dashboard pattern introduced Action bars implemented inconsistently
Peter Dashboard is being replaced with action bar
Peter UI unification lesson learned - UI keeps constantly evolving and applications need to adjust hardware navigation going away
Peter
Peter/Vladan diversified support for multiple versions
Vladan
Vladan phones - one hand holds the device, the other interacts tablets - Because of the size and the weight of tablets, you might design your screens differently to accept interactions on the left and on the right portions of the screen. Ideally, some users would just use their left and right thumbs to interact with your app. Google SDK supports reuse between devices of different screen sizes
Vladan Google Emphasizes Platform Consistency user should feel in control http://momentummobile.com/mobile-app-ui-ux-design.html
Vladan Support in Action Bar or other mechanism Don't Assume Search Hard Key Unified UI toolkit: A single set of UI components, styles, and capabilities for phones, tablets, and other devices. Rich communication and sharing: New social and calendar APIs, Android Beam for NFC-based instant sharing, Wi-Fi Direct support, Bluetooth Health Device Profile support. Deep interactivity and customization: Improved notifications, lockscreen with camera and music controls, and improved app management in the launcher. New graphics, camera, and media capabilities: Image and video effects, precise camera metering and face detection, new media codecs and containers. Interface and input: Hardware-accelerated 2D drawing, new grid-based layout, improved soft keyboard, spell-checker API, stylus input support, and better mouse support.
Vladan Navigation to Search and Menu items must be supported in the application UI - These functions have to find a place in the UI.
Vladan actions - context sensitive actions, most used actions for each screen navigation tabs incorporated directly into the bar search button throughout an application Honeycomb tables (and future Ice Cream Sandwich phones) lack physical navigation buttons Contextual actions can be used based on user's action on the screen (ie. selecting text or an email message) overflow - less commonly used actions, tablets do not have &quot;Menu&quot; button, Overflow menu replaces it Branding and Home Access - excellent spot for application logo, selecting the logo should either send users to the home screen, go back within the application
close to hardware controls
Peter
Peter Take Advantage of Tablet Real Estate Consolidate Multiple Phone Screens into One Layout Master - Detail
Peter Android goal: Create a single APK (android exe) for both tablet and phone app. Ambitious, but Android provides a number of facilities to support this. First - Fragments You can think of a fragment as a modular section of an activity, which has its own lifecycle, receives its own input events, and which you can add or remove while the activity is running. You can combine multiple fragments in a single activity to build a multi-pane UI and reuse a fragment in multiple activities.
Peter Android goal: Create a single APK (android exe) for both tablet and phone app. Ambitious, but Android provides a number of facilities to support this. First - Fragments You can think of a fragment as a modular section of an activity, which has its own lifecycle, receives its own input events, and which you can add or remove while the activity is running. You can combine multiple fragments in a single activity to build a multi-pane UI and reuse a fragment in multiple activities.
Fragment - represents a behavior or a portion of user interface in an Activity Can combine multiple fragments in a single activity to build a multi-pane UI and reuse a fragment in multiple activities. modular section of an activity, which has its own lifecycle, receives its own input events, you can add or remove while the activity is running
Peter Honeycomb added new layout categories which you could combine with sizes.
Peter
Peter
Vladan
Vladan
Vladan
Vladan/Peter categorize the patterns into categories-new, relevant, dated new patterns - action bar - multipane - carousel Still good - dashboard - busy indicator - quick action menu - workspaces Not so good - action drawer - dynamic list - look what this is -