Question

I was reading on the Android documentation page for Supporting Multiple Screens, and it states:

“By default, Android scales your bitmap drawables (.png, .jpg, and .gif files) and Nine-Patch drawables (.9.png files) so that they render at the appropriate physical size on each device.”

---

“The system scales drawable resources to the appropriate size, based on the current screen density, if necessary.”

Lately, we’ve been adding tablet-functionality to our application. In landscape mode (and for portrait too, but I’ll use landscape as an example), we have an image with text on the left side of the screen, and a button on the right. Simple. When developing this XML layout, I get this image (in the Graphical Layout part of Eclipse’s XML editor) of what to expect when running the application on my 10″ tablet:

However, when I run my application on my Acer Iconia A200, I get something more like this screenshot:

In fact, the “image” you see in the 2nd screenshot looks almost identical, if not exactly identical, to the size of the image I see on our Android 2.2 MyTouch phone.

Thus, my question is, why would Android not be re-sizing the image as it shows in the graphical layout of the XML editor (like in the first screenshot?)

Things I’ve tried:

• I’ve added the drawable image, scaled appropriately, to each drawable-_ _ _ _ folder. Still, the image appeared the same.
• I’ve added the image to just ldpi, hoping it would scale up for a higher resolution tablet – it did not.
• I currently have that single image in the drawable folder (no extensions). Still, the same behavior persists.

Any suggestions?

---

EDIT:

Code:

<LinearLayout
    android:id="@+id/leftLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/ImageViewLogo"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:layout_marginTop="10dp"
        android:background="@android:color/transparent"
        android:contentDescription="@+string/logo"
        android:scaleType="fitCenter"
        android:src="@drawable/logo_red" />

    <RelativeLayout
        android:id="@+id/layoutBelowImage"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:gravity="center" >

        ... 4 TextViews here...

    </RelativeLayout>
</LinearLayout>

Answer 1

Use one of the fit scaleTypes on your ImageView. In this case you may wish to use fitCenter to maintain the aspect ratio.

There are still some inconsistencies between the emulator and real devices.

To avoid using wrap_content yet maintaining the aspect ratio of the ImageView (with fitCenter), you can try a few things:

• Set it to fill_parent. Use weights in a LinearLayout (it is advisable to avoid nested weights but not critical).
• Set it to fill_parent. Make proper use of layout_above and layout_below.
• Create a custom view that extends ImageView and sets the correct aspect ratio in OnMeasured.
• Set a fixed width and height dp (the easiest).