How to create down arrow indicator with left and right border using xml in Android

Question

I want to make a shape for my view like this one.

Is there any way to do that with xml? Thanks

Answer 1

Here is your custom drawable custom_shape_down_arrow.xml:

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

    <!-- Background -->
    <item>
        <shape android:shape="rectangle">
            <size
                android:width="250dp"
                android:height="20dp" />
            <solid android:color="#cdcdcd" />
        </shape>
    </item>

    <!-- Top-Left Line -->
    <item
        android:right="150dp"
        android:bottom="18.7dp">
        <shape android:shape="line">
            <stroke
                android:color="#999999"
                android:width="1dp" />
        </shape>
    </item>

    <!-- Top-Right Line -->
    <item
        android:left="150dp"
        android:bottom="18.7dp">
        <shape android:shape="line">
            <stroke
                android:color="#999999"
                android:width="1dp" />
        </shape>
    </item>

    <!-- Left-Diagonal Line -->
    <item
        android:right="25dp">
        <rotate android:fromDegrees="36">
            <shape android:shape="line">
                <stroke
                    android:color="#999999"
                    android:width="1dp" />
            </shape>
        </rotate>
    </item>

    <!-- Right-Diagonal Line -->
    <item
        android:left="27dp">
        <rotate android:fromDegrees="322">
            <shape android:shape="line">
                <stroke
                    android:color="#999999"
                    android:width="1dp" />
            </shape>
        </rotate>
    </item>

</layer-list>

USE:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="24dp"
    android:gravity="center_horizontal">

    <!-- Custom shape -->
    <LinearLayout
        android:id="@+id/layout_custom_shape"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:paddingTop="10dp"
        android:background="#cdcdcd">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/custom_shape_down_arrow">

        </LinearLayout>
    </LinearLayout>

</LinearLayout>

OUTPUT:

Hope this will help~