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
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
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
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.
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.
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)
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
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