Unlike iPhones, the same company is not responsible for developing the software as well as hardware for Android devices. The result is different combinations of resolutions, screen sizes and DPIs (dots per inch i.e pixel per inch) and it becomes a real challenge to design and develop for the devices. Both iPhone 3G/s and iPhone 4 have different DPI and resolutions but their resolution and screen size follow same aspect ratio. One can create an image to make it fit the specifications of iPhone 4s and even down-scale nicely to iPhone 3G/s. But the manufacturers who make use of Android OS on their phones did not provide the users a similar kind of luxury.
As far as Android is concerned, it usually defines four main screen sizes. They are small (3 inches approx), normal (4 inches approx), large (exceeding 4 inches) and extra large (exceeding 7 inches). Most Android phones are categorised as small or normal (about 3 to 4 inches diagonally). Small tablet such as Samsung Galaxy Tab is categorised as large (size exceeding 4 inches) while extra large implies in case of extra large it implies large devices like large tablets. Screen size has the biggest impact on the app layouts while screen density seems to have an impact on the graphic resources and image.
Tips for Developers to Deal with These Challenges
A simple approach to handle the multiple screen sizes in Android devices is designing the user interfaces in a way that they scale automatically for screen size, without a resource or size-specific code. It implies that everything that is used in the user interface can be scaled gracefully by Android. Let us check out a few more tips that will help the developers in achieving an ‘all in one’ solution:
- A simple rule is to use fill_ parent and wrap_content values for android: layout height and android: layout width. These do not really specify the specific sizes but adapt to space available rather. In order to specify the rules easily, the richest environment is making use of Relative Layout. Though it is a bit complicated on surface, Relative Layout does a good job in letting the developers control their layout while adapting to different screen sizes. For an instance, the developer can use anchor widgets to right side or bottom of screen instead of thinking that the widgets can automatically wind up as a courtesy of any other layout. The distances should be controlled between ‘connected’ widgets ( e.g any label for any field must be to left of that field) without the need of relying on margins or padding.
- Classic bitmaps such as JPG, PNG and GIF are not scalable intrinsically. If the developer is not running the bitmaps in compatibility mode, Android will not make an attempt to scale the bitmaps based on screen size and resolution. Thus the size of bitmap being used remains the same, no matter if it makes the image too small or too large on few screens. One of the ways to address this issue is trying to avoid the static bitmaps by making use of nine-patch bitmaps as well as XML-defined drawables as an alternative. A nine-patch bitmap refers to a PNG file encoded specially to have certain rules that will further indicate how an image can be stretched for occupying more space.
- Android scales nine-patch drawables(.9.png files) and bitmap drawables (.png , .gif files and .jpg files) so that they can make out the appropriate physical size on every device. For an instance, if bitmap drawables is provided by your application for baseline or medium screen density(mdpi) then it is automatically scaled up or down by the system depending on high-density screen or low-density screen. The scaling can result in artifacts in bitmaps. In order to ensure that the bitmaps look the best, alternative versions at different resolutions should be included for different screen densities. The configuration qualifiers that can be used for density-specific resources are mdpi(medium), ldpi(low), xhdpi(extra high) and hdpi(high).
- In order to fit the present device screen, Android resizes the application layout. In majority of the cases, this works very fine. In the rest of the cases, the UI may not look that good and even require adjustments with respect to different screen sizes. Take for example, in case of a larger screen; you may want to adjust the position as well as element size for taking advantage of an additional screen space. Whereas if you have a small screen, you might want to adjust sizes for fitting everything on the screen. For providing size-specific resources, one can configuration qualifiers like small, large, normal and x large. For an instance, layouts required for an extra large screen will require x-large layout.