Reusing images for different screen sizes and densities on Android

Question

Context: I am developing an Android application for tablets (landscape) with image resources that has a resolution of 1920x1200. This resolution corresponds to the following screen sizes and densities:

drawable-xlarge-hdpi drawable-large-xhdpi 

Problem: If I include all my image resources duplicated in these two folders, the final APK size will be unnecessarily heavy

My bad approach: I tried using Alias ​​for these drawables, as defined here: http://developer.android.com/guide/topics/resources/providing-resources.html#AliasResources

I have an image resource in:

 res/drawable-nodpi/image_cmn.png 

and two aliases inside the corresponding screen sizes and densities:

 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 the layout file, I reference the alias:

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

But, unfortunately, Android does not change the size of the resource for my test tablet (mdpi), and as a result I have more images.

I tried transferring the original png to res / drawable even to res / raw, but the result will be the same as res / drawable-nodpi.

If you move this png to res / drawable-xlarge-hdpi (the same alias xml), the result will be correct, but, of course, that will not solve my problem, I will also have to copy them to res / drawable-large-xhdpi and the apk size will increase .

Does anyone know how to achieve this?

Answer 1

I try to avoid using wrap_content in ImageViews due to the fact that different versions of platforms resize images differently if you put an explicit width and height in dp, it doesn't matter how many images are selected.

In your case, I will have one image in drawable / xhdpi. Specify the width and height in the layout file in dp. For an image of 1920x1200px, which will be layout_width = "960dp" layout_height = "600dp"

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

If you want the image to be larger 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 differ between large and x-large.

Answer 2

I can offer two solutions for this problem:

First:

• Put all your images in the resource folder. Separate them into folders by permission.
• Write your own logic to determine the current resolution and / or size of the device.
• Select an image from a folder with a specific resolution.
• Install ImageView code in code.

The second (it is ugly, but very fast):

Just compress your tinypng.com png images. It can reduce your images up to 70-80% without loss of quality (for mobile devices).

Answer 3

how about this:

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

this should work, but, however, the disadvantage is that it does not use pre-scaling , that is, on devices with lower resolution, they will consume more memory.

Answer 4

If you want to use the same images for all size devices, I think you need to use 9-patch images.

Here is the official Android article click here.

Before:

After:

Refer to this: Android 9 Patch Image Tutorial

Hope this helps.

Answer 5

If you want to use the same image for all size devices, I think you should use 9 Image patches with each layout containing a weight tag inside the linear layout in android. I think it works 100%. I'm sure. because I use this methodology for a universal application (means Tablet and Device application)

Answer 6

Ok, I got your problem. I have a word related to this problem.

There are two ways, and I recommended both.

The first way (more convenient, related to your current problem.)

Download some apk if the size gets bigger.

follow the official guide .

The second method I prefer to use this method.

Create some layouts. as below

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

res / layout-sw600dp /main_activity.xml → # For 7 "tablets (600dp wide or larger)

res / layout-sw720dp /main_activity.xml # For 10 "tablets (720dp wide or larger)

I highly recommended reading every word of this google white paper .

Thanks.