CODEWITHSUNDEEP
android
Fixpoint
Fixpoint

Reputation: 9850

Prevent background image from stretching the view

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?

Upvotes: 25

Views: 23236

Answers (6)

Alexander Haroldo da Rocha
Alexander Haroldo da Rocha

Reputation: 433

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

Upvotes: 2

JOG
JOG

Reputation: 5640

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.

Upvotes: 0

Mark Pazon
Mark Pazon

Reputation: 6205

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>

Upvotes: 11

Pal Szasz
Pal Szasz

Reputation: 3225

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

Upvotes: 0

Matt
Matt

Reputation: 3847

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.

Upvotes: 0

Macarse
Macarse

Reputation: 93133

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

Upvotes: 0

Related Questions