Android: botón con dos colores de fondo

Question

Quiero hacer un estilo de botón en Android con dos colores de fondo, como la siguiente imagen:

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

¿Es posible hacer con los recursos dibujable? He estado buscando una solución en http://developer.android.com/guide/topics/resources/drawable-resource.html pero ninguno de ellos puede tener dos colores.

¿Hay alguna manera?

[la edición de la respuesta]

La solución fue crear un <layer-list> con los objetos y cada uno tiene <item><shape>. El código es abajo (todo el botón tiene la altura 32DP así que utilicé media altura para cada 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> 

pero no tenía otro tema, yo estaba tratando de poner esquinas de cada forma. He intentado poner android:topLeftRadius y android:topRightRadius en la primera forma y android:bottomLeftRadius y android:bottomRightRadius en la segunda forma, pero no me resultó muestro las esquinas! Entonces la solución fue usar android:radius (¡todas las 8 esquinas se redondearon, maldición!) Y poner otros dos elementos para superar las esquinas adicionales. Al final, el XML tiene así:

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

¡Está funcionando ahora, gracias a todos!

Answer 1

Duplicar posible: banded background with two colors?

En la que una respuesta proporcionada usando 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) 

se levantó de otro SO publicar sobre el mismo tema: Gradients and shadows on buttons

Y la solución aceptada usando un XML dibujable:

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

Y como otros han dicho:

Se puede crear un 9patch image lo que sería el más ingenioso.

Answer 2

Creo que la manera más fácil es crear su fondo utilizando un software de dibujo.

Answer 3

Probablemente pueda hacer esto como <layer-list> de dos <shape> elementos (para obtener el límite que muestra la imagen).

Answer 4

El mejor ajuste para lo que quieres hacer es usar un nine patch image. Es como se construyen todos los fondos de los botones del sistema. Ver this, por ejemplo.

Answer 5

echar un vistazo para Shape y GradientDrawable!

Esto funciona para mí:

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

Sin embargo, documentation dijo:

Cada rincón debe (inicialmente) puede proporcionar un radio de esquina mayor que 1, o de lo contrario no hay esquinas son redondeado. Si desea que las esquinas específicas no sean redondeadas, una solución alternativa es usar android:radius para establecer un radio de esquina predeterminado mayor que 1, pero luego anule todas y cada esquina con los valores que realmente desee, proporcionando cero ("0dp ") donde no desea esquinas redondeadas.

Así que trate esto:

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