androidandroid-buttonandroid-shape

Android - make an arrow shape with xml


I want to make a button for my shape like this one

enter image description here

Is there a way to do this with xml ? Like setting some points, in my case I have 5..


Solution

  • What you need is to create a shape xml file in your project's drawable-xxx folder and then use this shape as background for a button.

    Here is the shape file called arrow_shape.xml:

    <?xml version="1.0" encoding="UTF-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <!-- Colored rectangle-->
    <item>
        <shape android:shape="rectangle">
            <size 
                android:width="100dp"
                android:height="40dp" />
            <solid android:color="#5EB888" />
            <corners android:radius="0dp"/>
        </shape>
    </item>
    
    <!-- This rectangle for the top arrow edge -->
    <!-- Its color should be the same as the layout's background -->
    <item
        android:top="-40dp"
        android:bottom="65dp"
        android:right="-30dp">
        <rotate
            android:fromDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="#ffffff" />
            </shape>
        </rotate>
    </item>
    
    <!-- This rectangle for the lower arrow edge -->
    <!-- Its color should be the same as the layout's background -->
    <item
        android:top="65dp"
        android:bottom="-40dp"
        android:right="-30dp">
        <rotate
            android:fromDegrees="-45">
            <shape android:shape="rectangle">
                <solid android:color="#ffffff" />
            </shape>
        </rotate>
    </item>
    
    </layer-list>
    

    Then use it as button's background, for example

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/arrow_shape"/>
    

    Here is the screenshot:

    enter image description here

    More info on Layer-List you can find here.

    EDIT:

    Keep in mind though that I used certain values for the shape's width and height. If you change those you might need to change the values of the top, bottom and right attributes. So, in that case consider using different values in your project's values directory.