image in layer list not the same when applied to a button

Question

I'm attempting to define a custom button shape in XML using a layer-list in order to avoid adding yet more bitmaps to the project. I have this:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
>
<item android:id="@+id/tester"
    >
    <rotate
        android:pivotX="20%"
        android:fromDegrees="-45"
        >
            <shape
                android:shape="rectangle">
                <solid
                    android:color="#000000"
                    >
                </solid>
                <size
                    android:height="200dp"
                    android:width="200dp"
                    >
                </size>
            </shape>
    </rotate>
</item>

<item android:id="@+id/tester"
    >
    <rotate
        android:pivotX="20%"
        android:fromDegrees="45"
        >
        <shape
            android:shape="rectangle">
            <solid
                android:color="#000000"
                >
            </solid>
            <size
                android:height="200dp"
                android:width="200dp"
                >
            </size>
        </shape>
    </rotate>
</item>

<item>
<rotate
    android:pivotX="90%"
    android:fromDegrees="270"
    >
    <shape
        android:shape="rectangle"
        >
        <solid
            android:color="#000000"
            >
        </solid>
        <size
            android:width="50dp"
            android:height="100dp"
            >
        </size>

    </shape>

</rotate>

<item>
    <rotate
        android:pivotX="90%"
        android:fromDegrees="90"
        >
        <shape
            android:shape="rectangle"
            >
            <solid
                android:color="#000000"
                >
            </solid>
            <size
                android:width="50dp"
                android:height="100dp"
                >
            </size>

        </shape>

    </rotate>
</item>

Which creates this image:

And I'm using this to set it to a button:

        <Button
        android:layout_width="15dp"
        android:layout_height="fill_parent"
        android:id="@+id/picture_inflator"
        android:layout_toLeftOf="@id/picture_fragment"
        android:layout_above="@+id/button"
        android:layout_below="@+id/title"
        android:background="@drawable/rightButton"
        android:layout_marginLeft="4dp"

        />

But the image this is creating in the button is this:

I have no idea what's going on here. I've drawn the images out wondering if it was including the parts of the shapes that had fallen off of the bounds but it doesn't look like that. I can't fix this until I know why its acting like this. I would greatly appreciate any insights or guesses. Thanks

EDIT: I'm aware that i'm supposed to use a selector here, but I'm just testing this right now. The image won't be matte black when its really done.

Answer 1

First I'd like to thank everyone that tried to help. Turns out that YoungCoconut was on the right track. When I set the the items' sizes to more appropriately reflect the size they were being scaled to the image shape became just like what I was actually seeing. So it appears that even portions of the object that have been cut off are still saved. More than likely the render doesn't use the image in the preview pane at all, but instead builds the object one item at a time while scaling. I've resorted to using Krita to build the objects and loading them into the project.