Device characteristics

There are several devices available that run BlackBerry 10 OS. These devices have different specifications, and apps that run on these devices behave slightly differently. However, all of these devices still provide the core BlackBerry 10 experience to users. Because of the differences between the devices, you should design your app so that it works correctly and looks great regardless of the device that it's run on.

BlackBerry 10 devices can be separated into two general categories:

  • All-touch devices: These devices use a touch screen as the only input method. They include a touch screen keyboard that appears on the screen when keyboard input is required.
  • Devices with a physical keyboard: These devices include a physical, QWERTY keyboard in addition to a touch screen. They have a smaller screen size than all-touch devices (and of course, no touch screen keyboard).

This document outlines some of the key differences between BlackBerry 10 devices and provides tips and resources to help you develop your apps effectively. In addition, the UI Guidelines for BlackBerry 10 is a great resource that can help you design nearly every aspect of your app's UI, and includes information about structure, navigation, screen sizes, and more.

Screen resolution

Due to the differences in screen size, all-touch devices and devices with a physical keyboard have the following screen resolutions and pixel densities:


Diagram showing the different resolutions of BlackBerry 10 devices.

Because users might run your app on devices with any of these screen resolutions, consider the following guidelines as you develop your apps:

Create resolution-independent UIs

The UI controls that you choose to use, and the way that you arrange these controls, depend on the resolution of the screen. On devices with a physical keyboard, you have less screen space to work with, so you may have to design your UI differently. You should try to develop UIs that don't depend on a particular resolution by using features such as dynamic layouts, margins, and space quotas.

To learn more, see Resolution independence.

Use assets designed specifically for each resolution

If your app includes graphical assets, such as background images or other assets, you should consider how these assets might look when they're viewed in different resolutions. Cascades scales certain assets automatically to fit the size of the screen. If your assets don't scale very well, you might find that your app isn't very visually appealing on devices with different resolutions.

Fortunately, Cascades includes a static asset selector that can help your app use the right set of assets based on the target device that your app is running on. This feature lets you create different image assets—and even entirely new layouts—for each device that you want to support.

To learn more, see Static asset selection.

Keyboard

Keyboard input is a fundamental way that users interact with their mobile devices. In previous versions of BlackBerry devices, many users enjoyed models with a physical keyboard and became accustomed to the usability and feel of that interaction method. With BlackBerry 10, users can choose between devices with a physical keyboard and all-touch devices with a touch screen keyboard.

This choice means that you need to design your apps so that they support input using both the physical keyboard and touch screen keyboard. Devices with a physical keyboard do not also have a touch-screen keyboard, so any code that you write specifically for the touch-screen keyboard needs won't work on physical keyboard devices.Consider the following guidelines as you develop:

Support keyboard shortcuts

Users who have owned BlackBerry devices for a long time might be familiar with the wide range of keyboard shortcuts that are available for core apps. Experienced users can compose emails, open apps, search for content, and perform other common tasks quickly, just by using shortcut keys and key combinations. To accommodate these users and how they prefer to interact with the device, provide support for keyboard shortcuts in your apps, where appropriate. When you make common tasks quick and easy to perform, users will continue to use your app and even recommend it to others.

Be careful, though; keyboard shortcuts work only on devices with a physical keyboard. On all-touch devices, keyboard shortcuts aren't generally available. However, you have more screen space to work with on these devices, so you might choose to provide additional options in your UI to make up for the lack of shortcuts. Try to support as many ways to interact with your app as possible, so that users have the flexibility to use your app no matter what device they have.

To learn more about keyboard shortcuts and how to support them in your apps, see Keyboard shortcuts.

Save room for the touch screen keyboard

On all-touch devices, when users need to type text in fields or other controls, the touch screen keyboard is displayed automatically. The touch screen keyboard uses the bottom portion of the screen, and when the keyboard is displayed, other components of an app's UI are compressed to make room for the keyboard. If you have a lot of controls in your UI, some of them might even be obscured when the keyboard is displayed. As you design your UIs, make sure to leave space for the touch screen keyboard to be displayed without obscuring important parts of your UI.

For example, consider the Quotes sample app that you can download from the Sample Apps page. This app displays quotes by various people, and it also allows you to add new quotes or edit existing ones. When you choose to edit an existing quote, you can change the text in several fields (first name, last name, or quote body). If you run this app on an all-touch device and you tap one of the fields, the touch screen keyboard is displayed:


Screens showing the Quotes app with and without the virtual keyboard displayed.

Notice how all of the important aspects of the UI (the text fields, quote body, and buttons) still appear on the screen when the touch screen keyboard is displayed; only the empty space above and below these elements is compressed. The app leaves plenty of room for the keyboard to be displayed.

In some cases, the screens in your apps might have too much content to be rearranged properly when the touch screen keyboard is displayed. If it isn't feasible to reduce the complexity or number of UI controls on these screens, consider placing your controls inside a ScrollView. A ScrollView lets users scroll to see the remainder of the content on the screen.

Hardware specifications

In addition to the differences in screen resolution and keyboard input methods, BlackBerry 10 devices also have some differences in their internal hardware. For most apps, the differences in hardware shouldn't affect the features or performance of your apps, but you should still be familiar with the following considerations:

  • Storage space: You need to be aware of the reduced storage that is available on some devices, and you should warn users if your app generates large amounts of data that could potentially fill up all of the available space.
  • Processing power: If your application requires a lot of processing power, you might want to warn users that the app might not run as well on less powerful devices.
  • NFC and HDMI: If your application requires NFC capabilities or HDMI output, you need to consider whether you should still release the app on devices without the necessary hardware. If the features aren't essential to your app, you should warn your users and disable the functionality in a graceful way.

The table below provides a complete listing of the hardware specifications for BlackBerry 10 devices.

Feature BlackBerry Z30 smartphone BlackBerry Z10 smartphone BlackBerry Q10 smartphone BlackBerry Q5 smartphone

Display

720 x 1280 pixels, 4.97", OLED

768 x 1280 pixels, 4.2", LCD

720 x 720 pixels, 3.1", OLED

720 x 720 pixels, 3.1", LCD

Processor

Dual-core, 1.7 GHz

Dual-core, 1.5 GHz

Dual-core, 1.5 GHz

Dual-core, 1.2 GHz

Memory

2 GB RAM, 16 GB flash storage, removable microSD (up to 32 GB)

2 GB RAM, 16 GB flash storage, removable microSD (up to 32 GB)

2 GB RAM, 16 GB flash storage, removable microSD (up to 32 GB)

2 GB RAM, 8 GB flash storage, removable microSD (up to 32 GB)

Connectivity

4G LTE, microUSB, Bluetooth 4.0

4G LTE, microUSB, Bluetooth 4.0

4G LTE, microUSB, Bluetooth 4.0

4G LTE, microUSB, Bluetooth 4.0

Wi-Fi

4G mobile hotspot, 802.11 a/b/g/n

4G mobile hotspot, 802.11 a/b/g/n

4G mobile hotspot, 802.11 a/b/g/n

4G mobile hotspot, 802.11 b/g/n

Camera

8 MP rear-facing camera, 2 MP front-facing camera

8 MP rear-facing camera, 2 MP front-facing camera

8 MP rear-facing camera, 2 MP front-facing camera

5 MP rear-facing camera, 2 MP front-facing camera

GPS

Assisted, autonomous, and simultaneous GPS

Assisted, autonomous, and simultaneous GPS

Assisted, autonomous, and simultaneous GPS

Assisted and autonomous GPS

NFC

Yes

Yes

Yes

Market dependent

microHDMI

Yes

Yes

Yes

No

Sensors

Accelerometer, gyroscope, proximity, compass

Accelerometer, gyroscope, proximity, compass

Accelerometer, gyroscope, proximity, compass

Accelerometer, proximity, compass

For more information about graphics hardware and OpenGL ES support on BlackBerry 10 devices, see Find out hardware information.

Core controls

Cascades provides a lot of core controls that you can use in your apps. There are controls that represent buttons, sliders, text fields, menus, action items, and much more. Most of these controls appear the same on both all-touch devices and devices with a physical keyboard, which makes it easier for you to create a consistent UI for both types of devices.

However, there are a few controls that look or function differently depending on the device. You should be aware of the following differences in core controls as you create your apps:

Action items and the action bar

The action bar is a special area at the bottom of the screen and contains action items that are applicable to the current screen. For example, a screen in an email app might have actions for composing a new message, saving a message as a draft, or deleting a message. You can choose which actions you want to show on the action bar in your app, and the remaining actions appear in an action menu.

Depending on the device that your app is running on, the behavior of action items and the action bar is different. On all-touch devices, any text that you set for action items (using the title property of the ActionItem class) is displayed below the icon for the action. On devices with a physical keyboard, this text doesn't appear; only the action icon is displayed. Users can tap and hold an action item to display the text for an action. The action bar itself is also slightly shorter, to fit better on the smaller screen.


Screens showing the differences in the action bar between BlackBerry 10 devices.

Tabs use the same behavior as action items.

Auto-hiding action bar

When you include a scrolling list (or any other scrollable content) in your apps, there are some things that you need to consider when adapting the content to fit a smaller screen. You can fit more list items or scrollable content on all-touch devices because they have larger screens than devices with a physical keyboard. Depending on the structure of your app, displaying fewer list items or less scrollable content might negatively impact your app's user experience.

This problem is particularly evident when your app includes an action bar on the same screen as a list or scrollable content area. The action bar is displayed at the bottom of the screen, on top of any list items or scrollable content on the same screen. This placement can consume valuable screen space that could instead be used to display additional list items or scrollable content.


Screens showing what the same list looks like on both a BlackBerry Z10 smartphone and a BlackBerry Q10 smartphone.

To help with this problem, the action bar disappears automatically in certain circumstances when an app is run on a device with a physical keyboard. If your app includes a ListView or ScrollView as the main control on a screen (that is, as the root control of a Page), as users scroll downward, the action bar is hidden automatically so that additional list items or scrollable content items are visible. The action bar reappears when users reach the end of the list or scrollable content area, or if users start scrolling upward.


Screens showing that the action bar is displayed when a list is motionless and it is hidden when users scroll downward.

You can use the actionBarAutoHideBehavior property of a Page to determine whether the action bar is hidden automatically during scrolling. This property accepts values from the ActionBarAutoHideBehavior::Type enumeration, such as ActionBarAutoHideBehavior::HideOnScroll and ActionBarAutoHideBehavior::Disabled.

Here's how to create a Page that includes the actionBarAutoHideBehavior property in QML. A value of Disabled is used, which means that the action bar won't be hidden automatically during scrolling.

Page {
    actionBarAutoHideBehavior:ActionBarAutoHideBehavior.Disabled

    ListView {
        // Create your list content
        ...
    }
}

Sticky and non-sticky title bar

You can add a title bar to the top of a screen in your app. This title bar can contain elements such as the name of the screen, a Confirm button (for example, for users to accept any changes that they've made and proceed to the next screen), and a Cancel button (for example, for users to discard any changes that they've made and return to the previous screen).

Screen showing the title bar in a Cascades app.

A title bar can be useful to let users know where they are in the navigation hierarchy of your app, as well as to provide confirm and cancel options. However, on smaller screens, the title bar can consume screen space that could be put to better use.

By default, when an app is run on an all-touch device and a screen in the app includes a title bar, the title bar is sticky. That is, if the content area is scrollable (for example, if it includes a ListView or ScrollView as its root control), when users scroll, the title bar remains at the top of the screen.

However, on a device with a physical keyboard, the title bar is non-sticky by default. If the content area is scrollable, when users scroll, the title bar scrolls along with the content and disappears from the top of the screen. This behavior allows you to display more scrollable content on the smaller screen.


Screens showing that a non-sticky title bar is displayed at the top of a scrollable area and is hidden when users scroll downward.

You can use the scrollBehavior property of a TitleBar to determine whether a title bar is sticky or non-sticky. This property accepts values from the TitleBarScrollBehavior::Type enumeration, such as TitleBarScrollBehavior::Sticky and TitleBarScrollBehavior::NonSticky.

Here's how to create a Page that includes a TitleBar with the scrollBehavior property in QML. A value of Sticky is used, which means that the title bar remains at the top of the screen when users scroll, no matter what device the app is run on.

Page {
    titleBar: TitleBar {
        title: "My Title Bar"
        scrollBehavior: TitleBarScrollBehavior.Sticky  
    }

    ListView {
        // Create your list content
        ...
    }
}

If a title bar includes any action items on it, the title bar can only be sticky and it cannot be specified as non-sticky. For example, if you use the acceptButton property of a TitleBar to specify an action item that represents a confirm action, the title bar will always remain at the top of the screen (sticky behavior) regardless of the scrollBehavior value that you specify.

Themes 10.1

By default, devices with LCD and OLED screens use different visual styles (also called themes) for apps. Devices with LED screens (such as the BlackBerry Z10 smartphone) use a bright theme, while devices with OLED screens (such as the BlackBerry Q10 smartphone) use a dark theme. Certain core controls (such as labels, buttons, sliders, and so on), as well as the default app background, appear differently depending on the theme. Here's an example of the same app that's run using both themes:


Screens showing examples of the bright theme and dark theme.

The dark theme was chosen as the default theme for OLED screens because this type of screen consumes more power when displaying brighter images. In addition, brighter images can cause a burn-in effect on OLED screens, where pixels lose their luminosity and color properties over time. To learn more about OLED screens and how to design your apps for them, read Designing for OLED displays in the UI Guidelines.

When you create your UI, you should consider how it might look using both a bright theme and a dark theme. Make sure that your image assets appear correctly and that all UI elements are clearly visible using both themes. Some assets that you use, such as icons or nine-slice scaled images, might need special attention to ensure that they work well against both bright and dark backgrounds.

You can specify the theme that you want your app to use by modifying the bar-descriptor.xml file in your Cascades project. If you don't specify a theme, your app uses the default theme for the device that it's run on (for example, bright for all-touch devices and dark for devices with a physical keyboard). You can add the <cascadesTheme> element, with a value of either bright or dark, to the existing <initialWindow> element. Here's how to specify that your app should use the dark theme:

<initialWindow>
    <cascadesTheme>dark</cascadesTheme>
</initialWindow>

In general, you shouldn't force your apps to use a bright theme. Instead, try to either create assets that appear properly using both themes, or create separate assets for each theme and use the static asset selector (discussed below) to select the correct set when your app runs.

To help you manage your bright and dark assets, Cascades includes a static asset selector that determines the theme that's running on your target device and automatically selects the right set of assets. This selector lets you specify theme-based assets, as well as resolution-based assets.

To learn more about selecting assets based on theme, see Static asset selection.

Last modified: 2014-06-24



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus