Question

I want to make a button style on Android with two background colors, such as the following image:

https://i.stack.imgur.com/ExKXl.png

Is it possible to make with drawable resources? I´ve being searching for a solution on http://developer.android.com/guide/topics/resources/drawable-resource.html but none of them can have two colors.

Is there a way?

[editing the answer]

The solution was to create a <layer-list> with items and each <item> has one <shape>. The code is bellow (the entire button has 32dp height so I used half-height for each color):

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

    <!-- Top color -->
    <item android:bottom="16dp">
        <shape android:shape="rectangle">
            <solid android:color="#FF0000" /> <!-- RED -->
        </shape>
    </item>

    <!-- Bottom color -->
    <item android:top="16dp">
        <shape android:shape="rectangle">
            <solid android:color="#00FF00" /> <!-- GREEN -->
        </shape>
    </item>
</layer-list>

But I had another issue, I was trying to put corners on each shape. I tried to put android:topLeftRadius and android:topRightRadius on the first shape and android:bottomLeftRadius and android:bottomRightRadius on the second shape but it didn´t show me the corners! So the solution was to use android:radius (all the 8 corners became rounded, dammit!) and put another two items to overcome the extra corners. At the end the XML has like that:

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

    <!-- Top color with corner -->
    <item android:bottom="16dp">
        <shape android:shape="rectangle">
            <corners android:radius="5dp" /> <!-- It´s obligatory, It didn´t work only with android:topLeftRadius and android:topRightRadius -->
            <solid android:color="#FF0000" /> <!-- RED Color-->
        </shape>
    </item>

    <!-- Takes off the center corner -->
    <item android:top="8dp" android:bottom="8dp">
        <shape android:shape="rectangle">
            <solid android:color="#FF0000" /> <!-- RED Color-->
        </shape>
    </item>

    <!-- Bottom color with corner -->
    <item android:top="16dp">
        <shape android:shape="rectangle">
            <corners android:radius="5dp" /> <!-- It´s obligatory, It didn´t work only with android:bottomLeftRadius and android:bottomRightRadius -->
            <solid android:color="#00FF00" /> <!--  GREEN Color -->
        </shape>
    </item>

    <!-- Takes off the center corner -->
    <item android:top="16dp" android:bottom="8dp">
        <shape android:shape="rectangle">
            <solid android:color="#00FF00" /> <!--  GREEN Color -->
        </shape>
    </item>

</layer-list>

It is working now, thanks you all!

Answer 1

Possible Duplicate: banded background with two colors?

In which a provided answer using Java:

Bitmap bmResult = Bitmap.createBitmap(buttonWidth, buttonHeight, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bmResult); 
    Paint paint = new Paint();
    paint.setShader(new LinearGradient (0, 0, 0, bmResult.getHeight()/2, 0xFF284560, 0xFF284060, TileMode.MIRROR));
    canvas.drawPaint(paint);
    paint.setShader(new LinearGradient (0, 0, 0, bmResult.getHeight()/2, 0x55FFFFFF, 0x22FFFFFF, TileMode.CLAMP));
    paint.setMaskFilter(new BlurMaskFilter(3, BlurMaskFilter.Blur.NORMAL));
    canvas.drawRect(0, 0, bmResult.getWidth(), bmResult.getHeight()/2, paint)

was lifted from another SO post on the same topic: Gradients and shadows on buttons

And the accepted solution using an XML drawable:

<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>

And as others have said:

You can create a 9patch image which would be the most resourceful.