Question

I have an Android application, backed by an API. To this API users can upload photographs. These photographs need to then be scaled according to a few categories, to a few different densities.

Is there anywhere that has a recommended size or anyone that’s tackled this problem before?

I figure that I need to fill out this grid, to know what size to resize (down) the images to (Assuming the user uploaded, say, a 4000x4000px image, or whatever):

Role / Screen | LDPI | MDPI | HDPI | XHDPI |
--------------------------------------------
Icon          |   ?  |   ?  |   ?  |   ?   |
--------------------------------------------
Thumbnail     |   ?  |   ?  |   ?  |   ?   |
--------------------------------------------
Full          |   ?  |   ?  |   ?  |   ?   | 

The API will then return a JSON response like so:

{
  resources: {
    icon: {
      ldpi:  "path",
      mdpi:  "path",
      hdpi:  "path",
      xhdpi: "path",
      raw: "path"
    },
    thumbnail: { ... },
    full: { ... }
  }
}

The client device can then check to what density itself is, and use the appropriate key’d path to render an image.

I know according to this, “you should follow the 3:4:6:8 scaling ratio”, but how do you know to what size an image should be used, to scale the others?

EDIT: In case my question is too rambly, here is the condensed version: To what sizes should I scale raw images uploaded by users down by, so that they look the best on the wide variety of Android device screens?

Answer 1

If I understand correctly what you’re asking for, things are easier than you’re making them. You already understand the 3:4:6:8 ratio, so it’s just a matter of either you or your “powers that be” deciding how big you want each of ‘icon’, ‘thumbnail’, and ‘full’ to be in real life, and then doing the math.

In other words, there’s no “correct” size for thumbnails, only a correct ratio to make them look consistent across devices. How big do you want a thumbnail to be?

For starters, you can use the same dimensions for “icon” as for Android’s launcher icons, double each dimension for “thumbnail”, and use an average full screen for “full”:

Role / Screen |  LDPI  |  MDPI  |  HDPI  |  XHDPI  |
----------------------------------------------------
Icon          |  36x36 |  48x48 |  72x72 |  96x96  |
----------------------------------------------------
Thumbnail     |  72x72 |  96x96 | 144x144| 192x192 |
----------------------------------------------------
Full          | 240x320|320x480 | 480x800| 720x1280| 

If you already know one of those is different than you’d like, just change the whole row at once, keeping the 3:4:6:8 ratio. If that looks like a good start, then do a mock up and see how it looks. If the mock up shows that thumbnails should be a little bigger, nudge them all up, keeping the ratio.

Basically it boils down to:

1. Pick a test device and experiment.
2. When you have sizes that you like, use the 3:4:6:8 ratio to make sure you’re in good shape to look good and work well on “wide variety of Android device screens”.
3. Test out on other devices with varying densities and screen sizes to make sure the sizes you chose and the layouts you’ve designed are accommodating to the minor differences you’ll still encounter, even after using the correct ratio, and adjust if necessary.

Lastly, I agree with @Devunwired that you’d do best to not just look at the screen density qualifier, but the screen size one as well.