What is the best way to have a background image without it becoming distorted/stretch on various screens?

Question

I would like to place an image into the background of my activities. This image is effectively a circle shaped logo which will be semi-transparent, and should sit behind any other content on the UI. I will also offset it into the bottom corner.

What is the best way I can place this image without it become "squashed" (egg shaped) under varying screen dimensions? My app will operate in portrait mode only.

This is what I'm trying to achieve:

enter image description here

So far, I've placed my circle image onto 3 white rectangle canvases for the popular sized screens 480x854, 320x480 and 240x320 which seems to work, but I don't think its very solid.

Any tips?

possible duplicate: http://stackoverflow.com/questions/3944080/android-avoid-scaling-of-background — bigstones, Apr 16 '11 at 20:49

Kevin Coppock · Accepted Answer · 2011-04-16T23:38:05.337

This probably is not the perfect solution, and will require a bit of maintenance on the UI, but here's my thought:

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginRight="-15dp"
        android:layout_marginBottom="-15dp"
        android:src="@drawable/circle"
        />
    <!--Rest of Layout goes here-->
</FrameLayout>

Just wrap this around your current layout, and adjust the right and bottom margins to whatever negative margins you wish for the offsetting. This should work for any screen size, assuming you have drawables for each density.

EDIT: Yeah, you also shouldn't have to worry about a white rectangle this way, either. Just add the android:background tag to the FrameLayout with whatever color you want for the background, and save the logo as a transparent PNG.

Thanks, you're solution works for me, other than using layout_width twice ;) — Jimmy, Apr 16 '11 at 22:43

score 1 · Answer 2 · answered Apr 16 '11 at 21:38

I would do it like this, use a relative layout to have an ImageView in the background with on top of that a relative layout containing the rest of your layout

This way the image is as big as it can be keeping the correct dimensions

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:scaleType="centerInside"
        android:src="@drawable/splash_picture"/>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal">
        <!-- rest of your layout -->
    </LinearLayout>
</RelativeLayout>

What is the best way to have a background image without it becoming distorted/stretch on various screens?

2 Answers2