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).

Answer 3

how about this:

1. put all your image resource in res/drawable-nodpi
2. put different layout files in res/layout-xlarge , res/layout-large , res/layout
3. when use this image on ImageView , do not use match_parent or wrap_content , use calculated size in dp instead.

this should work, but however, the downside is that it does not use pre-scaling , meaning on lower dpi devices, it will consume more memory.

Answer 4

If you want to use same images for all size device then i think you have to use 9-Patch Images.

Here Official Article of Android click here.

Before:

After:

Refer this : Android 9 Patch Image Tutorial

Hope it helps.

Answer 5

If you want to use same image for all size devices then i think you should use 9 patch Image with each layout contain weight tag inside linear layout in android. I think it's work 100%. I am sure. because i am using this methodology for universal application(means Tablet and Device application)

Answer 6

Okay i got your problem.i have my word related to this problem

There are two way and i recommended both.

First Way (more convenient related to your current problem. )

Upload multiple apk if size become bigger.

follow official guide .

Second way i more prefer to use this way.

Create multiple layouts. like below

res/ layout /main_activity.xml ---> # For handsets (smaller than 600dp available width)

res/ layout-sw600dp /main_activity.xml --># For 7” tablets (600dp wide and bigger)

res/ layout-sw720dp /main_activity.xml # For 10” tablets (720dp wide and bigger)

I strongly recommended to read each word of this official doc by google .

Thanks.