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...

Solution 1

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.

Solution 2

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.

Solution 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

Solution 4

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?

Solution 5

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

View more solutions