Over a million developers have joined DZone.

Nokia Imaging and Big UI Wiki Competition entry: Advanced Techniques for Big UI

· Mobile Zone

I wrote about some advanced techniques for adapting Windows Phone UI for big screens and 1080p resolutions on Nokia’s Developer Wiki: Advanced Techniques for Big UI. The article was written as a part of Nokia Imaging and Big UI Wiki Competition 2013Q4 which ended two days ago. There are great entries in this competition and I recommend reading them if you want to become familiar with Nokia Imaging SDK 1.0 and developing applications for the big screen.

Here is an introduction:

Designing applications for Windows Phone 7.x (from now on WP7) was easy since there was only one supported resolution – 480 x 800 (WVGA). In addition, screen sizes did not vary that much between vendors. This “unfragmentation” was hailed as a great feature for the young OS since applications would look the same on all devices that ran Windows Phone 7.

Windows Phone 8 introduced two additional resolutions: 768 x 1280 (WXGA) and 720 x 1280 (720p). The first is an up-scaled version of the original resolution and they share the same aspect ratio (15:9). The latter resolution actually has a different aspect ration (16:9). This meant that applications had some extra space at the bottom for the UI, but in general if layout is done dynamically, UI does not need to be altered significantly to account for the extra space. The devices got a little larger, but this also meant little to the application design process.

However, coming with GDR3 update, Windows Phone 8 got a new resolution – 1080p. Along with the new, and currently the highest available, resolution, devices also grew in size. For the first time Windows Phone 8 is ran on devices with 6 in screen diagonal. Applications can no longer simply scale up to accommodate such large devices, they need to change their layout a bit as well.

This article presents a couple ideas for adapting the application’s UI for the large screen. It also contains some helper classes useful for detecting current resolution and current screen size. There is also a small trick used here to use 720p emulator image as a 1080p device with “faked” screen diagonal of 6. This allows for easy testing of mentioned techniques without having a physical device with either 6 screen diagonal or 1080p resolution.

Read more on wiki page.

Topics:

Published at DZone with permission of Toni Petrina, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}