Android: pulsante con due colori di sfondo

Question

voglio fare uno stile tasto su Android con due colori di sfondo, come ad esempio la seguente immagine:

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

è possibile fare con le risorse disegnabili? Sto cercando una soluzione su http://developer.android.com/guide/topics/resources/drawable-resource.html ma nessuno di questi può avere due colori.

C'è un modo?

[Modifica della risposta]

La soluzione era quella di creare un <layer-list> con gli oggetti e ogni <item> ha uno <shape>. Il codice è soffietto (il pulsante intera ha un'altezza 32DP così ho usato mezza altezza per ogni colore):

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

Ma ho avuto un altro problema, stavo cercando di mettere gli angoli su ogni forma. Ho provato a mettere android:topLeftRadius e android:topRightRadius sulla prima forma e android:bottomLeftRadius e android:bottomRightRadius sulla seconda forma ma non mi ha mostrato gli angoli! Quindi la soluzione era usare android:radius (tutti gli 8 angoli diventavano arrotondati, dannazione!) E mettere altri due oggetti per superare gli angoli extra. Alla fine l'XML è così:

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

Ora funziona, grazie a tutti!

Answer 1

Eventuali duplicati: banded background with two colors?

in cui una risposta fornita utilizzando 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) 

è stato sollevato da un altro SO inviare sullo stesso argomento: Gradients and shadows on buttons

E la soluzione accettata tramite un 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> 

Come altri hanno già detto:

È possibile creare uno 9patch image che sarebbe il più pieno di risorse.

Answer 2

Penso che il modo più semplice sia quello di creare lo sfondo utilizzando un software di disegno.

Answer 3

È possibile farlo come <layer-list> di due elementi <shape> (per ottenere il limite mostrato dall'immagine).

Answer 4

La soluzione migliore per ciò che si vuole fare è utilizzare nine patch image. È come sono costruiti tutti gli sfondi dei pulsanti di sistema. Vedere this, ad esempio.

Answer 5

Dai uno sguardo a Shape e GradientDrawable!

questo funziona per 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> 

Tuttavia, documentation detto:

Ogni angolo deve (inizialmente) essere fornito un raggio d'angolo maggiore di 1, oppure senza spigoli sono arrotondato. Se si desidera arrotondare gli angoli specifici a , è necessario utilizzare android:radius per impostare un raggio angolare predefinito di maggiore di 1, quindi escludere ogni angolo con i valori desiderati, fornendo zero ("0dp ") dove non hai bisogno di angoli arrotondati per il .

Quindi provare questo:

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