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!

Squatting Bear · Answer 1 · 2013-07-23T04:57:00.600

73

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>

edited Jul 23 '13 at 04:57

answered Feb 05 '13 at 03:29

Squatting Bear

1,644
14
12

13

this worked with a few modifications for me. - used ImageView instead of View - added android:scaleType="fitXY" to the ImageView – kev Feb 04 '14 at 14:55
4

For people that don't want to loose 10 minutes, for referencing view that is declared after, you need to add a `@+id/` instance of `@id/` for creating the ID. – Kevin Robatel Jul 26 '16 at 10:02

score 3 · Answer 2 · answered Sep 14 '12 at 08:42

3

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

answered Sep 14 '12 at 08:42

Umair

1,206
1
13
28

6

For me, it just not works, because ImageView is bigger than its container :( – richardaum Apr 01 '15 at 14:30
You can define the size of ImageView... and use scaleType to fit the image accordingly – Umair Apr 07 '15 at 03:37

Zeus Monolitics · Answer 3 · 2013-02-05T13:24:27.517

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!

score 1 · Answer 4 · answered Apr 24 '12 at 17:40

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"

score 0 · Answer 5 · answered Jan 22 '11 at 00:58

0

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.

answered Jan 22 '11 at 00:58

jsonfry

2,067
2
15
16

Thanks for the suggestion. I've tried playing with the layout_gravity parameter on both the ImageView & the RelativeLayout, but haven't had much luck. I've tried both "clip" & "fill" options, along with various combinations of them and the other positioning values, and none of them seem to have had any effect. Do you remember what specific gravity values you used? – bjg222 Jan 22 '11 at 03:13

score 0 · Answer 6 · answered Nov 21 '19 at 12:53

Simplest solution:

ic_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@android:color/white" />

    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/ic_background_image" />
    </item>

</layer-list>

& Then

android:background="@drawable/ic_background"

score 0 · Answer 7 · answered Feb 04 '12 at 00:50

0

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.

answered Feb 04 '12 at 00:50

Skyler Lauren

3,792
3
18
30

I tried this and for my situation, it didn't work. The view group was still resized to contain the background image. – greg7gkb Feb 06 '12 at 18:58

score -1 · Answer 8 · answered Sep 01 '12 at 09:35

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>

score -2 · Answer 9 · answered Apr 30 '12 at 19:58

-2

You can use this:

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

Hope it helped)))

answered Apr 30 '12 at 19:58

UnknownJoe

599
5
14
30

Scale background image to wrap content of layout

9 Answers9

Linked