android border top bottom with different colors/width

Question

I Have read a few tutorials but all I was able to achieve was a border in one side, or both sides with the same color. I'm trying to create a style that will apply a border in top with a different color and width, than the bottom border.

So I want to have a border with 2dp on top with a blue color and a border of 3dp on the bottom with red color.

This is the style I'm using to apply border on top and bottom but I can't change the color on the top or the bottom one.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
      <shape 
        android:shape="rectangle">
            <stroke android:width="1dp" android:color="#FF000000" />
            <solid android:color="#FFDDDDDD" />

        </shape>
   </item>

   <item android:top="1dp" android:bottom="1dp"> 
      <shape 
        android:shape="rectangle">
            <stroke android:width="1dp" android:color="#FFDDDDDD" />
            <solid android:color="#00000000" />
        </shape>
   </item>

</layer-list>

Answer 1

It is little dirty but it works :).

Your Layer-List drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- TOP STROKE-->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/top_stroke_color" />

        </shape>
    </item>
    <!-- BOTTOM STROKE-->
    <item android:top="@dimen/top_stroke_width">
        <shape android:shape="rectangle">
            <solid android:color="@color/bottom_stroke_color" />
        </shape>
    </item>
    <!-- MAIN SHAPE -->
    <item android:top="@dimen/top_stroke_width" android:bottom="@dimen/bottom_stroke_width">
        <shape android:shape="rectangle">
            <solid android:color="@color/main" />
        </shape>
    </item>
</layer-list>

Color definitions:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="top_stroke_color">#0000FF</color>
    <color name="bottom_stroke_color">#FF0000</color>
    <color name="main">#00FF00</color>
</resources>

And finally dimens:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="top_stroke_width">10dp</dimen>
    <dimen name="bottom_stroke_width">20dp</dimen>
</resources>

In my example i have 3 rectangles which have set correct "Margins". Every of my rectangles is smaller than this under and covers it. According to my solution u can create 4 different stroke for every side of your main shape.