December 18, 2014
Hot Topics:

Optimizing Your Android UI for Multiple Devices, Page 2

  • December 10, 2012
  • By Jessica Thornsby
  • Send Email »
  • More Articles »

Optimizing for Different Android Screen Densities

When developing your UI, you need to consider how your images will appear on screens with different pixel densities. The easiest and most effective solution is to create separate folders containing images targeting generalized screen densities. When a user boots up your app the Android system checks the device's display characteristics and automatically loads images from the correct folder.

Eclipse and the ADT plugin make creating density-specific images easy. In the second part of this tutorial, I'll demonstrate how to take advantage of the graphical layout editor's ability to generate density-specific images and allocate them to the correct folders.

To start, ensure Eclipse's graphical layout editor is open.

  1. Open the 'Images & Media' section of the palette.
  2. Drag the 'ImageView' icon onto the canvas.
  3. In the subsequent 'Resource Chooser' dialog, select 'Project Resources' followed by 'ic_launcher' and 'Create new icon.'
  4. You'll be presented with the following options:
    • Launcher Icons -- represent your application on the home screen.
    • Menu Icons -- represent your application when the user selects 'Menu.'
    • Action Bar Icons -- represent individual items in the Action Bar.
    • Tab Icons -- if you have a multi-tab UI, these icons represent the individual tabs.
    • Notification Icons -- alert the user to a new notification
  5. Ensure the 'Launcher icon' checkbox is ticked and do not alter the default icon name (ic_launcher). Click 'Next.'


    Android UI Design
    Click here for larger image

  6. In the 'Configure Icon Set' dialog, select 'Image.'
  7. Select 'Browse' and locate the image file on your hard drive.
  8. At this point, you can opt to change the background or foreground colors, or select different shapes for your icon ('none,' 'square' and 'circle.') In this example, we'll leave the colors alone but select the 'Circle' option.
  9. Pay special attention to the four versions of your launcher icon on the right-hand side of the screen. These icons are your image optimized for the different screen densities:

    • Low density screen icon (ldpi) Icons are 36 x 36 px
    • Medium density screen icon (mdpi) Icons are 48 x 48 px
    • High density screen icon (hdpi) Icons are 72 x 72 px
    • Extra high density screen icon (xdpi) Icons are 96 x 96 px


    Android UI Design
    Click here for larger image

  10. Click 'Finish' and Eclipse will automatically generate all four versions of your launcher icon.
  11. Confirm that you want to replace the existing ic_launcher files.
  12. Eclipse will return to the Resource Chooser screen. Click 'Cancel.'

    Tip. If your new icon doesn't appear automatically in the graphical layout editor, try selecting 'Save All' to update the graphical layout editor's output.

  13. Open the res folder in Eclipse's project explorer. The new ic_launcher.png items should have been added to the four drawable folders (-hpdi, -ldpi, -mdpi and -xhdpi).

    Android UI Design

  14. Boot up the Android Emulator, to see how your new icon appears on an Android device.


    Android UI Design
    Click here for larger image

Conclusion

In this tutorial, we began to explore the core concepts of designing a UI that's optimized for a range of devices. As a bare minimum, you should always:

  • Test your app displays correctly in landscape and portrait modes
  • Create a landscape-land layout if necessary
  • Ensure alternate versions of your images are available for different screen densities

However, this is just scratching the surface of optimizing for different devices. If you want to learn more about this topic, you should read the Supporting Multiple Screens section of the official Android docs.


Tags: UI, Android App development

Originally published on http://www.developer.com.

Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel