Image in background without resizing the parent layout

Question

I've got a linear layout with layout_height set to wrap_content, so that the layout height is depending of the number of text lines in it.

The problem (that has driven me crazy all morning) is that I want to set an image as background of the layout, but to be sure the image can be used whatever the layout size, I've made the image quite big in height. The goal is for the image to be cropped in height if the layout is small. But I can't manage to do that: whatever I try, the layout is resizing according to the image height.

So, how can I set an image as background of something, but cropping itself so that it doesn't reisze parent layout (of course, I don't know the parent layout size because it depends on the text inside).

As english is not my first language, hope my question is clear...

Thank you in advance.

Edit: some code sample and screenshots:

This is the original card, without the image in background.

Original

This is the code with the image view added:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/drill_background_img" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

    ... [Card Content Here]

    </LinearLayout>

</FrameLayout

... and the result is my card is stretched to the height of my image. But I don't want that. I want the card the same size. But I cannot reduce image height, because, the card can have more text and be more tall, and so my image will have to be taller.

enter image description here

It would be helpful, if you post any screenshot ant layout xml file here. — Mukesh Kumar Singh, Dec 11 '13 at 11:13
I've tested with a lot of different combinations, so I don't have juste one layout to show. But ok, I will edit the code above and post an example that doesn't works. — Stéphane, Dec 11 '13 at 21:59

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

This is code for a Linear Layout that will be in center and adapt the size of text inside. I have tested it .

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:orientation="vertical"
    android:layout_centerHorizontal="true"
    android:layout_marginLeft="25dp"
    android:layout_marginRight="25dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tvInfo"
        android:textColor="#ffffff"
        android:background="@drawable/toast_frame"
        android:gravity="center" />
</LinearLayout>

Give it a try it should work. Here I am using an Image that is small enough to fit the smallest size. Android will automatically strech it. I use 9patch Images for such cases. To know more about 9patch visit this Link from developer.android.com

Simple online tool to generate 9patch Also check this SO Answer

I have uploded toast_frame.9.png file here so that you can test it with the code I have given above
**EDIT ** change

<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/drill_background_img" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

... [Card Content Here]

</LinearLayout>

</FrameLayout>

to

<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/drill_background_img">


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

... [Card Content Here]

</LinearLayout>

</FrameLayout>

I hope this will work.

edited May 23 '17 at 11:49

Community

1
1

answered Dec 11 '13 at 11:27

dmSherazi

3,743
5
37
62

Thank you for your answer, but If I understand correctly, that doesn't have anything to do with my problem. See the edited code above. My image can't be a 9 patch, and the card can be big, so the image must be big. – Stéphane Dec 11 '13 at 22:15
@Stéphane please check my edited Answer above and let me know if it helped! – dmSherazi Dec 12 '13 at 06:41
Thank you very much for your answer. Unfortunately, it doesn't change anything. I also tried to wrap it in a bitmap: `` ... but it didn't helped. – Stéphane Dec 12 '13 at 08:48
@Stéphane can u share ur image file and complete xml file ? I will try it on my macheine ! – dmSherazi Dec 12 '13 at 08:54
Thank you very much, here it is: https://drive.google.com/file/d/0BzsoqeEYohJrUWR2b1piNWtQV00/edit?usp=sharing – Stéphane Dec 12 '13 at 09:20
@Stéphane send the styles.xml as well please – dmSherazi Dec 12 '13 at 14:11
Sorry, I made a mistake and added the wrong file, I updated the .rar, you can download it again. – Stéphane Dec 12 '13 at 21:33
@Stéphane your files are still incomplete . – dmSherazi Dec 14 '13 at 11:45
@Stéphane try my further edidted answer – dmSherazi Dec 14 '13 at 11:46
Thank you. But nope, same thing, the card is stretched... What do you mean my files are still incomplete? If think everything is here. What do you miss? – Stéphane Dec 14 '13 at 22:27
if its just streched you can change `android:background="@drawable/drill_background_img">` to `android:src="@drawable/drill_background_img">` – dmSherazi Dec 15 '13 at 09:04
can u please check the files u sent last time , its missing card_active.png and card.png in the drawable folder – dmSherazi Dec 15 '13 at 09:58
all images are missing from drawable folder, so I cant help without them – dmSherazi Dec 15 '13 at 10:07
I updated the .rar file with the missing .png files, but they are just some 9 patches for the card background, the problem is similar with or without them. But they are now in the archive :) – Stéphane Dec 15 '13 at 12:19

score 0 · Answer 2 · answered Dec 11 '13 at 11:18

I don't think you can crop the image when using it as "background" attribute for any view. Image will always be stretched to fill the whole background. Normally for background you should use Nine Patches. Get familiar with it and maybe you can change your functionality or UI spec to use them instead of normal images. The only way I know of cropping the image is in the ImageView and it's image set by "src", not "background".

I would generally avoid using fixed size images in the components that can change size. You also have to remember that in Android almost everything change size when you think about different orientations, screen sizes, screen densities.

score 0 · Answer 3 · answered Dec 11 '13 at 11:20

I think that background is always resized to fit container size. But you can use FrameLayout or RelativeLayout and ImageView.

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:clipChildren="true">
    <ImageView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />
    <LinearLayout
       android:layout_width="wrap_content"
       android:layout_height="wrap_content">
       ...your content here...
    </LinearLayout>
</RelativeLayout>

Image in background without resizing the parent layout

3 Answers3