Android :: Layer-List 3 vertical rectangle stack issue

Question

PROBLEM

I want to create 3 rectangles in the vertical. Then, I want the first and the last one transparent. but the result look like the second rectangle height is bigger than it should be (its height big equal 2 rectangle)

PICTURE

Before it transparent...

After it transparent...

What I want...

XML LAYER-LIST

<layer-list xmlns:android= "http://schemas.android.com/apk/res/android">

    <item android:top="0dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent"/>
            <size android:height="5dp" android:width="20dp"/>
        </shape>
    </item>

    <item android:top="5dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/holo_green_light"/>
            <size android:height="5dp" android:width="20dp"/>
        </shape>
    </item>

    <item android:top="10dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent"/>
            <size android:height="5dp" android:width="20dp"/>
        </shape>
    </item>

</layer-list>

UPDATE ANSWER

change above to these solve the problem as Rod_Algonquin answer in this question

<item android:top="0dp" android:bottom="10dp">
<item android:top="5dp" android:bottom="5dp">
<item android:top="10dp" android:bottom="0dp">

Answer 1

problem:

<item android:top="5dp"> 

since you are only giving it a top of 5dp it will only crop the top with 5dp and still have the height covering almost the size of the layer

solution:

add a bottom attribute to crop the bottom as well to balance the effect you want

<item android:top="5dp"  android:bottom="5dp">