Android, tablets, and mdpi-large

When the Dell Streak was first launched there was an aspect of it that caught me off guard, its’ pixel density, and it would appear I’m not alone.

Before the Streak developers could pretty much assume that if their app was installed via Google Market any device which reported itself as having low density display (ldpi) had a QVGA screen, any device with a medium density (mdpi) screen had a HVGA screen, and any device with a high density (hdpi) screen had a WVGA screen, and that seemed to work pretty well.

The Streak, however, has a WVGA screen but reports itself as a mdpi device. This may sound wrong, but it is, in fact, totally correct in doing so. The reason for this is that the Streak has a physically larger screen than previous devices which means that the centers of the pixels are not as close together. In fact the centers of the pixels are far enough apart for it to be classed as a medium density (mdpi) screen, not a high density as has been the case with previous WVGA devices.

Where this causes problems is for home screens with a fixed number of icons in a grid similar to the one in the Facebook or Twitter apps. The Streak is only an Android 1.6 device so I couldn’t test Twitter on it, but if you put a Nexus One and a Streak side by side and go to the “home” screen in the Facebook app you’ll see the problem; namely lots of whitespace on the screen even though the screens have exactly the same resolution (800×480);

Android Facebook on an hdpi & mdpi-large display

This isn’t because the Facebook app doesn’t contain icons which would fill the screen on the Streak (if that was the problem you’d also see lots of whitespace on the Nexus Ones’ screen). The problem is that, like many developers, the developers of the Facebook app seem to have assumed that any device reporting a mdpi screen has the resolution of a HVGA screen, and so the Streak uses the icons for an HVGA screen on its (far larger) WVGA display, which leaves lots of whitespace.

If you thought that this might be isolated to the facebook app then I’m sorry to tell you that you’re wrong. Here is a photo of another popular Android app which has noticeably more unused empty screen space on the Streak than the Nexus One;

Android Weather Channel on an hdpi & mdpi-large display
The weather channel app with large areas of empty space on each line on the Streak.

So if you’re a developer you’ll need to really think about how you’re using ldpi, mdpi, and hdpi, because the Streak may be the first device to show the problem, but it’s unlikely to be the last.

Update: After getting the Android 2.1 update for the Dell Streak I was able to install and test the Google developed Twitter app, and guess what, yup, it doesn’t handle mdpi-large well either;

Twitter on the Dell Streak on Android 2.1

[Note: If you want some ideas for dealing with the multiple resolutions you can see the related discussions on the android-developers Google group]

18 thoughts on “Android, tablets, and mdpi-large

Add yours

  1. Great post (and blog).

    Couple of typos:

    “Up until the Streak developers”
    “about how your using ldpi”

  2. I’m not sure I agree with this analysis. The developers/designers responsible for the UI appear to have specified the sizes of their elements in dips. For example the buttons are approximately the same dimensions between devices and since buttons are designed for fingers, this may have been the intention.

    It looks more to me like a failure to implement flexible layouts that sensibly accommodate different screen sizes.

    1. The issue as I see it is that the graphical resources for 800×480 aren’t being used because using the same graphical resources on the Nexus One and the Streak would create larger buttons on the Streak making the app easier to use, and the only thing lost would be currently unused whitespace, so I can’t see why anyone wouldn’t want to do that.

      The blue bars on the Facebook app scale up in relation to the screen, so it would seem strange to do that and not want the icons to scale up as well.

  3. ldpi/mdpi/hdpi is used to create GUI elements that have the same physical size on any device.
    For example to avoid having a huuuge button on a tablet.
    So, it is just fine in your examples.


    1. So, you put a lower resolution resource in the mdpi folder than in the hdpi folder, since the same physical size will need less actual pixels.
      It is not about filling whitespace.

      1. Btw the physical size is determinded by the layout and styles in device independent pixels and the resources are just loaded from the qualified resource folders accordongly to the actual display resolution.
        My first comment was a bit misleading, so I wanted to clean this out a bit.

      2. …and that’s exactly what Al said in this blog post: Developers, don’t ask the device for its density and guess the pixel resolution from that…

    2. If you look closely at the photos you’ll see the larger screen ends up with smaller GUI elements which neither looks good or makes for an effective UI for the screen size, which is why I believe it’s not intentional.

      1. The differences in size are a result of the rather coarse “resolution buckets”. The mdpi bucket is for devices with about 160dpi, but WVGA on a 5″ display diagonal equals to about 187dpi. So the icons are about 15% smaller than normal. On the Nexus One (about 252dpi) the hdpi bucket (240dpi) is used, to the icons are only 5% smaller than normal.

Leave a Reply

Your email address will not be published. Required fields are marked *

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑