Rectangle Shape with Arrow using XML

Question

How to implement this shape of Departments header using shape and xml without 9-patch ?

I mean rectangle with arrow on the left.

My code snippet:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="1px"
        android:left="@dimen/edittext_border"
        android:right="@dimen/edittext_border"
        android:top="@dimen/edittext_border">
        <shape android:shape="rectangle">
            <stroke
                android:width="@dimen/edittext_border_width"
                android:color="@color/menu_divider" />

            <solid android:color="@color/background" />
            <corners android:radius="4dp" />


        </shape>
    </item>
</layer-list>

@jankigadhiya I'm newbie in android and I found that I can do it. http://stackoverflow.com/questions/26143905/android-make-an-arrow-shape-with-xml But because of my small experience, I can't refactor this answer to my needs — VLeonovs, Jul 01 '16 at 11:29
It is not same as you want..!! As per my understanding `layer-list` cannot make the shape you want..!! — Janki Gadhiya, Jul 01 '16 at 11:34
Take a look [here](http://stackoverflow.com/questions/26311785/android-drawing-custom-shapes) for some explanation — Onik, Jul 01 '16 at 11:34
I think this can be done. How tall is the Departments view supposed to be? And is the background of it white or transparent? — Dr. Nitpick, Jul 01 '16 at 12:19

Rishabh Lashkari · Accepted Answer · 2016-07-01T13:11:41.297

if you are looking for someting like this, try the following code..

Make a xml arrow_shape in your drawable folder.

 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">   
 <item>
 <rotate android:fromDegrees="45" android:toDegrees="45"  
   android:pivotX="-40%" android:pivotY="87%" >
    <shape android:shape="rectangle" >
        <stroke android:color="#c6802a" android:width="10dp"/>
        <solid android:color="#c6802a" />
    </shape>
</rotate>
</item>
</layer-list>

Make a xml rectangle_shape in your drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
 <shape android:shape="rectangle">
    <solid android:color="#B2E3FA" />
 </shape>
</item>

In your main xml file

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.example.stpl.myapplication.MainActivity">

<RelativeLayout
    android:id="@+id/arrow"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:background="@drawable/arrow_shape"
    android:rotation="270" />

  <RelativeLayout
   android:id="@+id/rectangle"
   android:layout_width="150dp"
   android:layout_height="50dp"
   android:background="@drawable/rectangle_shape"
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:android="http://schemas.android.com/tools" />

</LinearLayout>

add corner radius in the rectangle, as in @VLeonovs photo – Ashish Ranjan Jul 01 '16 at 13:16 — Ashish Ranjan, Jul 01 '16 at 13:16

score 1 · Answer 2 · answered Feb 16 '22 at 16:59

A solution with a gradient:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

  <item android:width="2dp" android:height="2dp"
      android:top="4dp" android:left="3dp">
    <rotate android:fromDegrees="45"
        android:pivotX="0"
        android:pivotY="0">
      <shape>
        <solid android:color="#D83945"/>
      </shape>
    </rotate>
  </item>
  <item android:width="50dp" android:height="11dp" android:left="3dp">
    <shape>
      <gradient
          android:startColor="#D83945"
          android:endColor="#F9700C"
          />
      <corners
          android:radius="2dp"
          />
    </shape>
  </item>
</layer-list>

The final result is:

Rectangle Shape with Arrow using XML

2 Answers2