Supporting multi-screen in android cn

1. Supporting Multiple Screens in
Android
Android多屏幕适配

2. Preface
 Author：
 Ren Fei. Android developer
 Buding Mobile / Innovation Works
 Announcement：
 本slide内容全部来自互联网，以及我自己的一点臆想，如
有错误，欢迎随便指出。

3. Origin of the problem
问题的由来

4. Fragmentation
 上千种android设备。
 不同的平台版本。
 不同的屏幕尺寸、分辨率。
 不同的输入方式。

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

6. 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
 …..

7. Screen Resolution iPhone
 iPhone
 320*480
 640*960
 iPad
 1024*768
 2048*1536

8. 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
 ……

9. Screen RES. iPhone vs. Android

10. Android System Support
Android系统支持

11. What does android do ?

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

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

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

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.

16. Relationships
 RES. + SIZE  DPI
 DPI = RES. / SIZE
 DPI  G.DPI
 ?
 SIZE  G.SIZE
 ?

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

18. DPI  G.DPI
 G.DPI 大部分等于真实DPI最临近的G.DPI。
 如果DPI正好在两个G.DPI正中间怎么办？
 G.DPI可能和DPI相差很多。
 Samsung galaxy tab
 G.DPI是由手机厂商定义的。
 选择标准是使新的设备能最好的适用于现有app。

19. SIZE  G.SIZE
 SIZE 和 G.SIZE 并没有很明显的关系。
 G.SIZE是由RES.(dp) 定义的。
 参考G.SIZE的下界限定。
 RES.(px) + G.DPI  RES.(dp)  G.SIZE

20. Relationships
 RES. + SIZE  DPI
 DPI  G.DPI (mostly)
 G.DPI + RES.  G.SIZE

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.

23. Support general handset
如何支持普通手机？

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.
 …

27. A simple demo
720*1280px
540*960px xhdpi
480*800px hdpi
320*480px hdpi
mdpi

28. Support more devices
(handset & tablet)
如何支持更多的设备？

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.

36. 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…

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

40. IOSched2011
 3 fragments
 4 layouts

41. IOSched2011
 layout/ layout-land/

42. IOSched2011
 layout-xlarge-land-v11/ layout-xlarge-v11

43. IOSched2012
 4 fragments
 4 layouts

44. IOSched2012

45. IOSched2012
 layout/
 layout-land/

46. IOSched2012
 layout-large-v11/ layout-large-
land-v11/

47. Google Play
 Version: 3.4.4
 4 layouts
 generic_details.xml

48. Google Play
 layout/ layout-land/

49. Google Play
 layout-w600dp-h540dp/ layout-w800dp-
h540dp/

50. UI Design Patterns
UI设计模式

51. Android UI design patterns
 Design pattern
 对于一些普遍出现的问题的通用解决方法。
 成熟的UI patterns能在不同的设备环境下自我调节。
 Here we introduce some useful patterns.
 Action Bar
 Workspace
 Dashboard
 Slide navigation

52. Action Bar
 Replace the old TitleBar.
 Many functions:
 Menu
 Search
 Navigation
 Tab
 Spinner
 Up
 Action Mode
 Split Action Bar

53. Action Bar
 Navigation(Tab)

54. Action Bar
 Navigation(Spinner)/Split Action Bar/Action Mode

55. Action Bar

56. Workspace
 A scrollable TabView.
 Could combine with ActionBar.

57. Workspace

58. Dashboard
 Acted as the landing page and holds all main
functions.

59. Dashboard

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

61. Slide navigation

62. Conclusion
 Android系统实现的Density Independence 在多屏幕
适配中担当了很重要的角色。
 在一个app中实现灵活、动态的布局。
 think like a web designer
 遵从系统的guideline，尽可能多的使用成熟的UI
patterns.

63. The End
Thanks for watching

64. Contact
欢迎各种交流与切磋
@Renfei
Email：renfei@buding.cn
期待你的加入，与布丁一起创造、成长！
Welcome to Buding Mobile（布丁移动）
Contact：hr@buding.cn

65. 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.ph
p

66. Q&A
 Email: renfei@buding.cn

67. Other

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

69. Web demo gallery

70. Web demo gallery

71. Web demo gallery

72. Web demo gallery

73. Web demo gallery

74. Web demo gallery