Special button shape (slightly rotated arrow)

Issue

I need your help with the following shape i want to use for a button in an android app:

I've tried creating a custom XML background and use it for a button, but it wasn't what I've wished for.

What would be the most elegant way to implement this? I was imagining something like this.

Solution

There are many ways to obtain your goal. Here my solution, maybe not the best, but it is something you can start from:

Main layout

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:background="@android:color/holo_orange_light">

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include layout="@layout/arrow_button_layout"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_marginTop="40dp" />

        <include layout="@layout/arrow_button_layout"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_marginTop="40dp" />

        <include layout="@layout/arrow_button_layout"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_marginTop="40dp" />

    </LinearLayout>

</FrameLayout>

arrow_button_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:rotation="-30"
    android:orientation="horizontal"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/button_tv"
        android:layout_centerVertical="true"
        android:layout_marginLeft="-22dp"
        android:rotation="-45">

        <View
            android:layout_width="35dp"
            android:layout_height="36dp"
            android:background="@drawable/right"/>
        <View
            android:layout_width="33dp"
            android:layout_height="36dp"
            android:background="@drawable/bottom"/>
    </FrameLayout>

    <FrameLayout
        android:layout_width="90dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:id="@id/button_tv">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:textColor="@android:color/white"
            android:background="@android:color/holo_red_dark"
            android:text="Button"
            android:layout_centerVertical="true"
            android:gravity="center"
            android:layout_gravity="center_vertical"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:layout_gravity="top"
            android:background="@android:color/black"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:layout_gravity="bottom"
            android:background="@android:color/black"/>

        <View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:background="@android:color/black" />

    </FrameLayout>

</RelativeLayout>

And here the two shapes I used for the point of the arrow:

drawable right.xml

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

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/black" />
        </shape>
    </item>

    <item android:right="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/holo_red_dark" />
        </shape>
    </item>
</layer-list>

drawable bottom.xml

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

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/black" />
        </shape>
    </item>

    <item android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/holo_red_dark" />
        </shape>
    </item>
</layer-list>

Here how it looks like:

UPDATE

Modifying the main layout, simply adding a negative margin (as you prefer) to the buttons you can achieve the alternative layout you wanted:

Main layout modified

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_orange_light">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/arrow_button_layout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginLeft="-40dp"
        android:layout_marginTop="40dp" />

    <include layout="@layout/arrow_button_layout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginLeft="-40dp"
        android:layout_marginTop="40dp" />

    <include layout="@layout/arrow_button_layout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginLeft="-40dp"
        android:layout_marginTop="40dp" />

    </LinearLayout>

</FrameLayout>

This is the result:

Answered By - Roberto Martucci