Android: nút với hai màu nền

Question

Tôi muốn làm một kiểu nút trên Android với hai màu nền, chẳng hạn như hình ảnh sau:

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

Có thể thực hiện với nguồn tài nguyên drawable? Tôi đang tìm kiếm giải pháp trên http://developer.android.com/guide/topics/resources/drawable-resource.html nhưng không ai trong số họ có thể có hai màu.

Có cách nào không?

[chỉnh sửa câu trả lời]

Giải pháp là để tạo ra một <layer-list> với các mặt hàng và từng <item> có một <shape>. Mã dưới đây (toàn bộ nút có chiều cao 32dp nên tôi đã sử dụng một nửa chiều cao cho mỗi màu):

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

Nhưng tôi có một vấn đề khác, tôi đã cố gắng đặt góc trên mỗi hình dạng. Tôi đã cố gắng đặt android:topLeftRadius và android:topRightRadius vào hình dạng đầu tiên và android:bottomLeftRadius và android:bottomRightRadius ở hình dạng thứ hai nhưng nó không hiển thị cho tôi các góc! Vì vậy, giải pháp là sử dụng android:radius (tất cả 8 góc đã được làm tròn, chết tiệt!) Và đặt thêm hai vật phẩm khác để vượt qua các góc phụ. Vào cuối XML có dạng như sau:

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

Bây giờ nó đang hoạt động, cảm ơn tất cả!

Answer 1

thể trùng lặp: banded background with two colors?

Trong đó một câu trả lời cung cấp sử dụng 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) 

đã được dỡ bỏ từ một SO gửi trên cùng một chủ đề: Gradients and shadows on buttons

Và giải pháp chấp nhận sử dụng 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> 

Và như những người khác đã nói:

Bạn có thể tạo ra một 9patch image mà sẽ là tháo vát nhất.

Answer 2

Tôi nghĩ cách dễ nhất là tạo nền của bạn bằng phần mềm vẽ.

Answer 3

Bạn có thể thực hiện điều này dưới dạng <layer-list> trong hai mục <shape> (để nhận được đường biên mà hình ảnh hiển thị).

Answer 4

Phù hợp nhất với những gì bạn muốn làm là sử dụng nine patch image. Đó là cách tất cả các hình nền của các nút hệ thống được xây dựng. Xem ví dụ this.

Answer 5

Hãy xem Shape và GradientDrawable!

này làm việc cho tôi:

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

Tuy nhiên, documentation nói:

Mỗi góc phải (ban đầu) được cung cấp một bán kính góc lớn hơn 1, nếu không có các góc được làm tròn. Nếu bạn muốn các góc cụ thể không được làm tròn, hãy sử dụng android:radius để đặt bán kính góc mặc định lớn hơn 1, nhưng sau đó ghi đè từng góc và với các giá trị bạn thực sự muốn, cung cấp 0 (0dp ") nơi bạn không muốn các góc bo tròn.

Vì vậy, cố gắng này:

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