Scaling down PNG images for android buttons become blurry

Question

I am trying to scale an image down from 109x105 to 48x48 to make a button background. I have done the scaling in photoshop and the image is a vector.

However when I run it on my phone the smaller image comes out blurry. The large image is perfect and I can load that onto the phone with no problems so the quality loss. I must mention there is some text in the image too where the blurriness is quite obvious.

I have attempted to use the 9 patch drawable, making the whole image stretchable. I can't seem to find any answer on line that addresses this issue precisely so any input would be useful.

My question is, how do I scale the PNG image down without losing quality? Is this something I can do before I copy the image into my drawable folder or is it something I can let android do automatically.

Edit: The issue is evident in the 3 buttons near the end of the code "@drawable/map" "@drawable/block_small" and "@drawable/share"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/expandable_deal_back_white"
    android:orientation="horizontal"
    android:padding="8dp" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="23dp"
        android:contentDescription="@string/logo_content_description"
        android:maxHeight="100dp"
        android:maxWidth="100dp"
        android:minHeight="100dp"
        android:minWidth="100dp"
        android:scaleType="fitXY"
        android:src="@drawable/food_selector" />

    <LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="23dp"
            android:background="@drawable/button_selector_new"
            android:padding="8dp"
            android:text="@string/tandc"
            android:textColor="@drawable/button_text_selector_new" />

        <RelativeLayout
            android:id="@+id/RelativeLayout1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp" >

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginLeft="4dp"
                android:layout_marginRight="4dp"
                android:background="@drawable/map"
                android:text="@string/empty" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_toRightOf="@+id/button2"
                android:background="@drawable/block_small"
                android:text="@string/empty" />

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_toLeftOf="@+id/button2"
                android:background="@drawable/share"
                android:text="@string/empty" />

        </RelativeLayout>

    </LinearLayout>

</LinearLayout>

Tried increasing the DPI to 160 too but that didn't make a difference. — contool, Sep 20 '12 at 14:54

score 0 · Answer 1 · answered Sep 18 '12 at 17:18

0

how do I scale the PNG image down without losing quality?

You don't. By definition a smaller (by pixel count) image has less data.

That said, there are a couple of things you want to check to ensure the blurriness is due to loss of image quality and not some other factor. Does the small image look fine on your computer? Have you made sure you are putting the images in the correct drawable folders?

answered Sep 18 '12 at 17:18

kabuko

36,028
10
80
93

Thanks for the reply - yes the small image seems fine on my PC - although it has a higher res screen than my phone. The image is a basic circle with an X in the middle so not very complex and even at 48x48 should be crisp. I am putting the image in the mdpi folder and viewing on an mdpi phone. – contool Sep 19 '12 at 15:16
Could you post your XML layout file as an edit in your post so that we can see how you're using this drawable? – kabuko Sep 19 '12 at 17:12

Scaling down PNG images for android buttons become blurry

1 Answers1