Creating a triangular shaped button for android application

Question

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

enter image description here

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..

score 9 · Accepted Answer · answered Aug 20 '14 at 03:40

9

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" />

answered Aug 20 '14 at 03:40

harveyslash

5,906
12
58
111

Where do I have to give this code?? The first layer-list code?? – njnjnj Aug 20 '14 at 04:09
What is the color code or hex code for android:color="@color/transparent which has to be defined in the colors.xml in my project – njnjnj Aug 20 '14 at 04:19
`` Here I'm not using color, i'm using a png image located at my drawable hdpi folder, Then how do I set that?? – njnjnj Aug 20 '14 at 04:20
1

just remove the solid. add your background instead – harveyslash Aug 20 '14 at 04:22
I didn't understand this?? What has to be given as transparent in colors.xml in my project?? – njnjnj Aug 20 '14 at 04:24
For each button like this, Do, I have to create individual xml files in the layout folder?? – njnjnj Aug 20 '14 at 04:27
for a triangle, you have to make this, both your buttons will work by the one xml – harveyslash Aug 20 '14 at 04:32
I have different images for each buttons then how do I set the 2 different backgrounds for the two different buttons?? – njnjnj Aug 20 '14 at 04:38
oh, I am sorry, I overlooked that you have different images. You will have to use to different xml. Or use two different styles – harveyslash Aug 20 '14 at 04:40
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/59622/discussion-between-tee-jay-and-harvey-slash). – njnjnj Aug 20 '14 at 04:40
@harvey_slash : can you please update the final answer? here is my SO question http://stackoverflow.com/questions/36793535/custom-shape-button-android – Sagar Panwala Apr 26 '16 at 11:43

score 0 · Answer 2 · edited Dec 23 '18 at 19:29

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>

Creating a triangular shaped button for android application

2 Answers2

Linked