android - banded background with two colors?

Question

I am trying to create a bottom bar with the background like this :

I am currently using the following code :

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


    <item>
        <shape>
            <gradient android:endColor="#000000" android:startColor="#696969"
                android:centerColor="#696969" android:angle="270" />
            <stroke android:color="#696969" />
            <padding android:left="2dp" android:top="3dp" android:right="2dp"
                android:bottom="3dp" />
        </shape>
    </item>
</selector>

But the output looks like this ... :

How to get this ,two colored background ? Please suggest.. Thanks

Answer 1

As others pointed out, a ninepatch would be ideal in this situation (and won't take much memory). Working around with XML is not optimal. Here is something you can try:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:bottom="20dp">
        <shape android:shape="rectangle" >
            <size android:height="20dp" />
            <solid android:color="#ff0000" />
        </shape>
    </item>

    <item android:top="20dp">
        <shape android:shape="rectangle" >
            <size android:height="20dp" />
            <solid android:color="#0000ff" />
        </shape>
    </item>
</layer-list>

in this case your view is considered beeing 40dp high

It's a layer list with two blocks in different colors. The problem with the XML approach is that you can't adjust the height of the blocks to a percentage (=50%). You have to use half of the actual view size in dp. Which means you have to adjust this drawable each time you change your view height/layout. A ninepatch would adjust to this automatically.