Android: how to add a triangle shape in the right-top button corner

Question

I would like to do this kind of button with a triangle in the right-top corner of a layout :

I've started this layout without this triangle yet:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="48dp"
     android:gravity="center_vertical"
     android:paddingLeft="@dimen/keyline_1"
     android:paddingRight="@dimen/keyline_2">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@color/grey"
    android:text="DESCRIPTION"/>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_alignParentRight="true">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingRight="@dimen/keyline_4"
        android:textColor="@color/grey"
        android:text="info"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/grey"
        android:text="TITLE"/>

</LinearLayout>

</RelativeLayout>

score 8 · Answer 1 · edited May 23 '17 at 11:47

Use below code to create triangle shape and make it textview background

<?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="0%"
            android:pivotY="1%" >
            <shape android:shape="rectangle" >
                <stroke
                    android:width="10dp"
                    android:color="#00000000" />

                <solid android:color="#00ACED" />
            </shape>
        </rotate>
    </item>
 </layer-list>

and use below code to rotate the textview

<TextView
                android:id="@+id/won_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:paddingTop="20dp"
                android:rotation="-45"
                android:text="@string/won"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textColor="@android:color/white"
                android:textSize="34sp" />

more detail refer How to make custom textview in android?

Let me know if you will face any issue – Anjali Tripathi Jan 29 '16 at 08:58 — Anjali Tripathi, Jan 29 '16 at 08:58
How do you add the text itself inside (i.e. -48%)? – powder366 Aug 16 '16 at 08:13 — powder366, Aug 16 '16 at 08:13

score 4 · Answer 2 · edited May 23 '17 at 11:54

4

You've to create a shape and add it as a background like this one :

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

Add a TextView and put this shape as a background and change the gravity to end

Example :

android:background:"@drawable/YOUR_SHAPE"

Also if you don't familiar with shapes try this answer

edited May 23 '17 at 11:54

Community

1
1

answered Jan 29 '16 at 08:31

Skizo-ozᴉʞS ツ

19,464
18
81
148

Skizo, I don't understand how can I use your shape in my layout xml ?? – anthony Jan 29 '16 at 08:42
You need to add Drawable xml file and then add @Skizo xml code. You can use that file in your textview eg : – B M Jan 29 '16 at 08:51

Android: how to add a triangle shape in the right-top button corner

2 Answers2

Linked