How to create a xml drawable like this

Question

I need to create a drawable with a 3dp height line/rectangle on top, a black rectangle with 70% opacity and 2dp height line/rectangle on the bottom. How can I do this?

Here is the code I'm using:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="0dp" android:left="0dp" android:right="0dp">
        <shape android:shape="rectangle" >
            <size android:height="3dp"></size>
            <solid android:color="#C81F25"></solid>
        </shape>
    </item>
    <item android:top="2dp">
        <shape android:shape="rectangle">
            <solid android:color="#99000000"></solid>
        </shape>
    </item>

</layer-list>

PS: Ignore the gray gradient around the image, it's from Android Studio preview.

Answer 1

Case 1: Rectangle inside another rectangle.

Case 2: 3 Rectangles of which 2 are transparent which have negative paddings and strokes. On eclipse previews the case 2 shows wrong but it is correct and works when deployed.

case 1: actionbarbg.xml in your drawable folder:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#F00" />
        </shape>
    </item>
    <item android:top="3dp" android:right="0dp" android:bottom="2dp"
        android:left="0dp">
        <shape android:shape="rectangle">
            <solid android:color="#9000" />
        </shape>
    </item>
</layer-list>

case 2: (sort of a hack)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#9000" />
        </shape>
    </item>
    <item
        android:top="-2dp"
        android:left="-2dp"
        android:right="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />

            <stroke
                android:width="2dp"
                android:color="#C81F25" />
        </shape>
    </item>
    <item
        android:left="-3dp"
        android:right="-3dp"
        android:bottom="-3dp">
        <shape>
            <solid android:color="@android:color/transparent" />

            <stroke
                android:width="3dp"
                android:color="#C81F25" />
        </shape>
    </item>

</layer-list>

Answer 2

Is it possible to build the layout without drawables using linearlayouts. I dont know which one of the two cases below you ment:

1. On the top layout there is a black alphamask with top and bottom margins of 2dp/3dp nested inside a red layout.

2. On the bottom layout there is a rectangle of 3dp height on top of a black alphamask and a rectangle of 2dp height below the alpha mask.

`

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp"
        android:layout_marginTop="3dp"
        android:background="#9000" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Content"
            android:textColor="@android:color/white" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Content"
            android:textColor="@android:color/white" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Content"
            android:textColor="@android:color/white" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Content"
            android:textColor="@android:color/white" />
    </LinearLayout>
</LinearLayout>`

OR

`

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:background="#C81F25" >
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="#9000" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Content"
            android:textColor="@android:color/white" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Content"
            android:textColor="@android:color/white" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Content"
            android:textColor="@android:color/white" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#C81F25" >
    </LinearLayout>
</LinearLayout>`