Android why won't my layer-list drawable scale to fit my button?

Question

I'm trying to create a fancy gradient border for my android button. I've created a drawable with a layer-list and some gradients, and the preview looks good. But when I try to apply that drawable to my button, it doesn't look even close to how it looks in the preview. I was hoping that the drawable would stretch and scale to fit my button, but it doesn't seem to be doing that.

Can anyone tell me what I'm doing wrong?

Here's my drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="1dp"/>
            <solid android:color="@color/colorLightGray"/>
            <size android:width="40dp" android:height="10dp"/>
        </shape>
    </item>
    <item android:left="38dp">
        <shape android:shape="rectangle">
            <corners
                    android:topRightRadius="1dp"
                    android:bottomRightRadius="1dp"/>
            <gradient
                android:endColor="@color/colorDarkGreen"
                android:startColor="@color/colorLightGray"
                android:type="linear"/>
        </shape>
    </item>
    <item android:right="38dp">
        <shape android:shape="rectangle">
            <corners
                    android:topLeftRadius="1dp"
                    android:bottomLeftRadius="1dp"/>
            <gradient
                    android:endColor="@color/colorLightGray"
                    android:startColor="@color/colorDarkGreen"
                    android:type="linear"/>
        </shape>
    </item>
    <item android:bottom="8dp">
        <shape android:shape="rectangle">
            <corners
                    android:topLeftRadius="1dp"
                    android:topRightRadius="1dp"/>
            <gradient
                    android:endColor="@color/colorLightGray"
                    android:startColor="@color/colorDarkGreen"
                    android:angle="270"
                    android:type="linear"/>
        </shape>
    </item>
    <item android:top="8dp">
        <shape android:shape="rectangle">
            <corners
                    android:bottomLeftRadius="1dp"
                    android:bottomRightRadius="1dp"/>
            <gradient
                    android:endColor="@color/colorLightGray"
                    android:startColor="@color/colorDarkGreen"
                    android:angle="90"
                    android:type="linear"/>
        </shape>
    </item>
    <item
            android:bottom="8dp"
            android:right="38dp">
        <shape android:shape="rectangle">
            <corners android:topLeftRadius="1dp"/>
            <gradient
                    android:endColor="@color/colorDarkGreen"
                    android:centerColor="@color/colorDarkGreen"
                    android:startColor="@color/colorLightGray"
                    android:centerX="100%"
                    android:centerY="100%"
                    android:gradientRadius="200%"
                    android:type="radial"/>
        </shape>
    </item>
    <item
            android:bottom="8dp"
            android:left="38dp">
        <shape android:shape="rectangle">
            <corners android:topRightRadius="1dp"/>
            <gradient
                    android:endColor="@color/colorDarkGreen"
                    android:centerColor="@color/colorDarkGreen"
                    android:startColor="@color/colorLightGray"
                    android:centerX="0%"
                    android:centerY="100%"
                    android:gradientRadius="200%"
                    android:type="radial"/>
        </shape>
    </item>
    <item
            android:top="8dp"
            android:left="38dp">
        <shape android:shape="rectangle">
            <corners android:bottomRightRadius="1dp"/>
            <gradient
                    android:endColor="@color/colorDarkGreen"
                    android:centerColor="@color/colorDarkGreen"
                    android:startColor="@color/colorLightGray"
                    android:centerX="0%"
                    android:centerY="0%"
                    android:gradientRadius="200%"
                    android:type="radial"/>
        </shape>
    </item>
    <item
            android:top="8dp"
            android:right="38dp">
        <shape android:shape="rectangle">
            <corners android:bottomLeftRadius="1dp"/>
            <gradient
                    android:endColor="@color/colorDarkGreen"
                    android:centerColor="@color/colorDarkGreen"
                    android:startColor="@color/colorLightGray"
                    android:centerX="100%"
                    android:centerY="0%"
                    android:gradientRadius="200%"
                    android:type="radial"/>
        </shape>
    </item>
</layer-list>

Here's my button's xml:

<Button
            android:id="@+id/add_some_stuff"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/gradient_border"
            android:textAllCaps="false"
            android:textStyle="normal"
            android:textSize="@dimen/settings_text_size"
            android:textColor="@color/colorSettingsText"
            android:text="@string/add_some_stuff"/>

Here's what the preview shows:

Here's what I'm actually seeing:

Answer 1

Your drawable size is statically defined and will not resize properly to adjust when it is a background of a view. The layer-list properties android:width, android:height, android:left, etc. all must be defined with a specific density pixel size. Once your view no longer corresponds to that size, it won't fit properly to the drawable (this happens when you use match_parent or wrap_content). If you must use dynamic sizing (which I suggest), then I would use a vector image instead of a layer-list.