Reuse drawable images for different screen sizes and densities on Android

Question

Context: I'm developing an Android application for tablets (landscape) with image resources which has a resolution of 1920x1200. That resolution fits on the following screen sizes and densities:

drawable-xlarge-hdpi
drawable-large-xhdpi

Problem: If I include all my image resources duplicated on this two folders the final size of the APK will be unnecessarily heavy

My unsuccessful approach: I tried to use Alias for this drawables as defined here: http://developer.android.com/guide/topics/resources/providing-resources.html#AliasResources

I have my image resource in:

res/drawable-nodpi/image_cmn.png

and the two alias inside corresponding screen sizes and densities folders:

res/drawable-xlarge-hdpi/image.xml
res/drawable-large-xhdpi/image.xml

image.xml:

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/image_cmn" />

Of course, when I use my image inside a layout file I reference the alias:

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/image" />

But sadly Android is not resizing properly the resource for my testing tablet (mdpi) and the result is that I have bigger images.

I tried to move the original png's to res/drawable even to res/raw but result is the same than res/drawable-nodpi.

If I move this png's to res/drawable-xlarge-hdpi (same of xml alias) the result is correct but naturally that not solve my problem cause also I'd have to copy them to res/drawable-large-xhdpi and apk size increases.

Does anyone know how to achieve that?

Answer 1

I try to avoid using wrap_content on ImageViews due to different platform versions resizing the images differently, if you put an explicit width and height in dp it doesn't matter as much which image gets selected.

In your case I would have a single image in drawable/xhdpi. Specify it's width and height in the layout file in dp. For a 1920x1200px image that would be layout_width="960dp" layout_height="600dp"

The image will be the roughly the same physical size on x-large tablets as large tablets.

If you want the image to be bigger on x-large tablets, include a second layout file where the width and height of the images are increased but keep the same images.

Alternatively you can use dimension resources that are different between large and x-large.

Answer 2

I can propose two solutions for this problem:

First one:

1. Put all your images to assets folder. Split them to folders by resolutions.
2. Write your own logic to determine current device resolution and/or size.
3. Pick image from folder with determined resolution.
4. Set it to your ImageView in code.

Second one (it is ugly, but very quick):

Just compress your png images with tinypng.com. It can reduece your images up to 70-80% without losing quality (for mobile devices).