Android: кнопка с двумя цветами фона

Question

Я хочу создать стиль кнопки на Android с двумя цветами фона, например, следующим изображением:

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

Можно ли сделать с помощью доступных ресурсов? Я ищу решение на http://developer.android.com/guide/topics/resources/drawable-resource.html, но ни один из них не может иметь два цвета.

Есть ли способ?

[редактирование ответа]

Решением было создать <layer-list> с элементами, и у каждого <item> есть один <shape>. Код ниже (вся кнопка имеет высоту 32 дп, поэтому я использовал половину высоты для каждого цвета):

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

Но у меня была другая проблема: я пытался наложить углы на каждую фигуру. Я пытался поместить android:topLeftRadius и android:topRightRadius в первую фигуру и android:bottomLeftRadius и android:bottomRightRadius во вторую фигуру, но это не показывало мне углы! Поэтому решение было использовать android:radius (все 8 углов стали закругленными, черт побери!) И положить еще два элемента, чтобы преодолеть дополнительные углы. В конце XML выглядит так:

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

Сейчас работает, спасибо всем вам!

Answer 1

Возможно дублирование: полосатый фон с двумя цветами?

В котором предоставлен ответ с использованием 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)

было поднято из другого SO сообщения на ту же тему: Градиенты и тени на кнопках

И принятое решение, использующее 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>

И, как говорили другие:

Вы можете создать 9patch image , который был бы наиболее изобретательным.

Answer 2

Я думаю, что самый простой способ - создать фон с помощью программы для рисования.

Answer 3

Посмотрите на Shape и GradientDrawable !

Это работает для меня:

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

Тем не менее, Документация говорит:

Каждый угол должен (изначально) иметь уголрадиус больше 1, иначе углы не закруглены.Если вы хотите, чтобы определенные углы не округлялись, обходной путь должен использовать android:radius, чтобы установить радиус угла по умолчанию больше 1, но затем переопределить каждый угол на значения, которые вы действительно хотите, обеспечивая ноль ("0dp"), где вы не хотите закругленные углы.

Так попробуйте это:

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

Answer 4

Лучшее соответствие для того, что вы хотите сделать, это использовать девять патчей . Так устроены все фоны системных кнопок. См., Например, this .

Answer 5

Вы, вероятно, можете сделать это как <layer-list> из двух <shape> элементов (чтобы получить границу, которую показывает изображение).