designing and implementing_android_uis_for_phones_and_tablets
DESCRIPTION
Designing and implementing_android_uis_for_phones_and_tabletsTRANSCRIPT
![Page 1: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/1.jpg)
![Page 2: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/2.jpg)
Designing and ImplementingAndroid UIs for Phones and TabletsMatias DuarteRich FulcherRoman NurikAdam PowellChristian Robertson
2
#io2011 #Android
![Page 3: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/3.jpg)
Ask questions
http://goo.gl/mod/zdyR
Give feedback
http://goo.gl/4dTQp
Note: Both links are also available in the Google I/O Android App
![Page 4: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/4.jpg)
Agenda
4
1. Introduction to tablets
2. Honeycomb visual design
3. Tablet UI patterns + Honeycomb framework features– Interaction design– Implementation
4. Case study — Google I/O 2011 App
![Page 5: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/5.jpg)
Introduction to tablets
![Page 6: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/6.jpg)
Design Goals for Honeycomb
6
![Page 7: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/7.jpg)
Design Goals for Honeycomb
7
![Page 8: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/8.jpg)
Design Goals for Honeycomb
8
![Page 9: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/9.jpg)
The Beginning of a Journey
9
![Page 10: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/10.jpg)
Honeycomb visual design
![Page 11: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/11.jpg)
Introducing: Holographic UI
![Page 12: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/12.jpg)
Holo Theme: Design Goals
1 / Enable flexible, dynamic UI2 / Simplify, open up design3 / Enable extensibility
12
![Page 13: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/13.jpg)
1 / Enable dynamic UI: early explorations
![Page 14: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/14.jpg)
1 / Enable flexible, dynamic UI
![Page 15: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/15.jpg)
1 / Enable flexible, dynamic UI
![Page 16: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/16.jpg)
1 / Enable flexible, dynamic UI
![Page 17: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/17.jpg)
1 / Enable flexible, dynamic UI
![Page 18: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/18.jpg)
Holo Theme: Design Goals
1 / Enable flexible, dynamic UI2 / Simplify, open up design3 / Enable extensibility
18
![Page 19: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/19.jpg)
![Page 20: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/20.jpg)
2 / Simplify: removing boxes
![Page 21: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/21.jpg)
2 / Simplify: removing boxes
![Page 22: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/22.jpg)
2 / Simplify: robust spacing, grid metrics
![Page 23: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/23.jpg)
2 / Simplify: robust spacing, grid metrics
![Page 24: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/24.jpg)
Holo Theme: Design Goals
1 / Enable flexible, dynamic UI2 / Simplify, open up design3 / Enable extensibility
24
![Page 25: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/25.jpg)
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
![Page 26: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/26.jpg)
Application Branding
26
Density-specificapp icons
Hi-res Market icon
![Page 27: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/27.jpg)
Application Branding
27
Promotionalgraphic
Feature banner graphic
![Page 28: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/28.jpg)
Honeycomb UI patterns andframework features
![Page 29: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/29.jpg)
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 Bar2. Multi-pane Layouts3. App Navigation4. Beyond the List
29
![Page 30: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/30.jpg)
IntroductionAction Bar
๏ Not a new pattern– Presented as phone UI pattern at last year's 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 Search
30
![Page 31: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/31.jpg)
General organizationAction Bar
๏ App icon
๏ View details
๏ Action buttons
31
![Page 32: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/32.jpg)
General organizationAction Bar
๏ App icon– Can be replaced with logo or other branding– Used to support “upward” navigation within the app
32
![Page 33: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/33.jpg)
General organizationAction Bar
๏ View details– Simple: non-interactive title bar replacement– Richer: Tabs, drop-down menus, breadcrumbs
33
![Page 34: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/34.jpg)
General organizationAction Bar
๏ Action buttons– More important / frequently-accessed action at left– Buttons can be icon-only, text-only, or icon-and-text– Overflow menu
34
![Page 35: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/35.jpg)
Contextual actionsAction Bar
๏ 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 ActionMode
35
![Page 36: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/36.jpg)
ImplementationAction Bar
๏ Basic action bar– Theme.Holo or targetSdkVersion ≥ 11.– Action items from res/menu/
๏ Customizing the action bar– ActionBar class– showAsAction for menu items
36
http://j.mp/customizing-action-bar
![Page 37: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/37.jpg)
CompatibilityAction Bar
1. Write a custom action bar implementation pre-Honeycomb
2. Alternatively, defer to the standard Options menu
37
http://code.google.com/p/iosched
![Page 38: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/38.jpg)
Phones and smaller screensAction Bar
๏ 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
![Page 39: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/39.jpg)
Phones and smaller screens
Action Bar
39
![Page 40: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/40.jpg)
IntroductionMulti-pane Layouts
๏ 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 contentor details for items selected in the panes on the left.
40
![Page 41: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/41.jpg)
Orientation changeMulti-pane Layouts
๏ Orientation changes should preserve functional parity– User shouldn’t have to rotate
device to achieve a task
๏ Strategies apply per-screen, not per app
๏ For the show/hide orientation strategy, use UP navigation to show the master pane– e.g. Gmail conversation view
41
Stretch(e.g. Settings)
Strategies
Show/hide(e.g. Gmail)
Expand/collapse(e.g. Google Talk)
Stack(e.g. Calendar)
![Page 42: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/42.jpg)
Implementation — FragmentsMulti-pane Layouts
๏ Fragment class
๏ Optionally use the <fragment> tag in layout XML
42
![Page 43: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/43.jpg)
A quick intro to FragmentsMulti-pane Layouts
๏ “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
![Page 44: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/44.jpg)
CompatibilityMulti-pane Layouts
๏ Can use Fragments with the Android support libraryavailable through the SDK manager
๏ Use getSupportFragmentManager
๏ All activities extend FragmentActivity
44
http://j.mp/fragments-for-all
![Page 45: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/45.jpg)
Using resourcesMulti-pane Layouts
๏ 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
![Page 46: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/46.jpg)
Using resourcesMulti-pane Layouts
๏ Activities can inflate layouts with different fragment configurations
46
![Page 47: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/47.jpg)
Using resourcesMulti-pane Layouts
๏ Activities can inflate layouts with different fragment configurations
47
Stack(e.g. Calendar)
![Page 48: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/48.jpg)
<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” android:layout_width=”0dip” android:layout_weight=”1” android:layout_height=”match_parent” /> <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></LinearLayout>
Using resourcesMulti-pane Layouts
๏ Activities can inflate layouts with different fragment configurations
48
layout-xlarge-land/my_layout.xml
Stack(e.g. Calendar)
![Page 49: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/49.jpg)
<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” android:layout_width=”match_parent” android:layout_height=”0dip” android:layout_weight=”1” /> <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></LinearLayout>
Using resourcesMulti-pane Layouts
๏ Activities can inflate layouts with different fragment configurations
49
layout-xlarge-port/my_layout.xml
Stack(e.g. Calendar)
![Page 50: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/50.jpg)
Using resourcesMulti-pane Layouts
๏ 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 values
50
![Page 51: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/51.jpg)
IntroductionApp Navigation
๏ One of the more dramatic changes in Honeycomb
๏ Increased variety of mechanisms for direct, deep navigation into an app
51
![Page 52: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/52.jpg)
HighlightsApp Navigation
52
Richer notifications
Richer home screen widgets
‘Recents’
![Page 53: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/53.jpg)
Navigation and user memoryApp Navigation
๏ 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 behavior
53
![Page 54: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/54.jpg)
Back versus UpApp Navigation
๏ SYSTEM BACK navigates history between related screens
๏ APPLICATION UP navigates hierarchy within a single app
54
![Page 55: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/55.jpg)
Example FlowsApp Navigation
55
Contacts Task
Contacts
![Page 56: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/56.jpg)
Example FlowsApp Navigation
56
Contacts Task
Contacts Contactdetails
![Page 57: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/57.jpg)
Example FlowsApp Navigation
57
Contacts Task
Contacts Contactdetails
BACK
![Page 58: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/58.jpg)
Example FlowsApp Navigation
58
Contacts Task
Contacts Contactdetails
UP
![Page 59: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/59.jpg)
Example FlowsApp Navigation
59
Contacts Task
Contacts
![Page 60: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/60.jpg)
Example FlowsApp Navigation
60
Contacts Task
Contacts Contactdetails
![Page 61: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/61.jpg)
Example FlowsApp Navigation
61
Contacts Task
Contacts Contactdetails
Composeemail
![Page 62: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/62.jpg)
Example FlowsApp Navigation
62
Contacts Task
Contacts Contactdetails
Composeemail
BACK
![Page 63: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/63.jpg)
Example FlowsApp Navigation
63
Contacts Task
Contacts Contactdetails
Composeemail
Gmail Task
Gmail
UP
![Page 64: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/64.jpg)
What you need to doApp Navigation
๏ 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 notification
64
![Page 65: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/65.jpg)
IntroductionBeyond the List
๏ Views for media-rich applications
๏ “Hero moments” to break the monotony of list views
๏ Encourage more engaged exploration, akin to flipping through a magazine
65
![Page 66: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/66.jpg)
ExamplesBeyond the List
66
![Page 67: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/67.jpg)
ImplementationBeyond the List
๏ CarouselView– Renderscript– Intended for customization
๏ FragmentPager, Workspace forshowing one item or page at a time
๏ Don’t use the Gallery widget
67
http://j.mp/io2011-carousel-sample
![Page 68: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/68.jpg)
Case study — Google I/O 2011 App
![Page 69: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/69.jpg)
Download the app now.We’ll wait.
69
http://goo.gl/UhnLT
![Page 70: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/70.jpg)
![Page 71: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/71.jpg)
![Page 72: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/72.jpg)
![Page 73: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/73.jpg)
BasicsHow it works
๏ Single .APK
๏ Custom layouts, drawable, style, dimensionresources for -xlarge-v11– Gingerbread tablets will use ‘normal’, phone layout
๏ Fragment compatibility library
73
![Page 74: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/74.jpg)
ActivitiesHow it works
๏ Different types of activities:– Universal: HomeActivity– Phone-only: SessionsActivity (single fragment)– Tablet-only: SessionsMultiPaneActivity
๏ Activity helpers– ActivityHelper BaseSinglePaneActivity– ActivityHelperHoneycomb BaseMultiPaneActivity
74
![Page 75: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/75.jpg)
Action barHow it works
๏ Custom action bar (ActionBarCompat) for phones– Still using res/menu/– Action bar and buttons are just styled Views
75
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); }}
![Page 76: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/76.jpg)
Tab Drawables — Phones and Tablets, Nine-patches
๏ drawable-hdpi
๏ drawable-xlarge-mdpi-v11
76
![Page 77: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/77.jpg)
Body Content Dimensions — Phones and Tablets
77
<dimen name="body_padding_large"> 10dp </dimen><dimen name="text_size_xlarge"> 18sp </dimen><dimen name="speaker_image_size"> 36dp </dimen>
values/dimens.xmlPhones:
<dimen name="body_padding_large"> 20dp </dimen><dimen name="text_size_xlarge"> 32sp </dimen><dimen name="speaker_image_size"> 64dp </dimen>
values-xlarge-v11/dimens.xmlTablets:
![Page 78: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/78.jpg)
http://code.google.com/p/iosched
Get the code:
![Page 79: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/79.jpg)
What We Covered
79
1. Introduction to tablets
2. Honeycomb visual design
3. Tablet UI patterns + Honeycomb framework features– Interaction design– Implementation
4. Case study — Google I/O 2011 App
![Page 80: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/80.jpg)
Ask questions
http://goo.gl/mod/zdyR
Give feedback
http://goo.gl/4dTQp
#io2011 #Android
![Page 81: Designing and implementing_android_uis_for_phones_and_tablets](https://reader033.vdocument.in/reader033/viewer/2022060109/5557bf21d8b42a696c8b52f2/html5/thumbnails/81.jpg)