Scale background image to wrap content of layout

Question

I have a layout that contains some text fields and has a background image that's displayed at the top of my activity. I'd like the background image to scale to wrap the content (don't care about aspect ratio). However, the image is larger than content, so the layout instead wraps the background image. Here's my original code:

<RelativeLayout 
    android:layout_width="fill_parent"
    android:id="@+id/HeaderList" 
    android:layout_gravity="top"
    android:layout_height="wrap_content" 
    android:background="@drawable/header">
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content" 
        android:id="@+id/NameText"
        android:text="Jhn Doe" 
        android:textColor="#FFFFFF"
        android:textSize="30sp" 
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" 
        android:paddingLeft="4dp"
        android:paddingTop="4dp" 
    />
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content" 
        android:textColor="#FFFFFF"
        android:layout_alignParentLeft="true"
        android:id="@+id/HoursText"
        android:text="170 hours" 
        android:textSize="23sp"
        android:layout_below="@+id/NameText" 
        android:paddingLeft="4dp" 
    />
</RelativeLayout>

After searching through some other questions, I found these two:

How to wrap content views rather than background drawable?

Scale a Drawable or background image?

Based on this, I created a FrameLayout w/ an ImageView showing the background. Unfortunately, I still can't get it to work. I want the height of the background image to shrink/expand w/ the size of the text views, but with the FrameLayout, the ImageView fits to the size of it's parent, and I can't find a way to make the parent fit to the size the text view layout. Here's my updated code:

<FrameLayout 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

    <ImageView android:src="@drawable/header"
        android:layout_width="fill_parent" 
        android:scaleType="fitXY"
        android:layout_height="fill_parent" 
        />
    <RelativeLayout 
        android:layout_width="fill_parent"
        android:id="@+id/HeaderList" 
        android:layout_gravity="top"
        android:layout_height="wrap_content"
        >
        <TextView 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content" 
            android:id="@+id/NameText"
            android:text="John Doe" 
            android:textColor="#FFFFFF"
            android:textSize="30sp" 
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true" 
            android:paddingLeft="4dp"
            android:paddingTop="4dp" 
            />
        <TextView 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content" 
            android:textColor="#FFFFFF"
            android:layout_alignParentLeft="true" 
            android:id="@+id/HoursText"
            android:text="170 hours" 
            android:textSize="23sp"
            android:layout_below="@+id/NameText" 
            android:paddingLeft="4dp" 
            />
    </RelativeLayout>
</FrameLayout>

Does anybody have any suggestions for how best to make an image scale to the size of the contents of some layout? I'm not concerned with the aspect ratio of the image, as it won't matter, I just want it to fill the background.

Thanks!

Answer 1

I had the same problem (I think), and the only solution I could find was this:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <View
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/some_image"
        android:layout_alignTop="@+id/actual_content"
        android:layout_alignBottom="@id/actual_content"
        android:layout_alignLeft="@id/actual_content"
        android:layout_alignRight="@id/actual_content"
        />

    <LinearLayout
        android:id="@id/actual_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        >

       <!-- more stuff ... -->

    </LinearLayout>

</RelativeLayout>

Answer 2

You may try this trick,

• FrameLayout (wrapcontent, wrapcontent)
• • ImageView (match parent, match parent) // its your background
• • LinearLayout (wrapcontent, wrapcontent)
• • • All your contents goes inside this linear layout or any other type what ever you want

Answer 3

Work with RealtiveLayout (no mandatory but instead of FrameLayout and use android:scaleType="fitXY". Move the imageView to RealtiveLayout which contains the textviews android:id="@+id/HeaderList" and unset the background android:background="@drawable/header" at this level.

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
         android:id="@+id/principal"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:background="@drawable/header" >

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


         <ImageView
             android:id="@+id/backImg"
             android:layout_width="fill_parent"
             android:layout_height="fill_parent"
             android:layout_centerInParent="true"
             android:adjustViewBounds="true"
             android:background="@color/blancotransless"
             android:src="@drawable/header"
             android:scaleType="fitXY" >
         </ImageView>

             <TextView 
                 android:layout_height="wrap_content"
                 android:layout_width="wrap_content" 
                 android:id="@+id/NameText"
                 android:text="John Doe" 
                 android:textColor="#FFFFFF"
                 android:textSize="30sp" 
                 android:layout_alignParentLeft="true"
                 android:layout_alignParentTop="true" 
                 android:paddingLeft="4dp"
                 android:paddingTop="4dp" 
                 />
             <TextView 
                 android:layout_height="wrap_content"
                 android:layout_width="wrap_content" 
                 android:textColor="#FFFFFF"
                 android:layout_alignParentLeft="true" 
                 android:id="@+id/HoursText"
                 android:text="170 hours" 
                 android:textSize="23sp"
                 android:layout_below="@+id/NameText" 
                 android:paddingLeft="4dp" 
                 />
         </RelativeLayout> 
      </RelativeLayout>

More or less it should work!

Answer 4

Create a drawable xml, say mybackground.xml

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

Then in your RelativeLayout in the first code snippet use

android:background="@drawable/mybackground"

Answer 5

I think I've done something similar to this in the past, try playing with the gravity setting in your image view, I think one of them should do what you're after.

Answer 6

I have not tried it, but if you set the background image dynamically on the onCreate that might work. The size of the layout should already be set.

Answer 7

You can use this:

<ImageView
...
android:scaleType="fitXY"
>

Hope it helped)))

Answer 8

Try this code.....

<LinearLayout 
   android:layout_width="fill_parent"
   android:id="@+id/HeaderList" 
   android:orientation="vertical"
   android:layout_gravity="top"
   android:layout_height="wrap_content" 
   android:background="@drawable/header">
<TextView 
    android:layout_height="wrap_content"
    android:layout_width="wrap_content" 
    android:id="@+id/NameText"
    android:text="Jhn Doe" 
    android:textColor="#FFFFFF"
    android:textSize="30sp" 
    android:paddingLeft="4dp"
    android:paddingTop="4dp" 
/>
<TextView 
    android:layout_height="wrap_content"
    android:layout_width="wrap_content" 
    android:textColor="#FFFFFF"
    android:id="@+id/HoursText"
    android:text="170 hours" 
    android:textSize="23sp" 
    android:paddingLeft="4dp" 
/>
</LinearLayout>