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 • Create Bitmaps, Gradient via XML
• Android Devices • Nine Patch Images
• Dimensions • Free Android Tool
• Density Independence SDK/Tools/Draw9 Patch
• Screen size • Styles, Dimensions, and Layouts
• Solutions • Android assets studio can save
• Providing alternative resources your time
• Range of screens supported • 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




Resolution is well-managed by Android, but density
might blur graphics assets

Screen snapshot on a hdpi device



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

dp



Screen Sizes

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



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



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" />



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.




• <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
Also can download official Android icon templates pack here
http://developer.android.com/guide/practices/ui_guidelines/icon_design.html#templatespack



Android Asset Studio can save your time

http://j.mp/androidassetstudio



Pencil with Android Stencils - UI prototyping Tool

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



Range of Screen Supported cont



Technical details and references

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


Ts android supporting multiple screen

Recommandé

Recommandé

Contenu connexe

Similaire à Ts android supporting multiple screen

Similaire à Ts android supporting multiple screen (20)

Plus de Confiz

Plus de Confiz (20)

Ts android supporting multiple screen