Prevent background image from stretching the view

Question

Whenever I assign background to a view that is laid out with wrap_content, if the background image is larger than a view, the view is stretched so that it can hold the entire ba

Answer 1

Rather than using a background, you can use a FrameLayout with an ImageView as the first element. Then use android:scaleType="center" so the image won't scale. It will always be it's original size, and centered. Then you can put whatever views you like on top of it in the FrameLayout.

Answer 2

This might be a crazy idea, but how about creating a special nine-patch image like this:

• take the original image
• add 2 pixel border around it (1 pixel border for the 9-patch marking, and 1 pixel empty border)
• mark the empty border as stretchable

This way you will have 2 stretchable areas horizontally, and 2 vertically, which is the empty border. Thus the center of the image (your original image remains unscaled)

Btw, this might not be the best solution, but since the others already listed the nice solutions, I thought I add this one as well ;-)

Answer 3

Why is it so? Because you set the width to wrap_content.

How can you prevent it:

a. Set the maxWidth attribute.

b. Try placing the ImageView with wrap_content inside a Layout that has a fixed width.

c. (I often use TableLayout as its shrinkColumns and stretchColumns attribute are handy for things like this. Maybe this can work for you too.)

Too help more, some XML is needed.

Answer 4

You can use RelativeLayout and create two elements inside it. An ImageView for the Background and another view for your content. Use the android:layout_alignBottom to the the ImageView and set the value to the id of your content view. Also set the scaleType of the ImageView to fitXY.

<RelativeLayout android:id="@+id/relativeLayout1" 
  android:layout_height="wrap_content" 
  android:layout_gravity="center" 
  android:layout_width="fill_parent">

<ImageView android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:scaleType="fitXY"
  android:src="@drawable/chronometer_bg"
  android:id="@+id/imageView_chronometerBackground"
  android:layout_alignBottom="@id/chronometer" />

<Chronometer android:text="Chronometer"
      android:id="@+id/chronometer" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_centerHorizontal="true"
      android:textSize="32sp"
      android:gravity="center" />

</RelativeLayout>

Answer 5

Either override the methods getSuggestedMinimumWidth and getSuggestedMinimumHeight of your layout view or the methods getMinimumWidth and getMinimumHeight of your background drawable to achieve that.

Answer 6

You can try setting the width and height to something like 60dp instead of wrap_content and use android:scaleType.