supporting multi screen in android cn

Supporting Multiple Screens in Android

Android 多屏幕适配

Preface Author ：

Ren Fei. Android developer Buding Mobile / Innovation Works

Announcement ：本 slide 内容全部来自互联网，以及我自己的一点臆想，

如有错误，欢迎随便指出。

Origin of the problem

问题的由来

Fragmentation 上千种 android 设备。

不同的平台版本。不同的屏幕尺寸、分辨率。不同的输入方式。

Platform version From v1.5 to v4.1. 8 main version. 14 sub version.

Screen sizes 2.6" HTC G16 3.2" 3.7" HTC G5/G7 4.0" 4.3" Samsung i9000/9100 7.0" 7.7" 8.9" Samsung Galaxy Tab 10.1" Moto Xoom …..

Screen Resolution iPhone iPhone

320*480 640*960

iPad 1024*768 2048*1536

Screen Resolution Android QVGA 240*320 WQVGA 240*400 HVGA 320*480 WVGA 480*800 FWVGA 480*854 SVGA 600*800 DVGA 960*640 WSVGA 1024*600 WXGA 1280*768 qHD 540*960 HD 1280*720 ……

Screen RES. iPhone vs. Android

Android System Support

Android 系统支持

What does android do ?

Some definition Screen resolution

480*800 Screen size

3.7" Screen density

252dpi

DPI(dots per inch), xdpi, ydpi DPI= RES. / SIZE

DIP (Density-independent pixel) px = dp * (dpi / 160)

Generalized SIZE/DPI G.DPI: hdpi/mdpi/ldpi/xhdpi G.SIZE: small/normal/large/xlarge

Generalized DPI definition

G.DPI DPI 1 DP = ? px

ldpi (Low density) 120 dpi 0.75

mdpi (Medium density)

160 dpi 1

hdpi (High density) 240 dpi 1.5

xhdpi(Extra-high density)

320 dpi 2

Generalized SIZE definition

Android does not currently support screens smaller than small screens.

G.SIZE Qualifier(at least)

xlarge 960dp x 720dp

large 640dp x 480dp

normal 470dp x 320dp

small 426dp x 320dp

RelationshipsRES. + SIZE DPI

DPI = RES. / SIZE

DPI G.DPI ?

SIZE G.SIZE ?

Some model

device SIZE G.SIZE DPI G.DPI RES. px RES. dp

HTC wildfire 2.8 in small 140dpi ldpi 240*320 320*428dp

HTC hero 3.2 in normal 180dpi mdpi 320*480 320*480dp

HTC desire 3.7 in normal 252dpi hdpi 480*800 320*533dp

Dell Streak 5.0 in large 186dp mdpi 480*800 480*800dp

HTC sensation 4.3 in normal 256dpi hdpi 540*960 360*640dp

Galaxy note 5.3 in normal 280dpi xhdpi 800*1280 400*640dp

HTC Flyer 7.0 in large 170dpi mdpi 600*1024 600*1024dp

Galaxy tab 7.0 in normal 170dpi hdpi 600*1024 400*682dp

Xoom 10.1 in xlarge 150dpi mdpi 800*1280 800*1280dp

DPI G.DPI G.DPI 大部分等于真实 DPI 最临近的 G.DPI 。

如果 DPI 正好在两个 G.DPI 正中间怎么办？

G.DPI 可能和 DPI 相差很多。 Samsung galaxy tab

G.DPI 是由手机厂商定义的。选择标准是使新的设备能最好的适用于现有 app 。

SIZE G.SIZE SIZE 和 G.SIZE 并没有很明显的关系。

G.SIZE 是由 RES.(dp) 定义的。参考 G.SIZE 的下界限定。

RES.(px) + G.DPI RES.(dp) G.SIZE

Relationships RES. + SIZE DPI

DPI G.DPI (mostly)

G.DPI + RES. G.SIZE

Effect of G.DPI Developers do not need to care about real

density.

RES.(px). are aggregated to RES.(dp). RES.(dp) has a much smaller range.

device G.SIZE G.DPI RES. px RES. dp

HTC wildfire small ldpi 240*320 320*428dp

HTC hero normal mdpi 320*480 320*480dp

HTC desire normal hdpi 480*800 320*533dp

HTC sensation normal hdpi 540*960 360*640dp

Galaxy note normal xhdpi 800*1280 400*640dp

Galaxy tab normal hdpi 600*1024 400*682dp

Density independence 根据 G.DPI ，系统将 dp units 和 drawables 换算调

整为适配设备的大小 (px).

A Button (100*100dp) and a icon (48px*48px in mdpi)

Go back to see first demo.

Support general handset

如何支持普通手机？

Handset features Small and Normal devices take over 90%. These devices are nearly all handsets.

Handset qualifier G.SIZE: small/normal Default Orientation: portrait RES.(dp): 426dp x 320dp - 640dp x 480dp.

How to support? Develop a scalable app.

Use wrap_content, fill_parent. Use dp not px. Use LinearLayout/RelativeLayout, not

AbsoluteLayout. Provide different drawables for different dpi. Use more 9-patch drawable. …

A simple demo

320*480px mdpi

480*800px hdpi

540*960px hdpi

720*1280px xhdpi

Support more devices(handset & tablet)

如何支持更多的设备？

The first guideline Develop one app for all devices.

Tablets 和 Handsets 没有明显的界限。为不同的设备、分辨率开发不同的 app 耗费巨大且效果不

佳。

Anti-example:

Official Guidelines Build your activity designs based on

fragments Use the action bar Implement flexible layouts

Implement flexible layouts How to implement flexible layouts in one app?

Official answer: Think like a web designer.

Responsive web design Build something that works on any possible

width or device instead of something that works on all current widths and devices. 与其为当前所有设备、大小做支持，不如去支持所有可能

出现的情况。

Use css3 media queries.

Usually combine with fluid web design.

Media queries Sample:

<link media="screen and (max-device-width: 800px)" href=“common.css" />

Media queries contain two components: A media type. (screen, print) A media feature(max-device-width) and query

value(800px).

Use media queries to filter css depend on device info.

Website demo http://www.alistapart.com/d/responsive-web-d

esign/ex/ex-site-FINAL.html 3 media queries divide width to 4 part.

@media (max-width: 400px) @media (max-width: 600px) @media (min-width: 1300px)

Web Gallery

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

Responsive mobile design Same content, same logical, but different

representation. 同样的内容，同样的逻辑，不同的展示方式。

Use configuration qualifiers to provide different layout for different devices.

Configuration qualifiers Screen Size:

small/normal/large/xlarge Density:

ldpi/mdpi/hdpi/xhdpi… Orientation:

port/land Platform version:

v3/v4/v11/v13… Language:

en/fr…

New screen size qualifiers Smallest Width

sw600dp Available Width

w600dp Available height

h600dp

Web design vs Android design CSS vs Layout

CSS pixel vs Dip Ems vs Sp CSS3 media query vs Configuration qualifiers

Fluid web design vs Scalable design Responsive web design vs Responsive mobile

design

App demos IOSched2011 IOSched2012 Google Play

IOSched2011 3 fragments 4 layouts

IOSched2011 layout/ layout-land/

IOSched2011 layout-xlarge-land-v11/ layout-

xlarge-v11

IOSched2012 4 fragments 4 layouts

IOSched2012

IOSched2012 layout/

layout-land/

IOSched2012 layout-large-v11/ layout-large-

land-v11/

Google Play Version: 3.4.4 4 layouts generic_details.xml

Google Play layout/ layout-land/

Google Play layout-w600dp-h540dp/ layout-

w800dp-h540dp/

UI Design Patterns

UI 设计模式

Android UI design patterns Design pattern

对于一些普遍出现的问题的通用解决方法。

成熟的 UI patterns 能在不同的设备环境下自我调节。

Here we introduce some useful patterns. Action Bar Workspace Dashboard Slide navigation

Action Bar Replace the old TitleBar. Many functions:

Menu Search Navigation

Tab Spinner Up

Action Mode Split Action Bar

Action Bar Navigation(Tab)

Action Bar Navigation(Spinner)/Split Action Bar/Action

Mode

Action Bar

Workspace A scrollable TabView. Could combine with ActionBar.

Workspace

Dashboard Acted as the landing page and holds all main

functions.

Dashboard

Slide navigation Could replace the Dashboard. Make the navigation easier. Appearance is better in tablets.

Slide navigation

Conclusion Android 系统实现的 Density Independence 在多

屏幕适配中担当了很重要的角色。

在一个 app 中实现灵活、动态的布局。 think like a web designer

遵从系统的 guideline ，尽可能多的使用成熟的 UI patterns.

The End

Thanks for watching

Contact

欢迎各种交流与切磋@RenfeiEmail ： [email protected]

期待你的加入，与布丁一起创造、成长！Welcome to Buding Mobile （布丁移动）Contact ： [email protected]

mailto:[email protected]


Reference http://android-developers.blogspot.com/ https://developer.android.com/ http://www.pushing-pixels.org/ http://www.androiduipatterns.com/ http://androidniceties.tumblr.com/ http://en.wikipedia.org/ http://www.alistapart.com/articles/responsive-

web-design/ http://opensignalmaps.com/reports/

fragmentation.php

Q&A Email: [email protected]


Most of small/normal devices are handsets ∵ RES.(px) = DPI * SIZE RES.(px) = RES.(dp) * G.DPI / 160 ASSUME G.DPI ≈ DPI ∴ RES.(dp) ≈ SIZE * 160

∵ normal 的上界是 640dp x 480dp 即一个 SIZE ≈ 5" (4" * 3") 的设备 ∴ normal 设备的 SIZE 大部分小于 5 in ∴ normal 设备大部分为手机设备 Finish

Web demo gallery

supporting multi screen in android cn

Technology