How to create a right facing arrow (chevron) using XML shapes in android?

Issue

How to create a right facing arrow using xml shapes in android like this??

Solution

I've had a similar problem. Here's how I solved it:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape>
            <solid android:color="@android:color/transparent"/>
            <size android:width="2dp" android:height="50dp"/>
        </shape>
    </item>

    <item android:bottom="20dp">
        <rotate
            android:fromDegrees="-45"
            android:toDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="@android:color/black"/>
                <corners
                    android:radius="1dp"
                    android:bottomRightRadius="0dp"
                    android:bottomLeftRadius="0dp"/>
            </shape>
        </rotate>
    </item>

    <item android:top="20dp">
        <rotate
            android:fromDegrees="45"
            android:toDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="@android:color/black"/>
                <corners
                    android:radius="1dp"
                    android:topRightRadius="0dp"
                    android:topLeftRadius="0dp"/>
            </shape>
        </rotate>
    </item>
</layer-list>

The first item is an empty shape to expand the drawable. Then, I've used 2 rectangles. Each of them has 2 sides rounded.

You need to use this drawable via an ImageView:

<ImageView
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:src="@drawable/arrow"
    android:contentDescription="@string/arrow_descriptor"/>

Here's the result:

Note: AndroidStudio doesn't render different corner sizes, but it shows up properly on devices.

Answered By - Simas