问题
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!
回答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.
回答2:
I think the easiest way is to create your background using a drawing software.
回答3:
You can probably do this as a <layer-list> of two <shape> items (to get the boundary that the image shows).
回答4:
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.
回答5:
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:radiusto 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>
来源：https://stackoverflow.com/questions/8780119/android-button-with-two-background-colors