The document discusses design guidelines for Android developers. It covers supporting multiple screen sizes and densities by using flexible and scalable layouts. It also discusses themes and styles, touch feedback, metrics and grids, iconography, branding, and writing style guidelines. The goal is to help developers create visually appealing and user-friendly apps that work well across different Android devices.
1. Boutique product development company
It is amazing what you can accomplish when you have a client-centric team to deliver outstanding products.
2. 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
3. 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
Qandil Tariq | Software Engineer
4. Design Principles
Devices and Displays
Android powers millions of phones, tablets, and other devices in a wide
variety of screen sizes and form factors
Qandil Tariq | Software Engineer
6. Design Principles
Devices and Displays
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
Qandil Tariq | Software Engineer
7. 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
Qandil Tariq | Software Engineer
8. Design Principles
Supporting Multiple Screens
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
Qandil Tariq | Software Engineer
9. Design Principles
Supporting Multiple Screens
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.
Qandil Tariq | Software Engineer
10. Design Principles
Supporting Multiple Screens
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).
Qandil Tariq | Software Engineer
11. Design Principles
Devices and Displays
Android qualifiers that allow you to provide special resources for different
screen configurations.
Link : https://developer.android.com/guide/practices/screens_support.html
Qandil Tariq | Software Engineer
14. Design Principles
Devices and Displays
Be flexible
Stretch and compress your layouts
Optimize layout
Create compound views that combine multiple views
Qandil Tariq | Software Engineer
15. Design Principles
Devices and Displays
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.
Qandil Tariq | Software Engineer
16. Design Principles
Devices and Displays
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/
Qandil Tariq | Software Engineer
17. Design Principles
Devices and Displays
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.
Qandil Tariq | Software Engineer
18. Design Principles
Supporting Multiple Screens
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
Qandil Tariq | Software Engineer
19. 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.
Qandil Tariq | Software Engineer
20. 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.
Qandil Tariq | Software Engineer
21. 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.
Qandil Tariq | Software Engineer
23. 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.
Qandil Tariq | Software Engineer
24. 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
Qandil Tariq | Software Engineer
25. 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.
Qandil Tariq | Software Engineer
26. Design Principles
Touch Feedback
•Benefits of feedback:
Communication
When your objects react to more complex gestures, help users
understand what the outcome will be.
Qandil Tariq | Software Engineer
27. 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.
Qandil Tariq | Software Engineer
28. 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).
Qandil Tariq | Software Engineer
29. Design Principles
Metrics and Grids
48dp Rhythm
Mind the gaps
•Spacing between each UI element is 8dp.
Qandil Tariq | Software Engineer
30. 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.
Qandil Tariq | Software Engineer
31. 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.
Lala Rukh | Software Engineer
33. 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
Lala Rukh | Software Engineer
34. Design Principles
Iconography
•Action Bar
Use contractions. Pictographic, flat, not too detailed
Size for phone – 32x32 dp (MDPI)
Icons matching with theme
Lala Rukh | Software Engineer
37. 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
Lala Rukh | Software Engineer
43. 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.
Lala Rukh | Software Engineer