Android: Using multiple shapes as a Button background

Question

How can I use multiple shapes defined in an xml as the background for a button in android?

assuming I have multiple shape xml files such as :-

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <solid android:color="#eeffffff" />
    <corners android:bottomRightRadius="8dip"
        android:bottomLeftRadius="8dip"  
        android:topRightRadius="8dip"
        android:topLeftRadius="8dip"/>
</shape>

and i want to use multishapes for the button background :-

<Button
    android:id="@+id/funkyButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right"
    android:text="@string/txt_higher" 
    android:background="@drawable/funkyShape"/>

how can i combine multiple shapes to end up with a button like so :- ?

button

score 6 · Answer 1 · answered Apr 10 '14 at 02:22

Try funkyShape.xml like:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
    <shape android:shape="rectangle">
        <size 
            android:width="100dp"
            android:height="40dp" />
        <solid android:color="#ff0000" />
        <corners android:radius="30dp"/>
    </shape>
</item>

<item
    android:top="10dp"
    android:left="10dp"
    android:right="60dp"
    android:bottom="10dp">
    <rotate
        android:fromDegrees="45"
        android:toDegrees="45">
        <shape android:shape="rectangle">
            <solid android:color="#ffff00" />
            <corners android:radius="5dp"/>
        </shape>
    </rotate>
</item>

<item
    android:top="5dp"
    android:left="55dp"
    android:right="5dp"
    android:bottom="5dp">
    <shape android:shape="oval">
        <solid android:color="#0000ff" />
    </shape>
</item>

</layer-list>

score 0 · Answer 2 · answered May 20 '15 at 12:03

You can try shape.xml like:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
    <shape android:shape="rectangle" >
        <solid android:color="#E1BEE7" />
    </shape>
</item>
<item
    android:bottom="10dp"
    android:left="10dp"
    android:right="160dp"
    android:top="10dp">
    <shape android:shape="rectangle" >
        <solid android:color="#ff5722" />
        <corners android:radius="10dp" />
    </shape>
</item>
<item
    android:bottom="10dp"
    android:left="100dp"
    android:right="10dp"
    android:top="10dp">
    <shape
        android:innerRadius="15dp"
        android:shape="ring"
        android:thickness="10dp"
        android:useLevel="false" >
        <gradient
            android:angle="270"
            android:endColor="#e1bee7"
            android:startColor="#e040fb" />
    </shape>
</item>
<item
    android:bottom="10dp"
    android:left="250dp"
    android:right="50dp"
    android:top="10dp">
    <shape
        android:innerRadius="10dp"
        android:shape="oval" >
        <solid android:color="#8bc34a" />
    </shape>
</item>

</layer-list>

Android: Using multiple shapes as a Button background

2 Answers2