1. Android Design Principles

2. Android Design Principles
Delight me in surprising ways -

3. Android Design Principles
Delight me in surprising ways - beautiful surface, a carefully-
placed animation, or a well-timed sound effect

4. Android Design Principles
Delight me in surprising ways - beautiful surface, a carefully-
placed animation, or a well-timed sound effect

5. Android Design Principles
Real objects are more fun than buttons and menus -

6. Android Design Principles
Real objects are more fun than buttons and menus - Allow
people to directly touch and manipulate objects in your app

7. Android Design Principles
Real objects are more fun than buttons and menus - Allow
people to directly touch and manipulate objects in your app

8. Android Design Principles
Let me make it mine -

9. Android Design Principles
Let me make it mine - People love to add personal touches
because it helps them feel at home and in control

10. Android Design Principles
Let me make it mine - People love to add personal touches
because it helps them feel at home and in control

11. Android Design Principles
Get to know me -

12. Android Design Principles
Get to know me - Learn peoples' preferences over time

13. Android Design Principles
Get to know me - Learn peoples' preferences over time

14. Android Design Principles
Keep it brief -

15. Android Design Principles
Keep it brief - Use short phrases with simple words

16. Android Design Principles
Keep it brief - Use short phrases with simple words

17. Android Design Principles
Pictures are faster than words -

18. Android Design Principles
Pictures are faster than words - Consider using pictures to
explain ideas

19. Android Design Principles
Pictures are faster than words - Consider using pictures to
explain ideas

20. Android Design Principles
Decide for me but let me have the final say -

21. Android Design Principles
Decide for me but let me have the final say - Take your best
guess and act rather than asking first

22. Android Design Principles
Decide for me but let me have the final say - Take your best
guess and act rather than asking first

23. Android Design Principles
Only show what I need when I need it -

24. Android Design Principles
Only show what I need when I need it - People get overwhelmed
when they see too much at once

25. Android Design Principles
Only show what I need when I need it - People get overwhelmed
when they see too much at once

26. Android Design Principles
I should always know where I am -

27. Android Design Principles
I should always know where I am - Give people confidence that
they know their way around

28. Android Design Principles
I should always know where I am - Give people confidence that
they know their way around

29. Android Design Principles
Never lose my stuff -

30. Android Design Principles
Never lose my stuff - Save what people took time to create and
let them access it from anywhere

31. Android Design Principles
Never lose my stuff - Save what people took time to create and
let them access it from anywhere

32. Android Design Principles
If it looks the same, it should act the same -

33. Android Design Principles
If it looks the same, it should act the same - Help people discern
functional differences by making them visually distinct rather
than subtle

34. Android Design Principles
If it looks the same, it should act the same - Help people discern
functional differences by making them visually distinct rather
than subtle

35. Android Design Principles
Only interrupt me if it's important -

36. Android Design Principles
Only interrupt me if it's important - Like a good personal
assistant, shield people from unimportant minutiae

37. Android Design Principles
Only interrupt me if it's important - Like a good personal
assistant, shield people from unimportant minutiae

38. Android Design Principles
Give me tricks that work everywhere -

39. Android Design Principles
Give me tricks that work everywhere - Make your app easier to
learn by leveraging visual patterns and muscle memory from
other Android apps

40. Android Design Principles
Give me tricks that work everywhere - Make your app easier to
learn by leveraging visual patterns and muscle memory from
other Android apps

41. Android Design Principles
It's not my fault -

42. Android Design Principles
It's not my fault - Be gentle in how you prompt people to make
corrections

43. Android Design Principles
It's not my fault - Be gentle in how you prompt people to make
corrections

44. Android Design Principles
Sprinkle encouragement -

45. Android Design Principles
Sprinkle encouragement - Break complex tasks into smaller steps
that can be easily accomplished

46. Android Design Principles
Sprinkle encouragement - Break complex tasks into smaller steps
that can be easily accomplished

47. Android Design Principles
Do the heavy lifting for me -

48. Android Design Principles
Do the heavy lifting for me - Make novices feel like experts by
enabling them to do things they never thought they could

49. Android Design Principles
Do the heavy lifting for me - Make novices feel like experts by
enabling them to do things they never thought they could

50. Android Design Principles
Make important things fast -

51. Android Design Principles
Make important things fast - Not all actions are equal. Decide
what's most important in your app and make it easy to find and
fast to use

52. Android Design Principles
Make important things fast - Not all actions are equal. Decide
what's most important in your app and make it easy to find and
fast to use

53. System Bars

54. System Bars

55. System Bars
1. Status Bar -

56. System Bars
1. Status Bar - Displays pending notifications on the left and status, such as time, battery
level, or signal strength, on the right.

57. System Bars
1. Status Bar - Displays pending notifications on the left and status, such as time, battery
level, or signal strength, on the right.
2. Navigation Bar -

58. System Bars
1. Status Bar - Displays pending notifications on the left and status, such as time, battery
level, or signal strength, on the right.
2. Navigation Bar - New for phones in Android 4.0, the navigation bar is present only on
devices that don't have the traditional hardware keys

59. System Bars
1. Status Bar - Displays pending notifications on the left and status, such as time, battery
level, or signal strength, on the right.
2. Navigation Bar - New for phones in Android 4.0, the navigation bar is present only on
devices that don't have the traditional hardware keys
3. Combined Bar -

60. System Bars
1. Status Bar - Displays pending notifications on the left and status, such as time, battery
level, or signal strength, on the right.
2. Navigation Bar - New for phones in Android 4.0, the navigation bar is present only on
devices that don't have the traditional hardware keys
3. Combined Bar - On tablet form factors the status and navigation bars are combined into a
single bar at the bottom of the screen.

61. Notifications
Notifications are brief messages that users can access
at any time from the status bar. They provide
updates, reminders, or information that's important,
but not critical enough to warrant interrupting the
user. Open the notifications drawer by swiping down
on the status bar. Touching a notification opens the
associated app.

62. Notifications
Notifications can be expanded to uncover more details and relevant actions.
When collapsed, notifications have a one-line title and a one-line message.
The recommended layout for a notification includes two lines.
If necessary, you can add a third line.
Swiping a notification right or left removes it from the notification drawer.

63. Common App UI

64. Common App UI

65. Common App UI
1. Main Action Bar -

66. Common App UI
1. Main Action Bar - The command and control
center for your app. The main action bar includes
elements for navigating your app's hierarchy and
views, and also surfaces the most important
actions.

67. Common App UI
1. Main Action Bar - The command and control
center for your app. The main action bar includes
elements for navigating your app's hierarchy and
views, and also surfaces the most important
actions.
2. View Control -

68. Common App UI
1. Main Action Bar - The command and control
center for your app. The main action bar includes
elements for navigating your app's hierarchy and
views, and also surfaces the most important
actions.
2. View Control - Allows users to switch between
the different views that your app provides. Views
typically consist of different arrangements of
your data or different functional aspects of your
app.

69. Common App UI
1. Main Action Bar - The command and control
center for your app. The main action bar includes
elements for navigating your app's hierarchy and
views, and also surfaces the most important
actions.
2. View Control - Allows users to switch between
the different views that your app provides. Views
typically consist of different arrangements of
your data or different functional aspects of your
app.
3. Content Area -

70. Common App UI
1. Main Action Bar - The command and control
center for your app. The main action bar includes
elements for navigating your app's hierarchy and
views, and also surfaces the most important
actions.
2. View Control - Allows users to switch between
the different views that your app provides. Views
typically consist of different arrangements of
your data or different functional aspects of your
app.
3. Content Area - The space where the content of
your app is displayed.

71. Common App UI
1. Main Action Bar - The command and control
center for your app. The main action bar includes
elements for navigating your app's hierarchy and
views, and also surfaces the most important
actions.
2. View Control - Allows users to switch between
the different views that your app provides. Views
typically consist of different arrangements of
your data or different functional aspects of your
app.
3. Content Area - The space where the content of
your app is displayed.
4. Split Action Bar -

72. Common App UI
1. Main Action Bar - The command and control
center for your app. The main action bar includes
elements for navigating your app's hierarchy and
views, and also surfaces the most important
actions.
2. View Control - Allows users to switch between
the different views that your app provides. Views
typically consist of different arrangements of
your data or different functional aspects of your
app.
3. Content Area - The space where the content of
your app is displayed.
4. Split Action Bar - Split action bars provide a way
to distribute actions across additional bars
located below the main action bar or at the
bottom of the screen. In this example, a split
action bar moves important actions that won't fit
in the main bar to the bottom.

73. Overview of Screens Support

74. Overview of Screens Support
Terms and concepts:

75. Overview of Screens Support
Terms and concepts:
1. Screen size -

76. Overview of Screens Support
Terms and concepts:
1. Screen size - Actual physical size, measured as the screen's diagonal

77. Overview of Screens Support
Terms and concepts:
1. Screen size - Actual physical size, measured as the screen's diagonal
2. Screen density -

78. Overview of Screens Support
Terms and concepts:
1. Screen size - Actual physical size, measured as the screen's diagonal
2. Screen density - The quantity of pixels within a physical area of the
screen; usually referred to as dpi (dots per inch)

79. Overview of Screens Support
Terms and concepts:
1. Screen size - Actual physical size, measured as the screen's diagonal
2. Screen density - The quantity of pixels within a physical area of the
screen; usually referred to as dpi (dots per inch)
3. Orientation -

80. Overview of Screens Support
Terms and concepts:
1. Screen size - Actual physical size, measured as the screen's diagonal
2. Screen density - The quantity of pixels within a physical area of the
screen; usually referred to as dpi (dots per inch)
3. Orientation - The orientation of the screen from the user's point of view.
This is either landscape or portrait, meaning that the screen's aspect
ratio is either wide or tall, respectively.

81. Overview of Screens Support
Terms and concepts:
1. Screen size - Actual physical size, measured as the screen's diagonal
2. Screen density - The quantity of pixels within a physical area of the
screen; usually referred to as dpi (dots per inch)
3. Orientation - The orientation of the screen from the user's point of view.
This is either landscape or portrait, meaning that the screen's aspect
ratio is either wide or tall, respectively.
4. Resolution -

82. Overview of Screens Support
Terms and concepts:
1. Screen size - Actual physical size, measured as the screen's diagonal
2. Screen density - The quantity of pixels within a physical area of the
screen; usually referred to as dpi (dots per inch)
3. Orientation - The orientation of the screen from the user's point of view.
This is either landscape or portrait, meaning that the screen's aspect
ratio is either wide or tall, respectively.
4. Resolution - The total number of physical pixels on a screen. When
adding support for multiple screens, applications do not work directly
with resolution; applications should be concerned only with screen size
and density

83. Overview of Screens Support
Terms and concepts:
1. Screen size - Actual physical size, measured as the screen's diagonal
2. Screen density - The quantity of pixels within a physical area of the
screen; usually referred to as dpi (dots per inch)
3. Orientation - The orientation of the screen from the user's point of view.
This is either landscape or portrait, meaning that the screen's aspect
ratio is either wide or tall, respectively.
4. Resolution - The total number of physical pixels on a screen. When
adding support for multiple screens, applications do not work directly
with resolution; applications should be concerned only with screen size
and density
5. Density-independent pixel (dp) -

84. Overview of Screens Support
Terms and concepts:
1. Screen size - Actual physical size, measured as the screen's diagonal
2. Screen density - The quantity of pixels within a physical area of the
screen; usually referred to as dpi (dots per inch)
3. Orientation - The orientation of the screen from the user's point of view.
This is either landscape or portrait, meaning that the screen's aspect
ratio is either wide or tall, respectively.
4. Resolution - The total number of physical pixels on a screen. When
adding support for multiple screens, applications do not work directly
with resolution; applications should be concerned only with screen size
and density
5. Density-independent pixel (dp) - A virtual pixel unit that you should use
when defining UI layout, to express layout dimensions or position in a
density-independent way. The density-independent pixel is equivalent to
one physical pixel on a 160 dpi screen, which is the baseline density
assumed by the system for a "medium" density screen. The conversion of
dp units to screen pixels is simple: px = dp * (dpi / 160)

85. Overview of Screens Support

86. Overview of Screens Support
Range of screens supported:

87. Overview of Screens Support
Range of screens supported:
1. Four generalized sizes -

88. Overview of Screens Support
Range of screens supported:
1. Four generalized sizes - small, normal, large, and xlarge

89. Overview of Screens Support
Range of screens supported:
1. Four generalized sizes - small, normal, large, and xlarge
2. Four generalized densities -

90. Overview of Screens Support
Range of screens supported:
1. Four generalized sizes - small, normal, large, and xlarge
2. Four generalized densities - ldpi (low), mdpi (medium), hdpi (high),
and xhdpi (extra high)

91. Overview of Screens Support
Range of screens supported:
1. Four generalized sizes - small, normal, large, and xlarge
2. Four generalized densities - ldpi (low), mdpi (medium), hdpi (high),
and xhdpi (extra high)

92. Overview of Screens Support
Each generalized screen size has an associated minimum resolution that's
defined by the system
1. xlarge - at least 960dp x 720dp
2. large - at least 640dp x 480dp
3. normal - at least 470dp x 320dp
4. small - at least 426dp x 320dp

93. Overview of Screens Support
Resource sizes for different densities:

94. Overview of Screens Support
Figures 1 and 2 show the difference between an application when it does not
provide density independence and when it does, respectively:
Figure 1
Figure 2

95. Overview of Screens Support
Following is a list of resource directories in an application that provides
different layout designs for different screen sizes and different bitmap
drawables for medium, high, and extra high density screens:
res/layout/my_layout.xml // layout for normal screen size ("default")
res/layout-small/my_layout.xml // layout for small screen size
res/layout-large/my_layout.xml // layout for large screen size
res/layout-xlarge/my_layout.xml // layout for extra large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation
res/drawable-mdpi/my_icon.png // bitmap for medium density
res/drawable-hdpi/my_icon.png // bitmap for high density
res/drawable-xhdpi/my_icon.png // bitmap for extra high density

96. Draw 9-patch
1. Define the stretchable patches
2. Define content area (optional)
You can find this tool:
<Android SDK directory>/tools

97. Additional info
1. http://developer.android.com/design/index.html
2. http://developer.android.com/guide/practices/screens_support.html#support
3. http://developer.android.com/guide/topics/resources/providing-
resources.html#BestMatch
4. http://developer.android.com/guide/practices/ui_guidelines/icon_design.html
5. http://developer.android.com/guide/practices/ui_guidelines/icon_design.html#
design-tips
6. http://developer.android.com/design/patterns/multi-pane-layouts.html