1. Definitions
- resolution = number of pixels available in the display, scale-independent pixel = sp
- density = how many pixels appear within a constant area of the display, dots per inch = dpi
- size = amount of physical space available for displaying an interface, screen's diagonal, inch
- density-independent pixel = virtual pixel that is independent of the screen density, dp
2. Density Classes
| Class | Name | Density | Factor | Drawable Folder | Comment |
|---|---|---|---|---|---|
| ldpi | low density | 120 dpi | sp = 3/4 * dp | drawable-ldpi | |
| mdpi | medium density | 160 dpi | sp = dp | drawable-mdpi OR drawable | baseline size, example: 320x480 (sp or dp) |
| hdpi | high density | 240 dpi | sp = 1.5 x dp | drawable-hdpi | example: 480x800 sp = 320x533 dp |
| xhdpi | extra high density | 320 dpi | sp = 2 x dp | drawable-xhdpi | |
| xxhdpi | extra extra high density | 480 dpi | sp = 3 x dp | drawable-xxhdpi |
3. Icon Sizes (full / content)
| Density | Launcher | Menu | Action Bar | Status Bar and Notification | Tab | Pop-up Dialog and List View | Small and Contextual |
|---|---|---|---|---|---|---|---|
| ldpi | 36x36 px | 36x36 / 24x24 px | 24x24 / 18x18 px | 18x18 / 16x16 px | 24x24 / 22x22 px | 24x24 px | 12x12 / 9x9 px |
| mdpi | 48x48 px | 48x48 / 32x32 px | 32x32 / 24x24 px | 24x24 / 22x22 px | 32x32 / 28x28 px | 32x32 px | 16x16 / 12x12 px |
| hdpi | 72x72 px | 72x72 / 48x48 px | 48x48 / 36x36 px | 36x36 / 33x33 px | 48x48 / 42x42 px | 48x48 px | 24x24 / 18x18 px |
| xhdpi | 96x96 px | 96x96 / 64x64 px | 64x64 / 48x48 px | 48x48 / 44x44 px | 64x64 / 56x56 px | 64x64 px | 32x32 / 24x24 px |
| xxhdpi | 144x144 px | (1) | (1) | (1) | (1) | (1) | (1) |
- (1) Google documentation says: "Applications should not generally worry about this density; relying on XHIGH graphics being scaled up to it should be sufficient for almost all cases."
- Launcher icons for Android Market: 512x512 px.
4. Screen Size Classes
| Class | Size in dp | Layout Folder | Examples | Comment |
|---|---|---|---|---|
| small | 426x320 dp | layout-small | typical phone screen (240x320 ldpi, 320x480 mdpi, etc.) | |
| normal | 470x320 dp | layout-normal OR layout | typical phone screen (480x800 hdpi) | baseline size |
| large | 640x480 dp | layout-large | tweener tablet like the Streak (480x800 mdpi), 7" tablet (600x1024 mdpi) | |
| xlarge | 960x720 dp | layout-xlarge | 10" tablet (720x1280 mdpi, 800x1280 mdpi, etc.) |
- valid for Android 3.1 and older
- for Android 3.2 and newer see: Declaring Tablet Layouts for Android 3.2
5. Example Screen Configurations
| Screen Size | Low density (120), ldpi | Medium density (160), mdpi | High density (240), hdpi | Extra high density (320), xhdpi |
|---|---|---|---|---|
| small | QVGA (240x320) | 480x640 | ||
| normal | WQVGA400 (240x400) WQVGA432 (240x432) | HVGA (320x480) | WVGA800 (480x800) WVGA854 (480x854) 600x1024 | 640x960 |
| large | WVGA800 (480x800)(2) WVGA854 (480x854)(2) | WVGA800 (480x800)(1) WVGA854 (480x854)(1) 600x1024 | ||
| xlarge | 1024x600 | WXGA (1280x800)(3) 1024x768 1280x768 | 1536x1152 1920x1152 1920x1200 | 2048x1536 2560x1536 2560x1600 |
- (1) To emulate this configuration, specify a custom density of 160 when creating an Android Virtual Device that uses a WVGA800 or WVGA854 skin.
- (2) To emulate this configuration, specify a custom density of 120 when creating an Android Virtual Device that uses a WVGA800 or WVGA854 skin.
- (3) This skin is available with the Android 3.0 platform.
6. Screen Orientation
| Orientation | Name | Layout Folder, Example |
|---|---|---|
| port | portrait | layout-port-large |
| land | landscape | layout-land-normal OR layout-land |
7. Best Practices
- Use wrap_content, match_parent, or dp units when specifying dimensions in an XML layout file.
- except for defining text sizes: sp (scaling depends on user setting)
- Note: fill_parent is deprecated since API level 8.
- Do not use hard coded pixel values in your application code.
- Do not use AbsoluteLayout.
- deprecated since Android 1.5
- alternative: RelativeLayout
- Supply alternative bitmap drawables for different screen densities.
- Provide a launcher icon for xxhdpi, but no other icons.
8. References
- New Tools For Managing Screen Sizes, Android Developers Blog
- Supporting Multiple Screens, Android Developers Guide
- Declaring Tablet Layouts for Android 3.2, Android Developers Guide
- Providing Alternative Resources, Android Developers Guide
- How Android Finds the Best-matching Resource, Android Developers Guide
- Android Design
- Iconography, Android Design
- Designing for Multiple Screens, Android Developers Training
- Platform Versions, Android Developers Device Dashboard
- Nick Butcher: Nexus 10 launcher icons
mdpi is the reference density -- that is, 1 px on an mdpi display is equal to 1 dip. The ratio for asset scaling is:
ReplyDeleteldpi | mdpi | tvdpi | hdpi | xhdpi | xxhdpi | xxxhdpi
0.75 | 1 | 1.33 | 1.5 | 2 | 3 | 4
Although you don't really need to worry about tvdpi unless you're developing specifically for Google TV or the original Nexus 7 -- but even Google recommends simply using hdpi assets. You probably don't need to worry about xxhdpi either (although it never hurts, and at least the launcher icon should be provided at xxhdpi), and xxxhdpi is just a constant in the source code right now (no devices use it, nor do I expect any to for a while, if ever), so it's safe to ignore as well.
What this means is if you're doing a 48dip image and plan to support up to xhdpi resolution, you should start with a 96px image (144px if you want native assets for xxhdpi) and make the following images for the densities:
ldpi | mdpi | tvdpi | hdpi | xhdpi | xxhdpi | xxxhdpi
36 x 36 | 48 x 48 | 64 x 64 | 72 x 72 | 96 x 96 | 144 x 144 | 192 x 192
And these should display at roughly the same size on any device, provided you've placed these in density-specific folders (e.g. drawable-xhdpi, drawable-hdpi, etc.)
For reference, the pixel densities for these are:
ldpi | mdpi | tvdpi | hdpi | xhdpi | xxhdpi | xxxhdpi
120 | 160 | 213 | 240 | 320 | 480 | 640