Home > android, ui > Large (tablet) screen impact on Android Application UI

Large (tablet) screen impact on Android Application UI

A few days Google released a perview of the next version of Andorid, 3.0 (Honeycomb), targeted at tablet devices.

Honeycomb contains new framework features that make it easier to create UIs that scale to large screen sizes. However, there are already tablets out there, like the Samsung Galaxy Tab, which run earlier versions of Android. Applications running on these earlier Android versions cannot take advantage of those new Honeycomb features (at least not yet). So, what effects does running on a large screen have on the UI of an Android application?

I’ve only done Galaxy Tab tests with the emulator, so my observations are somewhat limited, but still, here they are.

The Galaxy Tab reports itself as an HDPI device, even though its actual screen density is 170 dpi. This is to account for the larger display pixel count, and greater viewing distance.

Still, compared to a typical 4″ 480×800 hdpi phone screen, the Galaxy Tab can fit more on the screen, since it has more pixels: using a 72×72 icon as a measurement unit, a 480×800 screen can fit 6.6 accross and 11.11 down. The Galaxy Tab can fit 8.33 down and 14.22 across.

This makes images look smaller relative to the rest of the screen, even though they are larger in real world units, compared to a 4″ hdpi phone, and have same pixel size.

Screen metrics for a 4″ 480 by 800 screen

Pixels Inches Actual DPI Icon size, pixels Icon size, inches Icons per screen
480 2,06 233,01 72px 0,31″ 6,67
800 3,43 233,01 72px 0,31″ 11,11

Screen metrics for a 7″ 600 by 1024 screen

Pixels Inches Actual DPI Icon size, pixels Icon size, inches Icons per screen
600 3,54 169,49 72px 0,42″ 8,33
1024 6,04 169,49 72px 0,42″ 14,22

What this means is…

I don’t think you can expect an application running on the Tab (or another tablet) to look just like it looks on a phone, only larger. So far, this has been the case for phones of varying screen sizes and densities, but for a tablet device, this is no longer true.

And here are some screenshots of my application running on an HVGA device, on a WVGA800 device, and the Galaxy Tab, all resized to same height (320px):

HVGA - original size

The original 480 by 320 HVGA screen.

WVGA800 - resized

This is 800 by 480, resized to 533 by 320 (same height as the HVGA screenshot above).

Looks very, very much like the HVGA screenshot (although the text in spinners is not clipped, as they are a little larger).

Galaxy Tab - resized

This is 1024 by 600, resized to 546 by 320 (same height as the HVGA screenshot above). Doesn’t look like the screens above, does it?

The UI controls on the right still line up with list view on the left, but they are much smaller relative to the screen.

Measured in inches, the entire screen is larger, and the buttons (being the same size in pixels) are also larger than those on a 4″ WVGA800 device.

The Galaxy Tab can fit more information on the screen. The list could have about one and a half rows more.

Advertisements
Categories: android, ui
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s