Scale background image in LinearLayout

Question

I'm having the following problem;

I have a LinearLayout with in it a ScrollView, in the ScrollView is some custom view. Now I want to put an image in the background of the LinearLayout and keep the image in its original size. But when I set the background property of the LinearLayout it stretches to fit the full screen. How can I make it so that the image keeps its original size?

My xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/root"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:background="@drawable/some_drawable">
  <ScrollView
    android:id="@+id/scrollview"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:fillViewport="true">
    <some.custom.layout
        android:id="@+id/mainLayout"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        />
  </ScrollView>
</LinearLayout>

Seeing some people upvoting this question every now and again (thanks for that!) but would like to put a disclaimer here that this question is now 9 years old and a lot has happened in the Android world. It is very likely that there are better ways to solve this problem by now! — Joris, Mar 22 '21 at 16:38

score 28 · Answer 1 · edited Dec 11 '15 at 00:17

Code example for Egor's answer:

<FrameLayout
    android:id="@+id/FrameLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    >

    <ImageView 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/background"
        />

    <LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >

    </LinearLayout>

</FrameLayout>

score 21 · Accepted Answer · answered Apr 29 '11 at 20:26

21

Try using FrameLayout with an ImageView and LinearLayout inside. For example, try changing the alpha of the image and move it to foreground in your FrameLayout, thus the LinearLayout stays on background. Hope this helps!

answered Apr 29 '11 at 20:26

Egor

39,695
10
113
130

2

This works well, but a more elegant solution I think, can be found here: http://stackoverflow.com/questions/2781593/background-image-placement – iganev Oct 08 '13 at 11:52

Ahamadullah Saikat · Answer 3 · 2018-09-10T16:40:07.203

<RelativeLayout
    android:id="@+id/relLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.AppCompatImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/layoutLogin"
        android:layout_alignLeft="@id/layoutLogin"
        android:layout_alignRight="@id/layoutLogin"
        android:layout_alignTop="@+id/layoutLogin"
        android:adjustViewBounds="true"
        android:background="@mipmap/ic_photo_bg"
        android:scaleType="fitXY" />

    <LinearLayout
        android:id="@+id/layoutLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
    </LinearLayout>

</RelativeLayout>

score 1 · Answer 4 · answered Apr 29 '11 at 15:29

1

Alternatively to ColdForged's suggestion, you could move from LinearLayout to RelativeLayout and use ImageView to show the image instead of changing background to it. The views in RelativeLayout can interfere unlike in LinearLayout.

answered Apr 29 '11 at 15:29

ernazm

9,208
4
44
51

I've tried this, but how do I draw the content of the ScrollView over the image view so that the image is the background? – Joris Apr 29 '11 at 15:34
1

Maybe by setting alpha for scrollview background – ernazm Apr 29 '11 at 15:37

score 0 · Answer 5 · answered Apr 29 '11 at 15:26

0

You might take a look at the InsetDrawable. Either that or it would likely require you to subclass your layout to draw the way you wish as the background element doesn't have the ability you need.

answered Apr 29 '11 at 15:26

Brian Dupuis

8,136
3
25
29

Scale background image in LinearLayout

5 Answers5

Linked