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

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

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

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

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

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

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

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

Теперь все работает, всем спасибо!


android button colors background rounded-corners
person Gabriela Vasselai    schedule 08.01.2012    source источник
comment
возможный дубликат полосатого фона с двумя цветами?   -  person    schedule 08.01.2012

Ответы (5)


arrow_upward
4
arrow_downward

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

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

<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, которое будет самый находчивый.

person TryTryAgain    schedule 08.01.2012
comment
Я предпочитаю использовать XML, решение, которое вы предоставили, сработало для меня. Спасибо! - person Gabriela Vasselai; 09.01.2012

arrow_upward
3
arrow_downward

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

person Jeremy D    schedule 08.01.2012

arrow_upward
1
arrow_downward

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

person Ted Hopp    schedule 08.01.2012
comment
Это работало с использованием фигур внутри элементов ‹layer-list›. В документации Android отсутствует информация о том, что ‹item› может содержать больше, чем ‹bitmap› внутри. Большое спасибо! - person Gabriela Vasselai; 09.01.2012

arrow_upward
1
arrow_downward

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

person dmon    schedule 08.01.2012

arrow_upward
1
arrow_downward

Взгляните на Форму и 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>
person Francesco Vadicamo    schedule 08.01.2012