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 background. Why is it so and how to prevent it? It occurs even if the image is 9-patch and has stretchable areas marked - why isn't the image shrunk to the size of the view?

Hmm, not sure but did you try this: http://stackoverflow.com/a/8501398/568508 — Kevin Parker, Feb 09 '12 at 15:25

score 11 · Answer 1 · edited Nov 20 '11 at 14:46

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>

score 2 · Answer 2 · answered Jul 07 '15 at 20:20

2

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

answered Jul 07 '15 at 20:20

Alexander Haroldo da Rocha

423
4
10

3

Code-based solutions are really heavy for something that should be so simple – mix3d May 04 '16 at 14:01

score 0 · Answer 3 · answered Jan 18 '11 at 11:54

0

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

answered Jan 18 '11 at 11:54

Macarse

91,829
44
175
230

Sometimes I just don't know how big view will be (e.g. a balloon with a TextView inside it). – Fixpoint Jan 18 '11 at 12:29

score 0 · Answer 4 · answered Jan 18 '11 at 15:24

0

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.

answered Jan 18 '11 at 15:24

Matt

3,837
26
29

I don't want it to be the original size, I want it to shrink to the size of a view. – Fixpoint Jan 18 '11 at 16:15

score 0 · Answer 5 · answered Oct 27 '11 at 07:39

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 ;-)

score 0 · Answer 6 · answered Dec 14 '11 at 13:33

0

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.

answered Dec 14 '11 at 13:33

JOG

5,590
7
34
54

A background isn't content. Suggesting wrap_content should be affected by the background size is logically inconsistent with the asker's question. [Edit: I'm not saying droid doesn't work that way--clearly it does--but the original question was *why* it works that way and what to do about it, not *whether* it works that way.] – Lisa Feb 25 '14 at 01:26

Prevent background image from stretching the view

6 Answers6

Linked