Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android: button with two background colors

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

http://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!

like image 383
Gabriela Vasselai Avatar asked Jan 08 '12 18:01

Gabriela Vasselai


People also ask

How can I change background color of a button?

To change the background color of the button, use the CSS background-color property and give it a value of a color of your taste. In the . button selector, you use background-color:#0a0a23; to change the background color of the button.

How to change Button shape Android?

We can set custom shapes on our button using the xml tag <shape> . These xml files are created in the drawable folder too. shape can be used inside selectors . The shape can be set to rectangle (default), oval , ring , line .

How do I change the default background color in Android Studio?

Create background color. By default each activity in Android has a white background. To change the background color, first add a new color definition to the colors. xml file in the values resource folder like the following.


1 Answers

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.

like image 167
TryTryAgain Avatar answered Sep 24 '22 01:09

TryTryAgain