Setting a background image to a view stretches my view

Question

I created a background image bitmap for a view and now the view is being stretched to the size of the background image....

is this normal?

<?xml version="1.0" encoding="utf-8"?>
    <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
        android:src="@drawable/green"
        android:tileMode="repeat"/>

here's how I apply it to my view

v.setBackgroundResource(R.drawable.backgroundgreen);

for instance...

if the image is 500px in height and the view is 200px in height(being set wrap_content as height) after setting the image as background my view becomes 500px in height...

Answer 1

I have faced this same problem.

If the background image has a size that is bigger than the view's size, the view's size will change to match the image's size.

Solution

---

1. Put the view inside a Relative Layout.
2. Remove the background image.
3. Add an ImageView before the View inside the Relative Layout

4. Set the src of the ImageView to your background image

   <RelativeLayout
       .
       .
       . >
   
       <ImageView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_alignLeft="@+id/yourViewId"
           android:layout_alignRight="@+id/yourViewId"
           android:layout_alignTop="@+id/yourViewId"
           android:layout_alignBottom="@+id/yourViewId"
           android:adjustViewBounds="true" 
           //this will allow the image to resize with same proportions
           android:src="@drawable/yourDrawable" />
   
       <YourView
           android:id="@+id/yourViewId"
           .
           ..
           ... />
   
     </RelativeLayout>
   

---

This all can be done in code of course.

Answer 2

According to me, the problem you are facing is not a problem, it is the way how Android is used to design the layouts.

This means that you can set the height and width with 3 default constant values:

FILL_PARENT
Special value for the height or width requested by a View. FILL_PARENT means that the View wants to be as big as its parent, minus the parent's padding if any. This value is deprecated starting in API Level 8 and replaced by MATCH_PARENT.

MATCH_PARENT
Special value for the height or width requested by a View. MATCH_PARENT means that the view wants to be as big as its parent, minus the parent's padding if any. Introduced in API Level 8.

WRAP_CONTENT
Special value for the height or width requested by a View. WRAP_CONTENT means that the View wants to be just large enough to fit its own internal content, taking its own padding into account.

Now, when you are setting the View's height/width to WRAP_CONTENT, you are allowing the view to take that much size that is sufficient to show to view's content. The background image is also the View's content, hence you view will be shown of as much size as the image. That's not a problem, that's how it's shown.

Okay, but in your situation that's an issue for you because you have a background to show and view should not be stretched for that. I can suggest few ways:

1. First and very obvious: make correctly sized images and keep them in different drawable folders.

2. Specify the size of view not using constants, but in DP. If it becomes necessary, make different layout XML files for different sizes and keep them in layout folders.

3. You can use a very useful thing for design layout is layout weight.

Answer 3

I suggest to create a wrapper layout and put the background image in there. i'm using it that way and fits very nicely. see example below

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/settingstab_scroll"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:scrollbars="vertical"
    android:background="@drawable/wareninja_wallpaper_img"
    >
<!-- your layouts and components goes here -->
</ScrollView>

...
Social Coding @ AspiroTV

Answer 4

The reason is quite simple. You gotta see the View::getSuggestedMinimumWidth/Height method.

protected int getSuggestedMinimumWidth() {
    return (mBackground == null) ? mMinWidth : max(mMinWidth, mBackground.getMinimumWidth());
}

protected int getSuggestedMinimumHeight() {
    return (mBackground == null) ? mMinHeight : max(mMinHeight, mBackground.getMinimumHeight());
}

Seeing that, you may know why the background makes a view bigger, especially why assign a BitmapDrawable to it.

and the simple solution is to wrap that Drawable (eg. BitmapDrawable), then returns 0 for getMinimumHeight() and getMinimumWidth(), and better to override getIntrinsicHeight() and getIntrinsicWidth() to returns -1.

support-v7 has a DrawableWrapper which delegates calls to another drawable when necessary. you can extends that one and override methods talked above.

and if you don't use support-v7 (WoW! you are awesome), copy that class to your project is also fine.

https://android.googlesource.com/platform/frameworks/support/+/1949ae9aeaadf52ad7bd7bb74ca5419c67ea7f65/v7/appcompat/src/android/support/v7/internal/widget/DrawableWrapper.java

Answer 5

It's working for me.

< ?xml version="1.0" encoding="utf-8"?>
 < LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="@+id/LinearLayoutTest">    

@Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.prueba);


    ((LinearLayout)findViewById(R.id.LinearLayoutTest)).setBackgroundResource(R.drawable.greenrepeat);
}

in your code, what is v? It has params to fill_parent?

Answer 6

One good solution that is working perfectly in my case is extending the View and overriding onMeasure().

Here is the steps to do:

1. Create an own class and extend the View you want to use, here for example I will use Button.
2. Override the method onMeasure() and insert the code at the bottom. This will set the background resource after the first measure has been done. For the second measure event, it will use the already measured paramters.

Example code for a custom view which extends Button (change Button to the View you would like to extend)

public class MyButton extends Button {

    boolean backGroundSet = false;

    public MyButton(Context context) {
        super(context);
    }

    public MyButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);          
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        if(backGroundSet) {
            setMeasuredDimension(getMeasuredWidth(), getMeasuredHeight());
            return;
        }

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        backGroundSet = true;
        setBackgroundResource(R.drawable.button_back_selector);

    }
}

The only thing to change here is the type of view you want to extend and in the onMeasure() method the background resource you want to use for the view.

After that, just use this view in your layout xml or add it programatically.

Answer 7

I modify Sherif elKhatib's code, now this works for me:

1. if we want background picture be stretched as view picture:

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
   
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignStart="@+id/yourViewId"
                android:layout_alignTop="@+id/yourViewId"
                android:layout_alignEnd="@+id/yourViewId"
                android:layout_alignBottom="@+id/yourViewId"
                android:scaleType="fitXY"
                android:src="@drawable/bg_very_big_picture" />
   
            <LinearLayout
                android:id="@+id/yourViewId"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
   

2. if we want background picture not to be stretched, but to be cutted to fit view picture:

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
   
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignStart="@+id/yourViewId"
                android:layout_alignTop="@+id/yourViewId"
                android:layout_alignEnd="@+id/yourViewId"
                android:layout_alignBottom="@+id/yourViewId"
                android:scaleType="centerCrop"
                android:src="@drawable/bg_very_big_picture" />
   
            <LinearLayout
                android:id="@+id/yourViewId"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
   

Answer 8

Don't use android:tileMode="repeat". Is your green drawable bigger or smaller than your view? Could add more details?