When you develop apps for mobile devices, it's important to consider the screen resolution of the device you're targeting. Many aspects of your UI, such as the arrangement of UI controls and the appearance of image assets, can depend on resolution. If your target platform includes devices with different resolutions (as BlackBerry 10 does), your apps should be able to adapt to these resolutions so they always look their best and reach the largest number of users.
Screen resolutions in BlackBerry 10
Devices running BlackBerry 10 are available in several screen resolutions:
As you develop your apps, you should try to create your UIs so that they look good and work correctly in any resolution.
Resolution of the BlackBerry Z10 smartphone
It's important to note that the BlackBerry Z10 smartphone has a slightly different resolution than future devices that will run BlackBerry 10, as illustrated in the diagram above. This device has a resolution of 768 x 1280, and you might need to adjust your apps slightly to appear properly on this device. You should plan to support this resolution for the initial versions of your BlackBerry 10 apps.
Here are a couple of ways that you can handle this slightly different resolution:
- Create a separate UI for each screen resolution that you want to support. In this way, you can make sure that your app appears exactly as you want it on each resolution. The static asset selector that's included with Cascades can make it easier to use the correct assets for each resolution.
- Use a buffer approach to design your app for a resolution of 720 x 1280. By leaving 24 pixels of empty space (a buffer) on both the left and right sides of your UI, your screens will fit the 768 x 1280 resolution but won't need to be changed to support the 720 x 1280 resolution.
Making your UI resolution-independent
There are several ways you can achieve a resolution-independent UI. You can use relative layouts that Cascades provides, and you can use properties such as margins and space quotas to preserve the spacing between your controls. You can also take advantage of nine-slice scaling for your images, which lets your images grow or shrink to fit the space that's available to it. You should also learn about the static asset selector that's included in Cascades, which automatically selects the best set of project assets to use based on the resolution of your target device.
You can visit the links below to learn more about these approaches and how to apply them in your apps.
Last modified: 2013-03-21