Design guidelines for android developers

Boutique product development company
It is amazing what you can accomplish when you have a client-centric team to deliver outstanding products.

Boutique product development company
It is amazing what you can accomplish when you have a client-centric team to deliver outstanding products.
Design Guidelines for Android Developers
Qandil Tariq | Software Engineer
Lala Rukh | Software Engineer

Design Principles
Design Guidelines for Android Developers
Agenda
Style
•Devices And Display
•Supporting Multiple Screens
•Multi-pane layouts
•Themes and styles
•Touch Feedback
•Metrics and Grids
•Iconography
•Branding
•Writing Style
•9-patch Images
•Android utilities

Design Principles
Devices and Displays
Android powers millions of phones, tablets, and other devices in a wide
variety of screen sizes and form factors

Design Principles
Problem:
How to handle multiple devices

Design Principles
Solutions
•The ideal solution is to design the user interface of your application so
that it appears correctly on the widest possible range of devices
•Create apps that gracefully scale from large tablets to smaller phones
How to achieve this
•The best way to achieve this is to design the user interface using layout
managers that do not rely on absolute positioning

Design Principles
Supporting Multiple Screens
Terms and concepts
•
Screen size
•
Actual physical size, measured as the screen's diagonal. For simplicity,
Android groups all actual screen sizes into four generalized sizes:
•
Small
•
Normal
•
Large
•
Extra large

Design Principles
Terms and concepts
•
Screen density
•
The quantity of pixels within a physical area of the screen
•
Usually referred to as dpi (dots per inch). For example, a "low" density
screen has fewer pixels within a given physical area, compared to a
"normal" or "high" density screen.
•
Android groups all actual screen densities into four generalized
densities:
•
Low
•
Medium
•
High
•
Extra high

Design Principles
Terms and concepts
•
Orientation
•
The orientation of the screen from the user's point of view.
•
There are two types of orientation:
•
Portrait
•
Landscape
•
Resolution
•
The total number of physical pixels on a screen.
•
Applications do not work directly with resolution; applications should be
concerned only with screen size and density, as specified by the
generalized size and density groups.

Design Principles
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
px = dp * (dpi / 160).

Design Principles
Android qualifiers that allow you to provide special resources for different
screen configurations.
Link : https://developer.android.com/guide/practices/screens_support.html

Design Principles
Relation between screen size and dpi.

Design Principles
Screen Sizes and Densities in market

Design Principles
Be flexible
Stretch and compress your layouts
Optimize layout
Create compound views that combine multiple views

Design Principles
Assets for all
l
Provide resources for different screen densities (DPI) to ensure that
your app looks great on any device.
l
Almost every application should provide alternative resources to
support specific device configurations.

Design Principles
Alternative layouts
l
Provide alternative layouts for some of the different screen sizes
l
The configuration qualifiers you can use to provide size-specific
resources are small, normal, large, and xlarge. For example, layouts for
an extra large screen should go in layout-xlarge/

Design Principles
What is the strategy
l
One approach is to work in the base standard (normal size and MDPI)
and scale it up or down for the other buckets
l
Another approach is to start with the device with the largest screen size,
and then scale down and figure out the UI compromises you'll need to
make on smaller screens.

Design Principles
Best Practices
• Use wrap_content, fill_parent, or the dp unit for layout dimensions
• Do not use hard-coded pixel values in your application code
• Do not use AbsoluteLayout
• Use size and density-specific resources

Design Principles
Multi-pane layouts
Combining Multiple Views Into One

On smaller devices your content is typically divided into a master grid
or list view and a detail view. Touching an item in the master view
opens a different screen showing that item's detail information.

But Tablets have more screen real estate than phones, you can use
panels to combine the related list and detail views into a single
compound view.

This uses the additional space more efficiently and makes navigating
the app easier.

Design Principles
Multi-pane layouts
Compound Views and Orientation Changes

Screens should strive to have the same functionality regardless of
orientation.

If you use a compound view in one orientation, try not to split it up
when the user rotates the screen.

There are several techniques you can use to adjust the layout after
orientation change while keeping functional parity intact.

Design Principles
Themes and styles
•Themes are Android's mechanism for applying a consistent style to an
app or activity.
• Pick the system theme that best matches the needs and design
aesthetics for your app.
•
• Applying themes will go a long way in helping you to build apps that fit
right into the general visual language of Android
• Benefits:
• It increase code re use ability.
• It generalized the main theme of app in one place.
• You can specify the color,font or any property related to some view at
one place and use it on may places.

Design Principles
Themes and styles
•Android gmail theme:

Design Principles
Themes And Styles
•Styles in Android share a similar philosophy to cascading style sheets
in web design
•They allow you to separate the design from the content.
•A Theme is a style applied to an entire or application, rather than an
individual
•Styles support inheritance.

Design Principles
Themes And Styles
•A style is a collection of properties that specify the look and format for
a or window.
 Color
 Height
 Padding
 Font size

Design Principles
Touch Feedback
• Be responsive to touches in a gentle way
• Let user know the app is "listening"
• Make it subtle
• Why its necessary?
• Try to feel users their actions are very important for app.

Design Principles
Touch Feedback
•Benefits of feedback:

Communication
When your objects react to more complex gestures, help users
understand what the outcome will be.

Design Principles
Touch Feedback
l
Benefits of feedback:

Boundaries
When users try to scroll past the beginning or end of a scrollable area,
communicate the boundary with a visual cue.

Design Principles
Metrics and Grids
48dp Rhythm
l
Touchable UI components are generally laid out along 48dp units.
•On average, 48dp translate to a physical size of about 9mm (with some
variability).

Design Principles
Metrics and Grids
48dp Rhythm
Mind the gaps
•Spacing between each UI element is 8dp.

Design Principles
Metrics and Grids
l
Why 48dp?
If you design your elements to be at least 48dp high and wide you can
guarantee that:
•your targets will never be smaller than the minimum recommended
target size of 7mm regardless of what screen they are displayed on.
•you strike a good compromise between overall information density on
the one hand, and targetability of UI elements on the other.

Design Principles
Iconography
l
Icons can convey intended message better than text
l
Design icons for every density range
l
Taking MDPI as baseline:

LDPI is MDPI x 0.75.

HDPI is MDPI x 1.5.

XHDPI is MDPI x 2.

XXHDPI is MDPI x 3.

Design Principles
Iconography
•Launcher

Should be descriptive, explanatory about your app

On Mobile Device – 48x48 dp (MDPI)

Google Play Store tile size – 512x512dp

Design Principles
Iconography
•Action Bar
l
One of the most important design elements for Android app
l
Provides quick access to more frequent actions
l
Supports consistent navigation and view switching withins app
l
A dedicated space to give your app an identity
l
General structure:
1) App Icon
2) View Control
3) Action Buttons
4) Action Overflow

Design Principles
Iconography
•Action Bar

Use contractions. Pictographic, flat, not too detailed

Size for phone – 32x32 dp (MDPI)

Icons matching with theme

Design Principles
Iconography
•Small Contextual Icons

Neutral, flat, simple

Use neutral colors

Size – 16X16 dp (MDPI)

Design Principles
Iconography
•Notification Icons

Flat and simple

Must be entirely white

Pictographic

Size – 24x24 dp (MDPI)

Design Principles
Iconography
•Design Tips
• Use vector shapes when possible
• Start with large artboards
• When scaling, redraw bitmap layers as needed
• Use common naming conventions for icon assets

Design Principles
Your Branding
•Color

Use color for branding

High contrast color for emphasis

Design Principles
Your Branding
•Logo

Using your logo for branding

Design Principles
Your Branding
•Icons

Use personalized icons if your brand have them already

Design Principles
Writing Style
•Keep it brief
•Put the most important thing first

Design Principles
Writing Style
•Be friendly
•Focus on user's concern, not technical details

Design Principles
Writing Style
•Describe only what's necessary, and no more
•Avoid repetition
If a significant term gets repeated within a screen or block of text, find a
way to use it just once.

Design Principles
Writing Style
•Words to avoid

Design Principles
9-patch Images

name.9.png

1 pixel wide guides

Scale up

Design Principles
Android Asset Studio

Launcher Icons

Action Bar and Tab Icons

Notification Icons

Generic icons

Android Action Bar Style Generator

Android Holo Color Generator

Design Principles
Questions
Qandil Tariq & Lala Rukh

Design Principles
Thank You

Design Principles
References
http://developer.android.com/design/index.html
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
http://radleymarx.com/blog/simple-guide-to-9-patch/
http://developer.android.com/training/multiscreen/screensizes.html

Design guidelines for android developers

More Related Content

Similar to Design guidelines for android developers (20)

Recently uploaded (20)

Design guidelines for android developers