Gradient Background that doesn't scale

Question

I need to create a gradient that is 230dp high (i.e., not the whole screen), with the rest of the screen a solid color. I can't figure out how to do this -- everything I try ends up with the gradient expanding to fill the whole screen. My current XML looks like this:

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

    <item android:top="230dp">
        <shape android:shape="rectangle" >
            <color android:color="#333333" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <gradient
                android:angle="270"
                android:endColor="#333333"
                android:startColor="#D9D9D9"
                android:type="linear" />

            <size android:height="230dp" />
        </shape>
    </item>

</layer-list>

I then apply that drawable as the background to my LinearLayout in XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#333333" >
    <LinearLayout
        android:id="@+id/container"
        android:orientation="vertical"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:background="@drawable/grey_gradient_bg" >

        <!-- a bunch of content, buttons, etc. -->

    </LinearLayout>
</LinearLayout>

But the gradient expands to fill the whole screen.

I have tried using a PNG for the background, but I get the banding problems described here, and the fixes haven't helped me yet.

If your LinearLayout is a child of another layout then maybe parent is not stretching as you expecting. You should provide the whole layout xlm to let us analyze it. — woodshy, Mar 13 '12 at 16:08

score 3 · Accepted Answer · answered Mar 13 '12 at 16:10

3

Use a RelativeLayout instead of a LinearLayout
Instead of using your gradient as a background of the main container of the layout, add a child View, set the height explicitly to the size you want (230dp), and set the background of that view to your gradient.

answered Mar 13 '12 at 16:10

Rich

34,878
31
108
151

1

Ah, I get it now. I can have a _separate_ RelativeLayout that does nothing but hold my gradient background, and is set to an explicit height. Then my content can live in a LinearLayout, and both can be set to layout_alignParentTop="true" to solve the problem. – matt Mar 13 '12 at 16:48

score 2 · Answer 2 · answered Jul 26 '18 at 21:58

If your project doesn't require API < 21 you may set the size of your gradient directly in your drawable, like that:

 <item android:height="230dp">
    <shape android:shape="rectangle" >
        <gradient
            android:angle="270"
            android:endColor="#333333"
            android:startColor="#D9D9D9"
            android:type="linear" />
    </shape>
</item>

Anyway, to support API < 21 without this behavior, you may add this drawable and then, another drawable with the same name in the drawable-v21, but it without android:height="230dp".
Setting height in gradient tag or size really doesn't work.

Aurelian Cotuna · Answer 3 · 2012-03-13T16:47:36.160

1

Something like this might help you :)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="fill_parent"
   android:layout_height="320dip"
   android:orientation="vertical"
   android:background="@drawable/grey_gradient_bg">
</LinearLayout>

The problem you encountered was because your layout had fill_parent on height.

Hope this will help you.

Good luck, Arkde

edited Mar 13 '12 at 16:47

answered Mar 13 '12 at 16:24

Aurelian Cotuna

2,988
3
25
47

The problem is that my LinearLayout needs to expand to contain the content, which is a full screen tall. – matt Mar 13 '12 at 16:40
Well your parent `LinearLayout`, having background `android:background="#333333"`, will fill the whole screen, but If I understand your question, you want only part of the screen to contain the gradient and that is 320dp tall. And to do that you just set the height of your `android:id="@+id/container" ` to 320dp. Am I right? Or I misunderstood your question? – Aurelian Cotuna Mar 13 '12 at 16:46
(That wasn't clear from my original question because I left out the content in the LinearLayout.) – matt Mar 13 '12 at 16:48
Our comments got crossed there...I had the content all inside my `android:id="@+id/container"` which needed to expand to fill the screen. I think from your answer and Rich's answer I'm understanding what I need to do now. – matt Mar 13 '12 at 16:50

score 0 · Answer 4 · answered Mar 13 '12 at 16:58

Here's my solution using the other answers:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#333333" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="230dp"
        android:background="@drawable/grey_gradient_bg"
        android:layout_alignParentTop="true" />

    <LinearLayout
        android:id="@+id/container"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:layout_alignParentTop="true" >

    <!-- all the content -->
    </RelativeLayout>
</RelativeLayout>

grey_gradient_bg is now simple:

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

    <gradient
        android:angle="270"
        android:endColor="#333333"
        android:startColor="#D9D9D9"
        android:type="linear" />

</shape>

Gradient Background that doesn't scale

4 Answers4

Linked