Creating a drawable rectangle in xml with one gradient on the top half and another on the bottom half

Question

I'm trying to create a drawable in xml, a rectangle with one gradient on the top half, and another on the bottom half. This is NOT the way to do it, apparently:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
                <gradient
                        android:startColor="#5a5a5a88"
                        android:endColor="#14141488"
                        android:angle="270" android:centerX="0.25"/>

        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" android:top="80px">
                <gradient
                        android:startColor="#5aff5a88"
                        android:endColor="#14ff1488"
                        android:angle="270" android:centerX="0.25"/>

        </shape>
    </item>
</layer-list>

How can I do this, preferably in a way that makes it stretchable to any height?

Answer 1

If your goal is to have a gradient with a central color (starts at color A, transitions to B in the middle, then transitions to C at the end), add android:centerColor and android:centerY attributes to one of your <shape> elements and nuke the other. You can do the three-color gradient all in a single shape.