在Android中制作自定义可绘制形状

Question

I want to make drawable like below,

I am able to make the Rectangle and Triange shape in two different xml files. But i want to joint them to make the drawable like this.

Answer 1

Use <layer-list/> for that.

Here is an example for instance.

in Drawable folder of res in project directory, make xml file and name it as layerlist.xml and paste it below code as your requirement. you can also add your shape drawable instead of drawable in the <item/> tag in the example. and use this xml as a background of ImageView .

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <bitmap android:src="@drawable/android_red" android:gravity="center" /> </item> <item android:top="10dp" android:left="10dp"> <bitmap android:src="@drawable/android_green" android:gravity="center" /> </item> <item android:top="20dp" android:left="20dp"> <bitmap android:src="@drawable/android_blue" android:gravity="center" /> </item> </layer-list> 

Here is the result of the use of <layer-list/> .

I hope it helps you...

Answer 2

Use layer-list to make this custom shape drawable .

/res/drawable/custom_shape.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Transparent Rectangle -->
    <item>
        <shape android:shape="rectangle">
            <size
                android:width="300dp"
                android:height="60dp" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    <!-- Colored Rectangle -->
    <item
        android:bottom="20dp">
        <shape android:shape="rectangle">
            <size
                android:width="300dp"
                android:height="60dp" />
            <solid android:color="#9A8585" />
        </shape>
    </item>

    <!-- Bottom Triangle -->
    <item
        android:left="80dp"
        android:right="120dp"
        android:top="0dp"
        android:bottom="30dp">
        <rotate android:fromDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="#9A8585" />
            </shape>
        </rotate>
    </item>

    <!-- Top Border -->
    <item
        android:bottom="75dp">
        <shape android:shape="rectangle">
            <solid android:color="#EFC1B3" />
        </shape>
    </item>

</layer-list>

USE:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_shape"/>

OUTPUT:

Hope this will help~

Answer 3

I expect that you need it for aa Tabular navigator or a ViewPager . My suggestion is that

1)Use the rectangle as your background for all the cases.

2)Create the same triangle drawable but with the background color (White or transparent) for the unselected item.

3)Create a view with the triangle background for all the items

4)Manually setVisibility of the triangle view according to the selection state