Adaptive layouting helps to survive new devices like BlackBerry Passport

In the past it was easy for native BlackBerry 10 Developers to support all Devices, because all Devices (Z10, Q10, Z30) had a similar dpi and also screen sizes in pixel were not so much different. This year the BlackBerry Z3 came out with same physical size and aspect ratio as Z30, but a much lower dpi. For this device Cascades UI Framework did the job: from a developers POV the Z3 acts like a Z30 with 720×1280 Pixel – all scaling is done by magic from Cascades.

Now for the upcoming 10.3 OS and for new Devices with total different dpi and physical sizes Cascades did some fundamental changes and introduced ‘DU’ – Density Units. Think this sounds familiar for Android Devs ;-) Now you can (and should) describe all values in ‘DU’ to guarantee that the physical size on the screen is always the same. There are also Layout Buckets and static asset selectors for Images in different resolutions. I will go into details in another article where I also will provide source code.

Today I only want to give an overview what will happen with existing apps on new devices. If you followed all the recommendations to use adaptive Layouts you can lean back and take the time you want to add new 10.3 features to your app. If not you should change your apps immediately to avoid unsatisfied customers.

In September 2014 the new BlackBerry Passport will be available – I already talked about it here. Here are the newest devices:

bb_devices_fy2015

Ok – the Passport seems to be something larger but similar to the Q5 / Q10 – in reality it’s a real large device:

  • Z30: 720 x 1280 px, 5″ Screen, 295 dpi
  • Q10: 720 x 720 px, 3.1″ Screen, 330 dpi
  • Passport: 1440 x 1440 px, 4.3″ Screen, 453 dpi

or comparing the dimensions:

  • Z30: 2.44 in x 4.33 in (6,20 cm x 11 cm)
  • Q10: 2.18 in x 2.18 in (5,53 cm x 5,53 cm)
  • Passport: 3.17 in x 3.17 in (8,05 cm x 8,05 cm)

What does this mean for your applications ? if you have used DockLayout or StackLayout with SpaceQuota it should look well.

Here’s a simple test app from Z30 vs Q10:

z30_px

q10_px

Comparing the width of List columns both look similar – this is because the width was the same: 720 px and density was similar: 295 dpi vs 330 dpi. I changed the pixel into the new Density Units and the Q10 looks 90% the same. You can try it out from the sample app later.

Now the Passport comes into play – at first I tested it using the same Layout where sizes are defined in Pixel:

passport_px

Looks fine: instead of 1 Header and 2.5 rows we now can see 1 Header and 5 rows. The screen looks similar using most space for the description and a smaller part for weather conditions. (This works well because StackLayout with SpaceQuota was used)

The size of the gray colored bar is much smaller at Passport device – this is because of using pixel and now have a higher dpi. The Aspect Ratio of the gray colored bar is the same, but smaller. If you’re using Images you should be aware that they now are much smaller on the Passport.

If you did some hard coded sizing this can cause dramatic effects: Here’s the same Layout from Passport where the maxWidth of ListView was set to 720 px:

passport_px_maxw

Only the left part of the screen was used – exactly 720 px. I promise your customers will ask you what happened ;-)

Back to the other screenshots above: comparing the Passport with Z30 you see that the height is not so much different: the Z30 shows 2 header and 5.5 rows, where the Passport shows 1 Header and 5 Rows.

So if you followed Layout recommendations you can be lazy now:  without doing anything else as converting Pixel to Density Units screens defined for Q10 will work fine on Passport: some more content and all looks similar.

Doing some special layouting for Passport is worth the time

But it can be much better if you do some more changes for the Passport: there’s so much width available from this large device !

One way for this small sample app could be to use some of the space besides the list. In this case I placed the fields normaly pushed on top from the Action ‘At Home’ directly besides the list. This enables me to remove this Action from ActionBar and because there are no more Actions I can set ActionBar Visibility as ‘Compact’ – a new 10.3 property. This gives me some more space at the bottom.

passport_du

This layout uses Density Unites, so the colored bars now have same physical size as on Q10 or Z30.

I reduced the width of the ListView to same physical size as Z30 and still got nearly same number of rows on screen. I placed the complete Page into a DockLayout and added a Container for the right side where I placed some Labels and Images. Another new feature from 10.3 is the use of a UI Palette where you can customize colors of your app. I used one of the colors  from this palette as background for the right Container – so it fits perfect into the UI – per ex. the gradient below the Title Bar. Customizing Colors again will be another story.

For now I hope to inspired you rethinking layouts of your App to use the new BlackBerry Passport in an optimal way – it’s more as layouting a mobile app for Tablets. (Some name the Passport as a Phablet) Surprise your customers with a new and fresh Layout !

Have fun and stay tuned for more stories. All the corresponding sources and developer details will be published at appbus.org. If you were a lazy developer in the past doing your layouting with fixed sizes in pixel then perhaps it’s not so much fun ;-)

BTW: If you followed Google I/O or last WWDC – all are talking about adaptive layouts to support devices of different sizes and density.

Follow

Get every new post delivered to your Inbox.

Join 1,067 other followers

%d bloggers like this: