Generalized SIZE definition xlarge screens are at least 960dp x 720dp. large screens are at least 640dp x 480dp. normal screens are at least 470dp x 320dp. small screens are at least 426dp x 320dp. (Android does not currently support screens smaller than this.)
Some model device RES. px SIZE DPI G.DPI RES. dp G.SIZE HTC wildfire 240*320 2.8 in 140dpi ldpi 320*428dp small HTC hero 320*480 3.2 in 180dpi mdpi 320*480dp normal HTC desire 480*800 3.7 in 252dpi hdpi 320*533dp normal Dell Streak 480*800 5.0 in 186dp mdpi 480*800dp largeHTC sensation 540*960 4.3 in 256dpi hdpi 360*640dp normal Galaxy note 800*1280 5.3 in 284dpi xhdpi 400*640dp normal HTC Flyer 600*1024 7.0 in 170dpi mdpi 600*1024dp large Galaxy tab 600*1024 7.0 in 170dpi hdpi 400*682dp normal Xoom 800*1280 10.1 in 150dpi mdpi 800*1280dp xlarge
DPI G.DPI G.DPI mostly can be inferred from DPI But some G.DPI may be very different with the real dpi. Samsung galaxy tab has HDPI, but its real dpi is 170. G.DPI, xdpi, ydpi are set by manufacturers. Manufacturer will choose a G.DPI to make its UI looks the best.
SIZE G.SIZE Only SIZE is not enough to get G.SIZE. G.SIZE can be infer from the RES. in dp unit. RES.(px) + G.DPI RES.(dp) G.SIZE
Effect of G.DPI Developers do not need to care about real density. Different RES.(px). are aggregated to RES.(dp), which has a much smaller range. For example, some small/normal size device. device RES. px G.DPI RES. dp G.SIZE HTC wildfire 240*320 ldpi 320*428dp small HTC hero 320*480 mdpi 320*480dp normal HTC desire 480*800 hdpi 320*533dp normal HTC sensation 540*960 hdpi 360*640dp normal Galaxy note 800*1280 xhdpi 400*640dp normal
Density independence The Android system scales dp units and drawable res to appropriate size based on the G.DPI. For example, a Button(100*100dp) and a icon image will looks nearly the same in different devices.
Support general handset 如何支持普通手机？
Handset features Small and Normal devices take over 90%. These devices are nearly all handset.
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 720*1280px 540*960px xhdpi 480*800px hdpi320*480px hdpimdpi
Support more devices (handset & tablet) 如何支持更多的设备？
The first guideline Develop one app for all devices. There is no dividing line between handsets and tablets. Maintaining multi apps for different devices is not working well.
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 to implement. 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- design/ex/ex-site-FINAL.html Use 3 media queries to divide consistent width to 4 part. @media (max-width: 400px) @media (max-width: 600px) @media (min-width: 1300px)
Responsive mobile design Same content, same logical, but different representation. Use configuration qualifiers, especially screen size qualifiers to provide different layout for different devices.
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
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 A UI design pattern describes a general solution to a recurring question. Mature UI patterns have flexible layouts towards different devices. They are self-adaptive to multi- screen. 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
Workspace A scrollable TabView. Could combine with ActionBar.
Dashboard Acted as the landing page and holds all main functions.
Slide navigation Could replace the Dashboard. Make the navigation easier. Appearance is better in tablets.
Conclusion Density independence in android could handles most of work to adapt apps to each devices. What you should do is supporting flexible, dynamic layouts.(think like a web designer) Remember developing one app for all devices. Follow platform guideline and use more UI design patterns.
The EndThanks for watching
Contact 欢迎各种交流与切磋 @Renfei Email：firstname.lastname@example.org 期待你的加入，与布丁一起创造、成长！ Welcome to Buding Mobile（布丁移动） Contact：email@example.com