Mobile Development: scaling content depending on the screen resolution

The Flex framework offers a number of methods to adjust the size of the application UI depending on the device screen resolution and density. For example, you can set the applicationDPI attribute or you can use different CSS files.

In this post I will show you how you can scale or adapt the application UI at runtime using the Capabilities API. But first, why would you want to change the size of the application UI? Consider these two pictures.

Nexus One:

Samsung Galaxy Tab:

The first one is a screen capture taken on a Nexus One phone and the second is taken on a Samsung Galaxy Tab. Obviously, the Samsung Galaxy Tab has a higher screen resolution (600 X 1024) compared to the Nexus One (480 x 800). So, if you don’t make any adjustments to your UI, everything will be smaller on the bigger screen (as you can see from these pictures).

Sometimes, this is not a problem. In other situations, you might want to increase the size for some parts of your design due to aesthetic or usability reasons, or maybe both.

Using scaling to adjust the content size

When I worked on the aTabSplitter application, the first thing I did regarding the UI was to make sure that it wouldl fit nicely on a screen with a resolution of 400 x 800. By using Flex containers (VGroup, TileGroup, and HGroup) and playing with a mix of absolute and relative sizes I was able to easily create a “liquid” design. For example the keyboard is designed to take up about 320 pixels x 320 pixels. The TextArea at the top is set to fill in all the available space. Why did I choose this resolution? By looking at various Android devices I felt that this is the smallest resolution. Here is the code:

For the aTabSplitter application I wanted to increase the size of the virtual keyboard when the application runs on devices with a screen resolution higher than 480 x 800. And the simplest solution is to use the Capabilities API. When you run your application on a device, Capabilities.screenResolutionX gives you the horizontal resolution. If you want to check for the screen density, you can use Capabilities.screenDPI.

Back to the code, I set an ID to the HGroup that holds the buttons and then I registered a listener for the creationComplete event on the view. Using this listener I can check for the screen resolution and if needed I can change the size of the HGroup using its scaleX and scaleY properties. When the container scale is changed, all the contained components are scaled too. Thus everything is kept in place, nicely aligned.

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 title="HomeView" creationComplete="layoutButtons()">
<fx:Script>
<![CDATA[

private function layoutButtons():void {
  if (Capabilities.screenResolutionX == 600) {
     buttonsHolder.scaleX = buttonsHolder.scaleY = Capabilities.screenResolutionX / 450;
   }
}
]]>
</fx:Script>

[...]

<s:HGroup id="buttonsHolder" gap="5">
[...]
</s:HGroup>

And here is how the keyboard looks when I run the code on a Samsung Galaxy Tab (compare to the previous screenshot taken on the same device):

Of course, you can apply scale in the other direction – decreasing the size of a component.

Conclusions

This is a pretty simple trick yo can use to adjust your content to different screen sizes. In the next post I will show you how you can adapt the content to screen orientation changes – device held in portrait or landscape mode.

You can download the project code from here (you’ll need Flash Builder 4.5 and Flex 4.5 to run and compile the project).

Show Comments

Hide Comments

Comments are closed.