Creating a triangular shaped button for android application

Question

I need to create 2 buttons arranged like this in my android application:

But the problem is that the button I have created is not a perfect traingle shaped button. In fact it is a square button with the image set as background. Here in this case there is a problem such that the white areas near the image is clickable and I want the buttons to be more close.Which means that the white space in between the two button has to be eliminated to maximum. When I use relative layout, the problem is that, when I click on 1 button, sometimes the other button also gets clicked automatically. This is because one button is overlapped to the other button. So without overlapping the buttons, I want these two buttons to be so close that they will look like a parallelogram actually.So my question is how do I change the shape of rectangle buttons to a triangular shaped button so that the two buttons can be arranged in such a way that it look like a parallelogram. Any help from anyone is easily appreciated?? I didn't know from where to start with. So a little help with the coding part would be easily appreciated..Thanks in advance..

Answer 1

it is possible to do this using shape: name this arrow UP:

<?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="@color/transparent" android:width="10dp"/>
                <solid
                    android:color="@color/your_color_here" />
            </shape>
        </rotate>
    </item>
</layer-list>

usage:

<Button
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:background="@drawable/arrow_up" />

for the other triangle:

<Button
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:rotation="180"
    android:background="@drawable/arrow_up" />

Answer 2

Triangle towards right:

<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="48"
    android:pivotX="115%"
    android:pivotY="95%"
    android:toDegrees="48">

    <shape android:shape="rectangle">

        <stroke
            android:width="10dp"
            android:color="#c6802a" />

        <solid android:color="#c6802a" />

    </shape>
</rotate>