Automatically Scaling Android Apps For Multiple Screens Aaron Sher, Vanteon Corporation The Problem As every Android developer is painfully aware, there are a very large number of Android devices with a very wide range of screen characteristics. Take a look at this table (excerpted from [1] with additional data added): Acer beTouch E110 2.8 in ches 240x320 143 ppi LG GW620 Eve 3.0 inches 320x480 192 ppi HTC Aria 3.2 inches 320x480 180 ppi HTC myTouch 3G Slide 3.4 inches 320x480 170 ppi Acer Liquid mt 3.6 inches 800x480 259 ppi Motorola Atrix 4G 4.0 inches 540x960 275 ppi Sony Ericsson Xperia Arc 4.2 inches 480x854 233 ppi Samsung Galaxy Nexus 4.65 inches 720x1280 316 ppi Dell Streak 5 inches 800x480 187 ppi Coby Kyros 7 inches 800x480 133 ppi Samsung Galaxy Tab 7 inches 1024x600 170 ppi Samsung Galaxy Tab 10.1 10.1 inches 1280x800 149 ppi There is a 134% variation in aspect ratio, 360% variation in screen size, 240% variation in pixel density, and over 1300% variation in total number of pixels. Obviously, Android applications intended for mass distribution need to be carefully designed so that they will look reasonable on many different screen sizes. To make it worse, these devices run many different versions of Android. Different versions have different capabilities as far as modifying layouts to fit different screen sizes, and even when those capabilities are theoretically compatible across different versions, they don’t necessarily behave identically. Existing Android layout support works fairly well for what I call “stretch-and-scroll” layouts. These are layouts where each dimension contains dead space that can reasonably be scaled, or is formatted into a list of some type that can be scrolled. For example, the stock contacts app has this type of layout: Vanteon ♦ 250 CrossKeys Office Park, Suite 285 ♦ Fairport, NY ♦ 14450 ♦ 585.419.9555 www.vanteon.com www.vanteon.com This is the type of layout used by virtually all of Google’s stock Android apps, simply because it does work well and requires little modification to work on different devices. Unfortunately, there’s another type of layout that does not work as well. This is a “full-screen” layout, where the controls need to fill the screen in a particular organization that does not contain stretchable dead space and cannot easily be scrolled. A simple example of this type of layout is a vanilla calculator app: • 320x480, portrait Automatically Scaling Android Apps for Multiple Screens page 2 www.vanteon.com In order to scale this to a much different screen size effectively, the buttons must be resized without affecting their layout or aspect ratio, and ideally the text within the buttons should be resized to maintain the overall look of the layout. Full-screen layouts are very poorly supported on Android across multiple devices with widely varying screen characteristics. For example, here is the calculator app running on several different screens: • 320x240, portrait • 1280x800, landscape Automatically Scaling Android Apps for Multiple Screens page 3 www.vanteon.com • 854x480, landscape This white paper will present a solution that allows such layouts to be defined in a simple, consistent, and easily maintainable fashion, while still allowing full control over the scaling behavior on different screens. Existing solutions There are three main approaches in the Android SDK (see [2] ) to making your layout scale properly: • Use resolution-independent units in your layout XML files • Use layout managers to declare your layout without reference to absolute screen positions • Provide different layouts for different screen sizes using multiple resource folders In addition, there is a fourth option that is often ignored: • Write custom code to lay out your user interface to fill the screen We will examine each of these approaches in turn and look at its shortcomings. Resolution-Independent Units The first approach is the simplest. Instead of declaring sizes in pixels (“px”), use device-independent pixels (“dp”) and scale-independent pixels (“sp”). When Android loads your layout, it applies a scaling factor to these units so that 1 dp = 1/160 in, so you are effectively declaring your sizes in physical units. In theory, a control declared to be 160 dp x 160 dp will be one inch square on any screen. Scale- Automatically Scaling Android Apps for Multiple Screens page 4 www.vanteon.com independent pixels (“sp”) are identical, except that an additional scaling factor might or might not be applied based on the user’s font size preference. Unfortunately, this entirely fails to solve the full-screen layout problem; in some ways, it actually makes it worse. Without knowing beforehand the physical dimensions of the screen, there is no way to declare sizes in physical units that will fill the screen effectively. Your choice is between a constant physical size or a constant pixel size, neither of which will adapt based on the screen characteristics of the device. To make this worse, the scaling factor applied by different devices is not always correct to cause 160 dp to equal 1 inch. Some devices (notably the original 7-inch Samsung Galaxy Tab; see [3] ) modify this scaling factor dramatically in order to make UI elements larger and easier to use; some devices make more subtle changes. This means that when you declare your controls using device-independent pixels, you can be sure of neither their final size in pixels nor their final size in inches. Layout Managers Virtually any non-trivial Android app must use layout managers to control the behavior of its user interface. Layout managers are what make stretch-and-scroll interfaces work so well, and within a small range of screen sizes it is possible to use them to make full-screen interfaces scale reasonably well. However, in more complex situations, they break down. The only stock layout manager that is fully-featured enough to make scalable full-screen layouts possible is LinearLayout. LinearLayout allows you to lay out controls in a line, either vertical or horizontal. This is great for stretch-and-scroll layouts, since you can simply add all your controls into the layout and let it scroll if it’s too long. For full-screen layouts, there is an additional feature that is extremely useful: you can declare weights for the controls in the layout and size them relative to each other. With care, this allows you to size your controls as percentages of the size of the layout, which is the only feature in the stock layout managers that can truly be used to implement full-screen layouts. This is the approach taken in the calculator app examples shown above. As you can see, it does a reasonable job at maintaining the overall layout, and it at least fills the screen. However, this has a few shortcomings that make it impractical. First, it does not scale the text size. As in the examples above, this means that on a large screen your text will be disproportionately small; conversely, on a small screen, it might not fit at all. Second, implementing a non-trivial layout using weighted LinearLayouts requires extremely complex nested layout hierarchies. Just to set up the simple calculator example requires the following hierarchy (most properties not relevant to the layout elided): <LinearLayout android:orientation ="vertical" > Automatically Scaling Android Apps for Multiple Screens page 5 www.vanteon.com <EditText android:layout_weight ="0.69" /> <!-- Vertical spacer --> <FrameLayout android:layout_weight ="0.32" /> <LinearLayout android:layout_weight ="0.75" > <!-- Horizontal spacer --> <FrameLayout android:layout_weight ="3" /> <Button android:layout_weight ="1" android:text ="CLEAR" /> </LinearLayout > <LinearLayout android:layout_weight ="0.75" > <Button android:layout_weight ="1" android:text ="7" /> <Button android:layout_weight ="1" android:text ="8" /> <Button android:layout_weight ="1" android:text ="9" /> <Button android:layout_weight ="1" android:text ="÷" /> </ LinearLayout > <LinearLayout android:layout_weight ="0.75" > <Button android:layout_weight ="1" android:text ="4" /> <Button android:layout_weight ="1" android:text ="5" /> <Button android:layout_weight ="1" android:text ="6" /> <Button android:layout_weight ="1" android:text ="X" /> </ LinearLayout > <LinearLayout android:layout_weight ="0.75" > <Button android:layout_weight ="1" android:text ="1" /> <Button android:layout_weight ="1" android:text ="2" /> <Button android:layout_weight ="1" android:text ="3" /> <Button android:layout_weight ="1" android:text ="-" /> </ LinearLayout > <LinearLayout android:layout_weight ="0.75" > <Button android:layout_weight ="1" android:text ="." /> <Button android:layout_weight ="1" android:text ="0" /> <Button android:layout_weight ="1" android:text ="=" /> <Button android:layout_weight ="1" android:text ="+" /> </ LinearLayout > Automatically Scaling Android Apps for Multiple Screens page 6 www.vanteon.com </ LinearLayout > Third, this approach does not maintain the aspect ratio of the interface if the device’s aspect ratio changes significantly; compare the 320x480 portrait example above with the following (which has exactly the same density and number of pixels, and changes only the aspect ratio): • 320x480, landscape Multiple Resource Folders This is the official Android solution for supporting a wide variety of screen sizes. You can create multiple resource folders with names like res/layout-xlarge-port and include different versions of your layout in each folder. The correct one will automatically be selected based on the characteristics of the device, and the appropriate layout loaded. In Android 3.2 or later, you can even use what are called “numeric selectors” – folder names like res/layout-sw600dp-port (the “sw” stands for “smallest width”). This gives you a great deal of control over exactly what layout gets loaded on each device, at least in theory. There are several problems with this as a general purpose solution to the problem. The first is the sheer number of devices that need to be supported. Even if you could precisely map each device to a resource folder (which you often can’t – see below), you would still need at least six or so different resource folders just to handle differences in screen resolution.