Resolution independence

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.