Optimizing Your Android UI for Multiple Devices, Page 2
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.
- Open the 'Images & Media' section of the palette.
- Drag the 'ImageView' icon onto the canvas.
- In the subsequent 'Resource Chooser' dialog, select 'Project Resources' followed by 'ic_launcher' and 'Create new icon.'
- 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
Ensure the 'Launcher icon' checkbox is ticked and do not alter the default icon name (
ic_launcher). Click 'Next.'
- In the 'Configure Icon Set' dialog, select 'Image.'
- Select 'Browse' and locate the image file on your hard drive.
- 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.
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
- Click 'Finish' and Eclipse will automatically generate all four versions of your launcher icon.
- Confirm that you want to replace the existing ic_launcher files.
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.
resfolder in Eclipse's project explorer. The new ic_launcher.png items should have been added to the four
Boot up the Android Emulator, to see how your new icon appears on an Android device.
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.
Page 2 of 2