ts android supporting multiple screen

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

Supporting Multiple Screens on Android

Arsalan Anwar | Android Mentor

Supporting Multiple Screens on Android Topics covered in the presentation

• Target Audience

• Android Devices

• Dimensions

• Density Independence

• Screen size

• Solutions

• Providing alternative resources

• Range of screens supported

Arsalan Anwar | Android Mentor

• Create Bitmaps, Gradient via XML

• Nine Patch Images

• Free Android Tool SDK/Tools/Draw9 Patch

• Styles, Dimensions, and Layouts

• Android assets studio can save your time

• Pencil with Android stencils

• Technical details and references

Supporting multiple screens on Android

Target Audience

Arsalan Anwar | Android Mentor

• Mobile developers

• Designer for graphics assets for Android devices

• Designer for graphics assets for Android apps

• Beginning developers for Android apps

Supporting multiple screens on Android

Android devices

Arsalan Anwar | Android Mentor

• Android OS is available in 3997 distinct Android

phonesEach Device has different then other by

colors , style. OS , Screen Size , Screen

ResolutionAndroid has set Screen Sizes standards

Supporting multiple screens on Android

Android devices

Arsalan Anwar | Android Mentor

• Screen sizeScreen

densityOrientationResolutionDensity-independent

pixel (dp):

Supporting multiple screens on Android

Dimensions

Arsalan Anwar | Android Mentor

❑ px Screen pixels

❑ in Physical inches

❑ pt Physical points

❑ mm Physical millimeters

❑ dp Density-independent pixels relative to a 160-dpi screen

❑ sp Scale-independent pixels

Supporting multiple screens on Android

Density independence

Arsalan Anwar | Android Mentor

Supporting multiple screens on Android

Density independence

Arsalan Anwar | Android Mentor

Resolution is well-managed by Android, but density

might blur graphics assets

ldpi = 120 36 x 36 px

mdpi = 160 48 x 48 px

hdpi = 240 72 x 72 px

xhdpi = 320 96 x 96 px

Supporting multiple screens on Android

Density independence

Arsalan Anwar | Android Mentor

Screen snapshot on a hdpi device

Resolution is well-managed by Android, but density

might blur graphics assets

Supporting multiple screens on Android

Density-independent pixel (dp) - new virtual unit for conceptual design

Arsalan Anwar | Android Mentor

dp

xlarge screens > 960 dp x 720 dp

large screens > 640 dp x 480 dp

normal screens > 470 dp x 320 dp

small screens > 426 dp x 320 dp

Supporting multiple screens on Android

Screen Sizes

Arsalan Anwar | Android Mentor

Supporting multiple screens on Android

Solutions

Arsalan Anwar | Android Mentor

• User Alternative Layouts and ImagesCreate

Bitmap/Gradient via XMLUser 9-patch ImagesUser

Styles/Dimension for Layouts

Supporting multiple screens on Android

Providing Alternative Resources

Arsalan Anwar | Android Mentor

Almost every application should provide alternative

resources to support specific device configurations.

For instance, you should include alternative drawable

resources for different screen densities and alternative

string resources for different languages. At runtime,

Android detects the current device configuration and

loads the appropriate resources for your application.

Supporting multiple screens on Android

Providing Alternative Resources

Arsalan Anwar | Android Mentor

Directory Resource Type

animator/ XML files that define property animations.

anim/ XML files that define tween animations.

color/ XML files that define a state list of colors. See Color State List Resource

drawable/ Bitmap files (.png, .9.png, .jpg, .gif) or XML files that are compiled into the following drawable

resource subtypes: Bitmap files, Nine-Patches (re-sizable bitmaps), State lists, Shapes,

Animation , drawables ,Other drawables

layout/ XML files that define a user interface layout. See Layout Resource.

menu/ XML files that define application menus, such as an Options Menu, Context Menu etc

raw/ Arbitrary files to save in their raw form.

values/ XML files that contain simple values, such as strings, integers, and colors.

arrays.xml for resource arrays (typed arrays).

colors.xml for color values

dimens.xml for dimension values.

strings.xml for string values.

styles.xml for styles.

See String Resources, Style Resource, and More Resource Types.

xml/ Arbitrary XML files that can be read at runtime by calling Resources.getXML().

Supporting multiple screens on Android

Providing Alternative Resources

Arsalan Anwar | Android Mentor

Supporting multiple screens on Android

Providing Alternative Resources

Arsalan Anwar | Android Mentor

Configuration Qualifier Values

Language and region Examples: en, fr ,en-rUS, fr-rFR,fr-rCA, etc.

smallestWidth sw<N>dp Examples: sw320dp, sw600dp, sw720dp,etc.

Available width w<N>dp Examples: w720dp,w1024dp,etc.

Available height h<N>dp Examples: h720dp,h1024dp,etc.

Screen size Small,normal,large, xlarge

Screen aspect Long, notlong

Screen orientation Port,land

Dock mode Car, desk

Night mode Night, notnight

Screen pixel density (dpi) Ldpi,mdpi,hdpi,xhdpi,nodpi,tvdpi

Touchscreen type Notouch,stylus,finger

Keyboard availability Keysexposed,keyshidden,keyssoft

Supporting multiple screens on Android

Range of Screen Supported cont.

Arsalan Anwar | Android Mentor

Supporting multiple screens on Android

Range of Screen Supported cont

Arsalan Anwar | Android Mentor

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"

android:src="@drawable/single_tile"

android:tileMode="repeat" />

Supporting multiple screens on Android

NicePatch Images

Arsalan Anwar | Android Mentor

A NinePatchDrawable graphic is a stretchable bitmap image, which

Android will automatically resize to accommodate the contents of the

View in which you have placed it as the background. An example use of

a NinePatch is the backgrounds used by standard Android buttons —

buttons must stretch to accommodate strings of various lengths. A

NinePatch drawable is a standard PNG image that includes an extra 1-

pixel-wide border. It must be saved with the extension .9.png, and saved

into the res/drawable/ directory of your project.

Supporting multiple screens on Android

Free Android Tool: SDK/tools/draw9patch

Arsalan Anwar | Android Mentor

Supporting multiple screens on Android

Free Android Tool: SDK/tools/draw9patch

Arsalan Anwar | Android Mentor

Supporting multiple screens on Android

Styles , Dimension for Layouts

Arsalan Anwar | Android Mentor

• A style is a collection of properties that specify the

look and format for a View or window. A style can

specify properties such as height, padding, font

color, font size, background color, and much more.

A style is defined in an XML resource that is

separate from the XML that specifies the

layout.Styles in Android share a similar philosophy

to cascading stylesheets in web design—they allow

you to separate the design from the content.

Supporting multiple screens on Android

Styles , Dimension for Layouts

Arsalan Anwar | Android Mentor

• <TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:textColor="#00FF00"

android:typeface="monospace"

android:text="@string/hello" /><TextView

style="@style/CodeFont"

android:text="@string/hello" /><?xml version="1.0" encoding="utf-8"?>

<resources>

<style name="CodeFont"

<item name="android:layout_width">fill_parent</item>

<item name="android:layout_height">wrap_content</item>

<item name="android:textColor">#00FF00</item>

<item name="android:typeface">monospace</item>

</style>

</resources>

Supporting multiple screens on Android

Styles , Dimension for Layouts

Arsalan Anwar | Android Mentor

• <TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:textColor="#00FF00" android:textSize="14sp"

android:typeface="monospace"

android:text="@string/hello" /><TextView

style="@style/CodeFont"

android:text="@string/hello" /><?xml version="1.0" encoding="utf-8"?>

<resources>

<style name="CodeFont"

<item name="android:layout_width">fill_parent</item>

<item name="android:layout_height">wrap_content</item>

<item name="android:textColor">@dimen/text_font_size</item>

<item name="android:typeface">monospace</item>

</style>

</resources><?xml version="1.0" encoding="utf-8"?>

<resources>

<dimen name=" text_font_size">14sp</dimen>

</resources>

Supporting multiple screens on Android

New Android Design site - reference

Arsalan Anwar | Android Mentor

http://developer.android.com/design/index.html

http://developer.android.com/guide/practices/ui_guidelines/icon_design.html#templatespack

Also can download official Android icon templates pack here

Supporting multiple screens on Android

Android Asset Studio can save your time

Arsalan Anwar | Android Mentor

http://j.mp/androidassetstudio

Supporting multiple screens on Android

Pencil with Android Stencils - UI prototyping Tool

Arsalan Anwar | Android Mentor

http://pencil.evolus.vn

http://code.google.com/p/android-ui-utils/

Supporting multiple screens on Android

Range of Screen Supported cont

Arsalan Anwar | Android Mentor

Supporting multiple screens on Android

Range of Screen Supported cont

Arsalan Anwar | Android Mentor

Supporting multiple screens on Android

Technical details and references

Arsalan Anwar | Android Mentor

http://developer.android.com/guide/practices/screens_support.html