如何绘制附加到矩形的三角形？

Question

I am newbie in designing vector drawables in android.

I would like to design like following but not sure how to accomplish this

I have tried the following code snippet

<item>
    <rotate
        android:fromDegrees="-45"
        android:pivotX="0%"
        android:pivotY="0%"
        android:toDegrees="-45">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
            <stroke
                android:width="1dp"
                android:color="#fffff" />

            <corners
                android:bottomRightRadius="@dimen/dim_200dp"
                android:bottomLeftRadius="@dimen/dim_50dp"
                android:topRightRadius="@dimen/dim_50dp"
                android:topLeftRadius="@dimen/dim_50dp"></corners>
        </shape>
    </rotate>
</item>

But I got only the following result

Please help me get the solution

Answer 1

I have made some 9-patch images matching your need. Using this drawable you can place each one as you wish on the screen according to your case:

triangle_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="90dp"
        android:height="160dp"
        android:bottom="137dp">
        <nine-patch android:src="@drawable/top_bg"/>
    </item>
    <item
        android:width="90dp"
        android:height="60dp"
        android:top="137dp">
        <nine-patch android:src="@drawable/bottom_bg"/>
    </item>
</layer-list>

You can download drawables here . The original PSD file used to build 9-patches is also available here .

The final output would look like this:

Hope it helps.