scale images for ldpi mdpi hdpi and xhdpi

Question

i have 5 buttons with background_button image size 267x63. I have copied all background_button with resolution 267x63 in ldpi mdpi hdpi xhdpi. When i try to run my app, button is big in 2,7" QWGA but in tablet mode is small.

Which is the best risolution for my background_button in ldpi mdpi hdpi and xhdpi?

xml button:

    <Button  
    android:id="@+id/button5"
    android:layout_width="230dp"
    android:layout_height="60dp"
    android:layout_alignLeft="@+id/textView1"
    android:layout_below="@+id/textView1"
    android:background="@drawable/a"
    android:textColor="#FFFFFF"
    android:textStyle="bold" />

if i scale background_button and set this:

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

my button is strict... can you help me please?

Answer 1

Actually, you should not to place THE SAME images to all folders -ldpi, -mdpi, -hdpi.

Lets imagine, you want to support xxhdpi devices. You create image for xxhdpi (for example 1Mb) and put it to all folders. And what will you get on a ldpi device? Image will be scaled. Quality of image on the screen will be horrible. And another thing: if you want to have 100 images on a screen at the same time, each by 2-5Mb, and you create all of this images for xxhdpi devices, then you can get OutOfMemoryError on ldpi device.

So, the best practice is NOT to put the same images to all the folders. If you have some resolution independent images, then you can put them into drawable folder (without postfix). But you should NOT put the same images to ldpi and xxhdpi folders.

So answers with resizing are terrible.

Look at this article

At "Alternative drawables" paragraph. On this image

you can see that for xhdpi device you should have image 2 times larger than for mdpi. And so on.

Hope it helps

Answer 2

You can use the following code to display according to screen resolution -

Display display = ((WindowManager) getSystemService(WINDOW_SERVICE)).
                   getDefaultDisplay();
int screenWidth = display.getWidth();
int screenHeight = display.getHeight();

Code to resize image ---

private Bitmap resizeImage( final Bitmap image) {
        Bitmap resizedImage = null;
        if(image != null)
        {
        int maxHeight = 80; //actual image height coming from internet
        int maxWidth = 150; //actual image width coming from internet

        int imageHeight = image.getHeight();
        if ( imageHeight > maxHeight )
        imageHeight = maxHeight;
        int imageWidth = (imageHeight*image.getWidth()) // image.getHeight();
        if ( imageWidth > maxWidth ) {
        imageWidth = maxWidth;
        imageHeight = (imageWidth*image.getHeight()) // image.getWidth();
        }
        resizedImage = Bitmap.createScaledBitmap( 
                       image, imageWidth, imageHeight, true);
        }
        return resizedImage;
        }

Answer 3

I have apps that support multiple screen sizes also, and the link that krossovochkin supplied is the best one to use. However with my apps I used the following width sizes which seem to work fine and the resolutions are perfect for what I needed:

ldpi - 75px (120dpi resolution)
mdpi - 100px (160dpi resolution)
hdpi - 150px (240dpi resolution)
xhdpi - 200px (320dpi resolution)

But these all depend on what you are going to be displaying on the buttons NB: Ensure that you scale your buttons DOWN not up!

Alternatively see this device display

Answer 4

You do this wrong. You cannot just put the sane image in all folders - you need to scale it correctly for each bucket. As solution you should i.e. design all your graphics in one target density in mind (i.e. xhdpi) and then scale it down to match bucket requirements. Since scale factor is known you can do this in many ways (also by using tools like: 9patch resizer, FRED, Drawable Resizer or others).

See this Supporting Multiple Screens article on developer site.

Answer 5

Try to use this...

<Button  
android:id="@+id/button5"
android:layout_width="230dip"
android:layout_height="60dip"
android:layout_alignLeft="@+id/textView1"
android:layout_below="@+id/textView1"
android:background="@drawable/a"
android:textColor="#FFFFFF"
android:textStyle="bold" />

Answer 6

You should create images of differents sizes and put them in its corresponding folders, drawable-mdpi, drawable-hdpi etc. You should not modify the values in your xml code. Check the article of developer.android. You need to start at a scale, for example xxxhdpi, and from there scale down your images for densities mdpi, hdpi, xhdpi, xxhdpi.