Question

I have an app widget and in it I’d like to show a scaled down version of my app’s icon in the bottom right. The image’s dimensions are 36×36 and the image looks fine at those dimensions, but I’d like the image to be smaller, around 18×18. However, if I resize the image in a image editor or try to scale the image in code, the image appears distorted.

This is what the image looks normally:

This is the image scaled:

This is the ImageView code I’m using:

<ImageView 
   android:id="@+id/widgetIcon"
   android:src="@drawable/icon"
   android:layout_width="18dp"
   android:layout_height="18dp"
   android:layout_alignParentRight="true"
   android:layout_centerVertical="true"
   android:scaleType="centerCrop"
 />

UPDATE:

I actually have the image in different drawable folders, broken out like this:

drawable-ldpi: 36×36

drawable-mdpi: 48×48

drawable-hdpi: 72×72

drawable-xdpi: 96×96

The device I took the screenshots in is a Galaxy Nexus.

UPDATE 2:

Here is the entire layout that the ImageView is in, if that makes a difference. The widget has RelativeLayout at the bottom that hold the ImageView.

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/widgetLayout"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:padding="@dimen/widget_margin">

    <RelativeLayout
        android:id="@+id/widgetBgLayout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:paddingTop="10dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:background="@drawable/bg_widget"
         >

        <RelativeLayout
            android:id="@+id/widgetStatusLayout" 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_alignParentBottom="true"
            android:paddingTop="10dp"
          >
                <TextView 
                    android:id="@+id/widgetStatus" 
                    style="@style/WidgetStatus"
                    android:layout_centerVertical="true"
                    android:layout_alignParentLeft="true" 
                />

                <ImageView 
                   android:id="@+id/widgetIcon"
                   android:src="@drawable/icon"
                   android:layout_width="18dp"
                   android:layout_height="18dp"
                   android:layout_alignParentRight="true"
                   android:layout_centerVertical="true"
                   android:scaleType="centerInside"
                   android:adjustViewBounds="true"
                 />

            </RelativeLayout>
            <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:layout_above="@id/widgetStatusLayout"       
                    android:layout_alignParentTop="true"
             >      
                    <TextView 
                        android:id="@+id/widgetTitle" 
                        style="@style/WidgetTitle"
                    />

                    <TextView 
                        android:id="@+id/widgetText" 
                        style="@style/WidgetText"
                    />
            </LinearLayout>
    </RelativeLayout>

</FrameLayout>

UPDATE 3

The issue isn’t with the image scaling, it’s the layout above the image is overlapping. Not sure of a solution though.

Answer 1

You should put the image into each of the different drawable folders (hdpi, ldpi, mdpi, xhdpi). This should help. Also, change the android:scaleType to fitCenter.