Design guidelines for android developers

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

Boutique product development companyIt 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 PrinciplesDesign Guidelines for Android Developers

Agenda

StyleDevices 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

Design PrinciplesDevices and Displays

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



Problem: How to handle multiple devices



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 PrinciplesSupporting Multiple Screens

Terms and conceptsScreen 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



Terms and conceptsScreen 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



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.



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



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



Relation between screen size and dpi.



Screen Sizes and Densities in market



Be flexible Stretch and compress your layouts

Optimize layout Create compound views that combine multiple views



Assets for all Provide resources for different screen densities (DPI) to ensure that your app looks great on any device.

Almost every application should provide alternative resources to support specific device configurations.



Alternative layouts Provide alternative layouts for some of the different screen sizes

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/



What is the strategy

One approach is to work in the base standard (normal size and MDPI) and scale it up or down for the other buckets

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.



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 PrinciplesMulti-pane layouts

Combining Multiple Views Into OneOn 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 PrinciplesMulti-pane layouts

Compound Views and Orientation ChangesScreens 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 PrinciplesThemes 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 PrinciplesThemes and styles

Android gmail theme:


Design PrinciplesThemes 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.

AThemeis a style applied to an entireor application, rather than an individual

Styles support inheritance.


Design PrinciplesThemes 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 PrinciplesTouch 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.



Benefits of feedback:

Communication

When your objects react to more complex gestures, help users understand what the outcome will be.



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 PrinciplesMetrics and Grids

48dp Rhythm

Touchable UI components are generally laid out along 48dp units.

On average, 48dp translate to a physical size of about 9mm (with some variability).



48dp Rhythm Mind the gapsSpacing between each UI element is 8dp.



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 PrinciplesIconography

Icons can convey intended message better than text

Design icons for every density range

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


Launcher

Should be descriptive, explanatory about your app

On Mobile Device 48x48 dp (MDPI)

Google Play Store tile size 512x512dp



Action Bar

One of the most important design elements for Android app

Provides quick access to more frequent actions

Supports consistent navigation and view switching withins app

A dedicated space to give your app an identity

General structure:

App Icon

View Control

Action Buttons

Action Overflow



Action Bar

Use contractions. Pictographic, flat, not too detailed

Size for phone 32x32 dp (MDPI)

Icons matching with theme



Small Contextual Icons

Neutral, flat, simple

Use neutral colors

Size 16X16 dp (MDPI)



Notification Icons

Flat and simple

Must be entirely white

Pictographic

Size 24x24 dp (MDPI)



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 PrinciplesYour Branding

Color

Use color for branding

High contrast color for emphasis



Logo

Using your logo for branding



Icons

Use personalized icons if your brand have them already


Design PrinciplesWriting StyleKeep it brief

Put the most important thing first


Design PrinciplesWriting StyleBe friendly

Focus on user's concern, not technical details


Design PrinciplesWriting StyleDescribe 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 PrinciplesWriting StyleWords to avoid


Design Principles9-patch Images

name.9.png

1 pixel wide guides

Scale up


Design PrinciplesAndroid Asset Studio

Launcher Icons

Action Bar and Tab Icons

Notification Icons

Generic icons

Android Action Bar Style Generator

Android Holo Color Generator


Design PrinciplesQuestions

Qandil Tariq & Lala Rukh

Design PrinciplesThank You


Design PrinciplesReferences


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

Technology

Design guidelines for android developers