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


• 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


• Mobile developers

• Designer for graphics assets for Android devices

• Designer for graphics assets for Android apps

• Beginning developers for Android apps


Android devices


• 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


Android devices


• Screen sizeScreen

densityOrientationResolutionDensity-independent

pixel (dp):


Dimensions


❑ 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


Density independence





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




Screen snapshot on a hdpi device

Resolution is well-managed by Android, but density

might blur graphics assets


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


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


Screen Sizes



Solutions


• User Alternative Layouts and ImagesCreate

Bitmap/Gradient via XMLUser 9-patch ImagesUser

Styles/Dimension for Layouts


Providing Alternative Resources


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.




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

http://developer.android.com/guide/topics/graphics/animation.html

http://developer.android.com/guide/topics/graphics/view-animation.html

http://developer.android.com/guide/topics/resources/color-list-resource.html

http://developer.android.com/guide/topics/resources/layout-resource.html

http://developer.android.com/guide/topics/resources/more-resources.html






http://developer.android.com/guide/topics/resources/string-resource.html



http://developer.android.com/guide/topics/resources/style-resource.html

http://developer.android.com/reference/android/content/res/Resources.html




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


Range of Screen Supported cont.



Range of Screen Supported cont


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

android:src="@drawable/single_tile"

android:tileMode="repeat" />

http://schemas.android.com/apk/res/android


NicePatch Images


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.


Free Android Tool: SDK/tools/draw9patch



Styles , Dimension for Layouts


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

http://developer.android.com/reference/android/view/View.html




• <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>




• <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>


New Android Design site - reference


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

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

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


Android Asset Studio can save your time


http://j.mp/androidassetstudio

http://j.mp/androidassetstudio


Pencil with Android Stencils - UI prototyping Tool


http://pencil.evolus.vn

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

http://pencil.evolus.vn/







Range of Screen Supported cont



Technical details and references


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

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

ts android supporting multiple screen

Documents

multiple screens

pxarsalan anwar android

xml android devices

dplarge screens

dpnormal screens

dpsmall screens

android devices designer

time range of screens