Android: button with two background colors

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!

possible duplicate of [banded background with two colors?](http://stackoverflow.com/questions/8727238/banded-background-with-two-colors) — , Jan 08 '12 at 19:01

score 4 · Accepted Answer · edited May 23 '17 at 12:22

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.

I prefer using XML, the solution you provided worked for me. Thanks! — Gabriela Vasselai, Jan 08 '12 at 22:54

score 3 · Answer 2 · answered Jan 08 '12 at 18:37

3

I think the easiest way is to create your background using a drawing software.

answered Jan 08 '12 at 18:37

Jeremy D

4,787
1
31
38

score 1 · Answer 3 · answered Jan 08 '12 at 18:39

1

You can probably do this as a <layer-list> of two <shape> items (to get the boundary that the image shows).

answered Jan 08 '12 at 18:39

Ted Hopp

232,168
48
399
521

It worked using shapes inside items. It is missing on Android´s documentation that can have more than a inside. Thank you very much! – Gabriela Vasselai Jan 08 '12 at 22:52

score 1 · Answer 4 · answered Jan 08 '12 at 18:43

1

The best fit for what you want to do is to use a nine patch image. It's how all the backgrounds of the system buttons are built. See this, for example.

answered Jan 08 '12 at 18:43

dmon

30,048
8
87
96

Francesco Vadicamo · Answer 5 · 2012-01-09T12:34:59.443

Take a look to Shape and GradientDrawable!

This works for me:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:bottom="16dp">
        <shape android:shape="rectangle" >
            <corners 
                android:topLeftRadius="5dp"
                android:topRightRadius="5dp"/>
            <size android:height="16dp" />
            <solid android:color="#f00" /> <!-- RED -->
        </shape>
    </item>

    <item android:top="16dp">
        <shape android:shape="rectangle" >
            <corners 
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp"/>
            <size android:height="16dp" />
            <solid android:color="#f0f0" /> <!-- GREEN -->
        </shape>
    </item>
</layer-list>

However, documentation said:

Every corner must (initially) be provided a corner radius greater than 1, or else no corners are rounded. If you want specific corners to not be rounded, a work-around is to use android:radius to set a default corner radius greater than 1, but then override each and every corner with the values you really want, providing zero ("0dp") where you don't want rounded corners.

So try this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:bottom="16dp">
        <shape android:shape="rectangle" >
            <corners 
                android:radius="5dp"
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp"/>
            <size android:height="16dp" />
            <solid android:color="#f00" /> <!-- RED -->
        </shape>
    </item>

    <item android:top="16dp">
        <shape android:shape="rectangle" >
            <corners 
                android:radius="5dp"
                android:topLeftRadius="0dp"
                android:topRightRadius="0dp"/>
            <size android:height="16dp" />
            <solid android:color="#f0f0" /> <!-- GREEN -->
        </shape>
    </item>
</layer-list>

Android: button with two background colors

5 Answers5

Linked