Question

I am troubled by how the Android OS is handling resizing on an app of mine. Basically I have a background image that is 480×800 (so 480px wide) and an image that goes at the bottom, also 480px wide.

On the Galaxy S (480×800 screen) everything looks fine, as shown below:

On the Galaxy S3 (720×1280), however, the background is getting stretched to 720px wide but the image at the bottom only to 640px wide, as shown below:

I tried to create a xhdpi folder with 640×960 images, but same thing happens (background stretched to 720px, image only to 640px). I also tried to play with “ScaleType”, but no luck so far.

Does anyone know why the OS would re-size the two images with a different scale, and how to fix it?

Here’s the XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="@drawable/bg" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/significados"
        android:layout_gravity="center"
        android:layout_marginTop="216dp"
        android:onClick="goToSignificados"
        />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ranking"
        android:layout_gravity="center"
        android:onClick="goToRanking"
        />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/engracados"
        android:layout_gravity="center"
        android:onClick="goToEngracados"
        />

    <ImageView
        android:id="@+id/iv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:clickable="true"
        android:contentDescription="@string/image"
        android:onClick="goToMarket"
        android:src="@drawable/googleplay" />

</LinearLayout>

Answer 1

You’ll have to post your XMLs to get a more specific answer but basically all “Views” may handle image scaling differently.

In your example,

You can make your button stretch all the way by using width = match-parent.

“Backgrounds” will stretch by default, but can also tile.
“Buttons” will have a min size of the background size but will stretch when needed (button has too much text)

As a side note, you shouldn’t depend on the exact pixels of the images. You should look into nine-patch or making tiled backgrounds and make sure you take advantage of things like “match-parent, gravity, etc.”