Clever Geek Handbook

Gradient background that doesn't scale

I need to create a gradient with a height of 230dp (i.e. not the whole screen) and the rest of the screen will be solid. I can't figure out how to do this - everything I try ends up expanding the gradient to fill the entire 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>

Then I apply this drawable as the background for the 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 entire screen.

I have tried using PNG for the background, but I am getting the stripe problems described here and the fixes haven't worked for me yet.

+3


source to share


3 answers


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


+3


source


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 ran into was that your layout had fill_parent

a height.



Hope this helps you.

Good luck Arkde

+1


source


Here's my solution using 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>
0


source






More articles:


All Articles