UI Design and Development
description
Transcript of UI Design and Development
![Page 1: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/1.jpg)
UI Design and Development+Roman Nurik+Nick Butcher
![Page 2: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/2.jpg)
2
1. Designing for Android2. Layouts and resources3. Tablet considerations4. System UI integration5. Wireframing
Agenda
![Page 3: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/3.jpg)
Designing for Android
![Page 4: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/4.jpg)
4
Touch– Interact primarily with your fingers– Expect direct manipulation
Mobile– Often on the go– Often without network connectivity
Heterogeneity– Different screen sizes and densities– Different hardware features– Different OS versions
Design for…
![Page 5: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/5.jpg)
5
“Pictures are faster than words.”
“Only show what I need when I need it.”
“Make the important things fast.”
“Do the heavy lifting for me.”
Key principles
![Page 6: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/6.jpg)
6“Holo” visual language
![Page 7: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/7.jpg)
7
Holo variations
Dark Dark Action Bar
Light
![Page 8: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/8.jpg)
8
Activity UI structure
Action barTabs
Content(activity layout)
![Page 9: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/9.jpg)
9
Activity UI structure
Action bar
![Page 10: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/10.jpg)
10
Action bar
1. App icon andoptional Up caret
2. View control(Title/tabs/dropdown)
3. Action buttons4. Action overflow
![Page 11: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/11.jpg)
11
Action bar
Android 3.0 and above Automatically part of Holo themes Customize:– getActionBar().setDisplayOptions()– getActionBar().setNavigationMode()
![Page 12: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/12.jpg)
12
Activity UI structure
Action bar
![Page 13: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/13.jpg)
13
Activity UI structure
Tabs
![Page 14: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/14.jpg)
14
Tabs
![Page 15: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/15.jpg)
15
Tabs
Part of the ActionBar APIs Usually gesture-enabled using ViewPager
getActionBar().setNavigationMode(NAVIGATION_MODE_TABS);
ActionBar.Tab tab = actionBar.newTab();tab.setText(“Tab 1”);tab.setTabListener(this);getActionBar().addTab(tab);
![Page 16: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/16.jpg)
16
Activity UI structure
Tabs
![Page 17: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/17.jpg)
17
Activity UI structure
Content(activity layout)
![Page 18: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/18.jpg)
Layouts and resources
![Page 19: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/19.jpg)
19
Layout system
The UI for an activity is a tree consisting of view groups and views (leaf nodes),like HTML.
Most commonly defined in XML under res/layout/.
<view group> <view group> <view> <view group> <view> <view>
![Page 20: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/20.jpg)
20
Views and View Groups
Views
Reusable individualUI components
Optionally interactive(clickable/focusable/etc.)
Bare minimum functionality is to draw themselves
View Groups
Ordered list of Views and View Groups
In charge of positioning and sizing their child views and layouts
Simple layouts and more complex groups(e.g. ListView)
![Page 21: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/21.jpg)
21
Views and View Groups
Views
TextView EditText Spinner ImageView Button WebView SurfaceView Your own custom
views
Layouts (simple View Groups)
FrameLayout LinearLayout RelativeLayout GridLayout Your own custom
layouts
Complex View Groups
ScrollView ListView
![Page 22: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/22.jpg)
22
Anatomy ofa simple layout
![Page 23: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/23.jpg)
23
<ScrollView>
<LinearLayout orientation=“vertical”>
<EditText>
<Button>
![Page 24: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/24.jpg)
24
<ScrollView android:layout_width="match_parent" android:layout_height="match_parent">
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="16dp">
<EditText android:id="@+id/email" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/prompt_email" android:inputType="textEmailAddress" android:singleLine="true" />
<EditText android:id="@+id/password" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/prompt_password" android:inputType="textPassword” android:singleLine="true" />
<Button android:id="@+id/sign_in_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:layout_marginTop="16dp" android:paddingLeft="32dp" android:paddingRight="32dp" android:text="@string/action_sign_in_register" /> </LinearLayout></ScrollView>
![Page 25: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/25.jpg)
25
Important layout attributes
android:layout_weight– Children of LinearLayout
android:layout_gravity– Children of FrameLayout, LinearLayout
android:gravity– TextView, LinearLayout
![Page 26: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/26.jpg)
26
Margins and padding
Sign in or register
android:layout_margin
android:padding
![Page 27: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/27.jpg)
27
EXERCISECode this layout
![Page 28: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/28.jpg)
28
Button Button
Button Button
![Page 29: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/29.jpg)
29
Button Button
Button Button
<FrameLayout>
<LinearLayout orientation=“vertical”>
<LinearLayoutorientation=“horizontal”layout_weight=“1”>
![Page 30: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/30.jpg)
30
Fixed header
List view
Fixed footer
![Page 31: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/31.jpg)
31
Fixed header
List view
<LinearLayout>
Fixed footer
<ListView layout_weight=“1”>
layout_height=“wrap_content”
![Page 32: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/32.jpg)
32
App resources
One universal app binary contains all resources
System chooses at runtime which resources to use
res/ drawable drawable-xhdpi drawable-hdpi drawable-mdpi layout layout-land layout-large layout-large-land
![Page 33: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/33.jpg)
33
PNGs, 9-patch PNGs,optimized for multiple densities
Layout XMLoptimized forphysical screen sizeand orientation
Strings XML localized for your target regions
Drawable XML
Strings, styles, themes, etc.Styles, themes varying by API level
res/ drawable drawable-xhdpi drawable-hdpi drawable-mdpi layout layout-land layout-large layout-large-land values values-v11 values-v14 values-en values-fr values-ja
![Page 34: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/34.jpg)
34
Referencing resources
A string in res/values/strings.xml– In Java: R.string.hello– In XML: @string/hello
The system “edit” icon:– In Java: android.R.drawable.ic_menu_edit
– In XML: @android:drawable/ic_menu_edit
![Page 35: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/35.jpg)
35
Referencing resources
android.R.drawable.ic_menu_edit
@android:drawable/ic_menu_edit
Namespace (either android or blank)Resource type
Resource name
![Page 36: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/36.jpg)
36
DIP units keep things thesame physical size across any screen.
1 dip = 1 pixel @ MDPI (160 dpi)
1 dip = 2 pixels @ XHDPI (320 dpi)
Screen density and DIP units
![Page 37: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/37.jpg)
37
Q: What is the Nexus 7’s screen resolution in DIPs if it’s 1280x800 px and 213dpi?
A: ~960x600 dip
![Page 38: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/38.jpg)
38
Screen density and DIP units
Icons and other PNG files should generally be provided for multiple densities
![Page 39: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/39.jpg)
39
Bitmaps (.png) 9-patches (.9.png) State Lists (.xml)
Key drawable types
![Page 40: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/40.jpg)
40
Border pixels indicate stretchable regions
Make density-specific versions (-xhdpi)
9-patches – foo.9.png
![Page 41: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/41.jpg)
41
State list drawables
<selector> <item android:drawable="@drawable/foo_disabled" android:state_enabled="false" ... /> <item android:drawable="@drawable/foo_pressed" android:state_pressed="true" ... /> <item android:drawable="@drawable/foo_focused" android:state_focused="true" ... /> <item android:drawable="@drawable/foo_default" /> </selector>
drawable/ foo.xml
![Page 42: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/42.jpg)
42
State list drawables
drawable-mdpi/
foo_default.png
foo_disabled.png
foo_focused.png
foo_pressed.png
drawable-hdpi/
foo_default.png
foo_disabled.png
foo_focused.png
foo_pressed.png
![Page 43: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/43.jpg)
43
Collections of layout XML attribute values
Instead ofthis…
Styles
<TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="4dp" android:text="1" />
<TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="4dp" android:text="2" />
![Page 44: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/44.jpg)
44
…use this!
Styles
<style name="MyText"> <item name="android:padding">4dp</item> <item name="android:layout_width">4dp</item> <item name="android:layout_height">4dp</item></style>
<TextView style="@style/MyText" android:text="1" />
<TextView style="@style/MyText" android:text="2" />
res/values/ styles.xml
![Page 45: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/45.jpg)
45
Are just styles that apply to activities(or the entire app)
You can extend the default themes!
Themes
AndroidManifest.xml
<application android:theme="@android:style/Theme.Holo"> ...</style>
![Page 46: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/46.jpg)
46
Themes
Holo Dark Holo Light with Dark Action Bar
Holo Light
![Page 47: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/47.jpg)
47
System themes
@android:style/Theme.Holo
@android:style/Theme.Holo.Light.DarkActionBar
@android:style/Theme.Holo.Light
![Page 48: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/48.jpg)
Tablet considerations
![Page 49: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/49.jpg)
49
Information hierarchy and flow
Traditional desktop app or website
![Page 50: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/50.jpg)
50
Information hierarchy and flow
Tablet or mini desktop app
![Page 51: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/51.jpg)
51
Information hierarchy and flow
Mobile phone app
![Page 52: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/52.jpg)
52
Separate activities into UI or code modules, each have their own class
Help with supporting phones + tablets– Each content pane is a fragment– Fragments split across activities
<fragment> in layout XML– Automatically instantiates the given
fragment– Acts as a placeholder for the fragment’s
view to be inserted in that part of the layout tree
Fragments
![Page 53: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/53.jpg)
53
Customize layouts for large screens– Includes <fragment>
tags
Incrementally increase font sizes, spacing, tweak styles
Tablet resources
res/ layout-large/ values-large/ dimens.xml styles.xml
![Page 54: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/54.jpg)
System UI integration
![Page 55: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/55.jpg)
55
System UI integration
App Widgets Accounts + Sync
Notifications
![Page 56: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/56.jpg)
56
CollapsedExpandedAndroid 4.1+
Iconified
Notifications
![Page 57: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/57.jpg)
57
Notifications
Interactive
![Page 58: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/58.jpg)
58
Created with NotificationManagerand Notification.Builder()
Custom layouts with RemoteViews– Your layouts, used in a different process
Interaction is handled entirely using intents
Notifications
![Page 59: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/59.jpg)
59
Scrollable
Interactive
Resizable
App widgets
![Page 60: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/60.jpg)
60
Defined in your manifest as a receiver– Handles the APPWIDGET_UPDATE intent
action– Metadata provided in res/xml/widgetinfo.xml and referenced in manifest
Layout using RemoteViews– Your layouts, used in a different process
Interaction is handled entirely using intents
App widgets
![Page 61: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/61.jpg)
Wireframing
![Page 62: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/62.jpg)
62
Record your ideas andasses their real-world feasibility
Test your your ideas and rapidly iterate– See which work and which don’t, evolve
them
Map out user flow and activity diagrams– Re-arrange/add/remove interactions quickly– Scope UI complexity– Plan out intra-app “Intent-based API”
Why create wireframes?
![Page 63: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/63.jpg)
63
Wireframing before coding saves you time.
![Page 64: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/64.jpg)
64
Wireframing tools
Fidelity
Time/Effort
Pen + Paper
PhotoshopFireworks
Eclipse Layout Editor
Balsamiq Pencil(Firefox addon)
Keynote/Powerpoint
OmniGraffle
(Mac)
Fluid UI
WireframeSketcher
![Page 65: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/65.jpg)
65
Wireframing tools
Fidelity
Time/Effort
Pen + Paper
PhotoshopFireworks
Eclipse Layout Editor
Balsamiq Pencil(Firefox addon)
Keynote/Powerpoint
OmniGraffle
(Mac)
Fluid UI
WireframeSketcher
Interactive
wireframes
![Page 66: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/66.jpg)
66
Wireframing tools
Fidelity
Time/Effort
Pen + Paper
PhotoshopFireworks
Eclipse Layout Editor
Balsamiq Pencil(Firefox addon)
Keynote/Powerpoint
OmniGraffle
(Mac)
Fluid UI
WireframeSketcher
Recommended
tools
![Page 67: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/67.jpg)
67
Always start withpencil and paper.(or a whiteboard)
![Page 68: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/68.jpg)
68
![Page 69: UI Design and Development](https://reader035.fdocuments.us/reader035/viewer/2022062315/5681610a550346895dd05817/html5/thumbnails/69.jpg)
69
EXERCISESketch atodo list app