15. Generalized SIZE definition
G.SIZE Qualifier(at least)
xlarge 960dp x 720dp
large 640dp x 480dp
normal 470dp x 320dp
small 426dp x 320dp
Android does not currently support screens smaller
than small screens.
17. 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
21. 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
22. 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.
24. Handset features
Small and Normal devices take over 90%.
These devices are nearly all handsets.
25. Handset qualifier
G.SIZE: small/normal
Default Orientation: portrait
RES.(dp): 426dp x 320dp - 640dp x 480dp.
26. 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.
…
29. The first guideline
Develop one app for all devices.
Tablets和Handsets没有明显的界限。
为不同的设备、分辨率开发不同的app耗费巨大且效果不佳。
Anti-example:
30. Official Guidelines
Build your activity designs based on fragments
Use the action bar
Implement flexible layouts
31. Implement flexible layouts
How to implement flexible layouts in one app?
Official answer: Think like a web designer.
32. 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.
33. 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.
34. Website demo
http://www.alistapart.com/d/responsive-web-
design/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
35. Responsive mobile design
Same content, same logical, but different
representation.
同样的内容,同样的逻辑,不同的展示方式。
Use configuration qualifiers to provide different
layout for different devices.
37. New screen size qualifiers
Smallest Width
sw600dp
Available Width
w600dp
Available height
h600dp
38. 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
39. App demos
IOSched2011
IOSched2012
Google Play