Android: Rounded Corners TextView XML Layout with custom Header

Question

I would like to create a custom XML layout for my TextView, using rounded corners and a custom header, such as this example.

I found this very useful link that creates the following quite similar result.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Bottom 2dp Shadow -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#d8d8d8" />
            <corners android:radius="7dp" />
        </shape>
    </item>

    <!-- White Top color -->
    <item android:bottom="3px">
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
            <corners android:radius="7dp" />
        </shape>
    </item>
</layer-list>

I wonder if it possibile to modify the XML layout above to get the header "ADD FRIEND" style, that is the darker gray background and the divider between the header textview ("ADD FRIEND") and the textview below (the one containing the "Nickname or email" and the "search" button).

I am thinking it is probably easier to do it with an image/drawable background, but getting it done in XML would be awesome (in terms of reusability for example).

Any help or suggestion on how to proceed is very welcome!

Answer 1

if you not using image for that then require three xml in drawable and create this type of layout : 1 linearlayout_background.xml

<?xml version="1.0" encoding="utf-8"?>

<item>
    <shape android:shape="rectangle" >
        <solid android:color="#CABBBBBB" />

        <corners android:radius="2dp" />
    </shape>
</item>
<item
    android:bottom="2dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp">
    <shape android:shape="rectangle" >
        <solid android:color="@android:color/white" />

        <corners android:radius="2dp" />
    </shape>
</item>

2. header_background :

       <corners android:topLeftRadius="5dp" android:topRightRadius="5dp" />
   
       <solid android:color="@color/off_black1" />
   </shape></item>
   

3. buttonbackground

       <corners android:radius="5dp" />
   
       <solid android:color="#00000000" />
   
       <stroke android:width="1dp" android:color="@color/off_white2" />
   </shape></item>