Successfully reported this slideshow.

Supporting multiple screens on android


Published on

Android devices are fragmented. This is a nice presentation to introduce how apps can support multiple screen sizes.

Published in: Technology, Design
  • Android categorizes device screens using two general properties: size and density. You should expect that your app will be installed on devices with screens that range in both size and density. As such we should include some alternative resources that optimize our app’s appearance for different screen sizes and densities 1. There are four generalized sizes: small, normal, large, xlarge. 2. And four generalized densities: low(ldpi), medium(mdpi), high(hdpi), extra high(xhdpi) To declare different layouts and bitmaps we like to use for different screens, we must place these alternative resources in separate directories, similar to how we do for different language strings. Also, be aware that the screens orientation (landscape or portrait) is considered a variation of screen. for full implementation visit here:
    Are you sure you want to  Yes  No
    Your message goes here
  • this is a great tutorial. Thanks
    Are you sure you want to  Yes  No
    Your message goes here
  • yes
    Are you sure you want to  Yes  No
    Your message goes here

Supporting multiple screens on android

  1. 1. http://MrSunLi.comSupporting MultipleScreens On Android(covers 4.0)
  2. 2. Target Audiences• Designer for graphics assets for Android devices• Designer for graphics assets for Android apps• Beginning developers for Android apps 2
  3. 3. Agenda • Challenges • Solutions • Web resources • Key takeaway • Technical details – Technical terms and concepts – Range of screens supported – Alternative graphics assets for different screen densities – Web resources 3
  4. 4. Resolution independence and densityindependence are critical challenges 4
  5. 5. Resolution is well-managed by Android, butdensity might blur graphics assets • ldpi = 120 – 36 x 36 px • mdpi = 160 – 48 x 48 px • hdpi = 240 Screen snapshot on a hdpi device – 72 x 72 px • xhdpi = 320 – 96 x 96 px 5
  6. 6. Density can be managed by Android withstandard categories, although device displaypanels are diversified Wildfire 125 dpi Xoom 149 dpi Nexus S 235 dpi Galaxy Nexus 316 dpi 6
  7. 7. Density-independent pixel (dp) is a new virtualunit for conceptual design dp 7
  8. 8. Extra graphics assets with proper programstructure can resolve density challenge Android Devices Device Dedicated Apps Public AppsWallpaper, boot-up App launcher icon, menu icon, backgroundanimation, etc. images, etc.To design graphic assets against device To assume dp/mdpi inphysical pixels as usual conceptual design To design four versions graphic assets (3:4:6:8 scaling ratio) for ldpi, mdpi, hdpi and xhdpi 8
  9. 9. New Android Design site is official reference can download official Android icon templates pack here 9
  10. 10. Android Asset Studio can saving your time 10
  11. 11. Pencil with Android Stencils is a nice UIprototyping tool 11
  12. 12. Key takeaway - public Android apps requestmore graphics assets • To assume dp/mdpi in conceptual design • To design four versions graphic assets (3:4:6:8 scaling ratio) for ldpi, mdpi, hdpi and xhdpi Case study for Angry Bird 12
  13. 13. Technical details … 13
  14. 14. Technical terms and concepts• Density-independent pixel (dp) – A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way. – The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your applications UI, to ensure proper display of your UI on screens with different densities. 14
  15. 15. Technical terms and concepts cont.• Screen size – Actual physical size, measured as the screens diagonal. For simplicity, Android groups all actual screen sizes into four generalized sizes: small, normal, large, and extra large.• Screen density – The quantity of pixels within a physical area of the screen; usually referred to as dpi (dots per inch). For simplicity, Android groups all actual screen densities into four generalized densities: low, medium, high, and extra high. ~120dpi ~160dpi ~240dpi ~320dpi 15
  16. 16. Technical terms and concepts cont.• Orientation – The orientation of the screen from the users point of view. This is either landscape or portrait, meaning that the screens aspect ratio is either wide or tall, respectively. Be aware that not only do different devices operate in different orientations by default, but the orientation can change at runtime when the user rotates the device.• Resolution – The total number of physical pixels on a screen. When adding support for multiple screens, applications do not work directly with resolution; applications should be concerned only with screen size and density, as specified by the generalized size and density groups. 16
  17. 17. Range of screens supported• xlarge screens > 960 dp x 720 dp• large screens > 640 dp x 480 dp• normal screens > 470 dp x 320 dp• small screens > 426 dp x 320 dp• Note: The system bar in Android 3 and above reduces app space 17
  18. 18. Range of screens supported cont. 18
  19. 19. Range of screens supported cont. 19
  20. 20. Alternative graphics assets for different screendensities• The configuration qualifiers you can use for density-specific resources are ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high). For example, bitmaps for high-density screens should go in drawable-hdpi/.• By default, Android scales your bitmap drawables (.png, .jpg, and .gif files) and Nine-Patch drawables (.9.png files) so that they render at the appropriate physical size on each device. For example, if your application provides bitmap drawables only for the baseline, medium screen density (mdpi), then the system scales them up when on a high-density screen, and scales them down when on a low-density screen. This scaling can cause artifacts in the bitmaps. To ensure your bitmaps look their best, you should include alternative versions at different resolutions for different screen densities. 20
  21. 21. Alternative graphics assets for different screendensities cont.• To create alternative bitmap drawables for different densities, you should follow the 3:4:6:8 scaling ratio between the four generalized densities. For example, if you have a bitmap drawable thats 48x48 pixels for medium- density screen (the size for a launcher icon), all the different sizes should be: – 36x36 for low-density – 48x48 for medium-density – 72x72 for high-density – 96x96 for extra high-density 21
  22. 22. Nine-patch graphics assets• A NinePatchDrawable graphic is a stretchable bitmap image, which Android will automatically resize to accommodate the contents of the View in which you have placed it as the background. An example use of a NinePatch is the backgrounds used by standard Android buttons — buttons must stretch to accommodate strings of various lengths. A NinePatch drawable is a standard PNG image that includes an extra 1-pixel-wide border. It must be saved with the extension .9.png, and saved into the res/drawable/ directory of your project. 22
  23. 23. Free Android tool: SDK/tools/draw9patch 23
  24. 24. DPI online calculator 24
  25. 25. Technical details for supporting multiple screens• ort.html 25