Special button shape (slightly rotated arrow)

Question

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.

Take a look at this :: https://stackoverflow.com/questions/26143905/android-make-an-arrow-shape-with-xml -- You might be able to rotate the entire arrow as you need. You can also apply a gradient to get the shaded coloring you are looking to achieve. — Barns, Dec 27 '17 at 19:14
@Barns, thank you for your input. I've looked trough that thread before posting, but that solution (cutting the rectangle with the help of two other rectangles) was not useful in my case, because i will have a wallpaper as background, not just a simple color. — Andreas Atanasiu, Dec 28 '17 at 11:53

score 0 · Answer 1 · answered Dec 27 '17 at 19:07

0

use image with same background color as you mentioned.

answered Dec 27 '17 at 19:07

Raj

39
1
7

Roberto Martucci · Accepted Answer · 2017-12-28T14:46:02.650

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:

And if I would like to have the format like in the first picture (https://i.stack.imgur.com/Il0re.jpg) then I have to create an entirely new "shape"? What I wanted to achieve is to have the button coming from the left side of the screen. The second picture was just how I imagined it would work. — Andreas Atanasiu, Dec 28 '17 at 11:49
I updated the answer with the changes for the second format. It's just matter of margins. You don't need a new layout. — Roberto Martucci, Dec 28 '17 at 14:47

Special button shape (slightly rotated arrow)

2 Answers2