UI Scalability


Hi. I’m Sameer from Samsung.
bada phones are available with a range of screen resolutions and to make sure your UI
looks it’s best on all of them, bada 2.0 makes it easier for you to develop a scalable UI
for your app. In this video we will show you how to create
a scalable UI with some techniques to ensure your app looks its best on all bada devices.
Here’s the app we’ll be using to show you how to implement a scalable UI. The dialler
simplifies the process of making an international call. We combine the service provider’s
number with the destination number to make an international call. You can enter the number
directly or choose from one of your contacts. [Operator – Please enter the number you would
like to call]. We’re going to use this app to show you
three techniques for creating a resolution independent UI. First we will explain how
to create different versions of your form for all supported resolutions.
Then we will introduce the relative layout feature and auto-scaling.
Finally we’ll show you how to create the form programmatically using the new logical
co-ordinate feature. To put the finishing touches to your UI, we will explain you how
to create images for different resolutions. bada 2.0 currently supports devices with resolutions
of 400×800, 320×480 and 240×400. One approach we can use to support all these devices is
to create separate forms optimised for each resolution. The form matching the resolution
of the device will then be loaded by the platform on runtime.
Make sure that ‘auto-scaling’ is turned off, when you are using seperate forms for
different resolutions since it will be turned on by default when you create your project.
You can find this setting in Project|Properties|bada build|Application Information.
Don’t worry, we’ll explain how the auto-scaling feature works later in this video.
Once you’ve created your form for one resolution, creating further versions is easy. In the
IDE’s resource editor choose your form and then select the ‘Generate’ menu item.
From the ‘generate resource file’ dialog, choose the additional resolutions for which
you want to create resource and then click ‘Finish’. The forms will be created at
the requested resolutions. Here is the dialler app running on different
different resolution screens. The correct version of our form is chosen by platform
at runtime. Creating separate forms for each screen resolution works well, but bada 2.0
introduced some more powerful techniques. Another approach to support multiple screen
resolutions is to create a single form and use the relative layout style introduced in
bada 2.0. We will add the controls relative to each other or the form, so that the controls
will be adjusted automatically for the screen resolution. To use this method of UI scaling,
you need to ensure that auto-scaling is on and that a base resolution is specified.
By default this will be NormalSize, which is 480 x 800 – a WVGA screen. We create our
form for 480×800 and let the platform take care of scaling the size and placement of
the controls when our app runs on other resolution devices. Let’s have a look at our app running
in different resolutions with one form created using the relative layout style.
With both these resource based approaches, it’s very easy to support new devices & there
is no need to change the code. You can also support multiple device resolutions by creating
your form and its controls programmatically and using the logical co-ordinate system introduced
in bada 2.0. In the logical co-ordinate system, every device is assumed to have a fixed width
of 480 pixels. If auto-scaling is enabled in the project preferences, then all drawing
uses these logical co-ordinates and is scaled using base resolution. By default this base
resolution is normalsize – that is 480 x 800. The physical resolution of a WQVGA screen
is 240×400, but it’s logical resolution is 480×800. An HVGA screen has a physical
resolution of 320×480 but has a logical resolution of 480×720 to allow the platform to maintain
the aspect ratio when scaling. In your code you should use API GetBounds()
or GetClientAreaBounds() to position your controls relative to the form, rather than
using hard coded values. Now, let’s add one more feature to the app.
We will add new buttons to access new features. While these buttons will fit within the co-ordinates
of WVGA and WQVGA devices which have the height of 800 pixels in the logical co-ordinate system,
there won’t be room at the bottom of the form on the HVGA device. One way to solve
this problem is scrollpanel, the height of which we will set relative to the height of
the form. We can keep the same dimensions and position of all the controls and add them
to the ScrollPanel. This code is written for 480×800 screen resolution. But still this
is working fine on devices with all 3 different resolutions. This is because we have considered
the screen height when creating the ScrollPanel and on HVGA devices, the form scrolls to reveal
the extra buttons. It is recommended that you don’t use deprecated
API’s and UI elements such as soft key, option key and list in your app. This will
make sure that your app will run seamlessly with future releases of bada.
We have talked about supporting different screen resolutions, but there is another factor
to consider: screen density. bada 2.0 supports three screen values for screen densities:
high, middle and low, from the low dots per inch of the Wave 525 series to the high DPI
of the Wave I,II & 3 devices. You need to design your app’s images with
the screen density in mind. You can create optimized images of different qualities and
place them in ScreenDensity Low, Middle High folders.
The correct image will be chosen based on the pixel density of the device.
In this video we showed you various techniques introduced in bada 2.0 for supporting different
screen resolutions. We explained how to create forms for each different resolution screens
and wwnt through code in our Dialler app to create a complex form dynamically.
Finally we showed how to take account of screen density when designing your app’s images.
All of these features help to keep your app’s UI looking good on all bada devices.
To find the sample code used in this video and other related content please visit developer.bada.com.
Thanks for watching.

, , , , , , , , , , , , , , ,

Post navigation

4 thoughts on “UI Scalability

Leave a Reply

Your email address will not be published. Required fields are marked *