Android: Make a button with triangle shape using x

Question

I want create this using button (TextView) by using XML definiton:

In layout of the Activity I have:

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_arrow" <!-- I NEED IMPLEMENT THIS -->
        android:clickable="true"
        android:drawablePadding="7dp"
        android:gravity="center"
        android:drawableLeft="@drawable/music_cloud"
        android:onClick="exportSong"
        android:padding="20dp"
        android:text="@string/export_upload"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/dark_yellow_text_color"
        android:textStyle="bold" />

I founded several posts:

making-a-triangle-shape-using-xml-definitions

Android triangle (arrow) defined as an XML shape

or Android - make an arrow shape with xml

I tried modify several XML definition but nothing was good. Is there some easy way how to implement this shape? Also it should have a transparent background.

Answer 1

<item>
    <inset android:insetBottom="2dp" >
        <selector xmlns:android="http://schemas.android.com/apk/res/android" >
            <item android:state_pressed="true">
                <shape android:shape="rectangle" >
                    <corners android:radius="3dip" />

                    <stroke
                        android:width="1dip"
                        android:color="#5e7974" />

                    <gradient
                        android:angle="-90"
                        android:centerColor="#ECEFF1"
                        android:endColor="#FFAB00"
                        android:startColor="#FFAB00" />
                </shape>
            </item>
            <item android:state_focused="true">
                <shape android:shape="rectangle" >
                    <corners android:radius="3dip" />

                    <stroke
                        android:width="1dip"
                        android:color="#5e7974" />

                    <gradient
                        android:angle="-90"
                        android:centerColor="#ECEFF1"
                        android:endColor="#FFAB00"
                        android:startColor="#FFAB00" />
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle" >
                    <corners android:radius="3dip" />

                    <stroke
                        android:width="1dip"
                        android:color="#5e7974" />

                    <gradient
                        android:angle="-90"
                        android:centerColor="#ECEFF1"
                        android:endColor="#FFD600"
                        android:startColor="#FFD600" />
                </shape>
            </item>
        </selector>
    </inset>
</item>
<item
    android:bottom="65dp"
    android:right="-129dp"
    android:top="-40dp">
    <rotate android:fromDegrees="50" >
        <shape android:shape="rectangle" >
            <solid android:color="@color/background_color_light_yellow" />
        </shape>
    </rotate>
</item>
<item
    android:bottom="-40dp"
    android:right="-129dp"
    android:top="65dp">
    <rotate android:fromDegrees="-50" >
        <shape android:shape="rectangle" >
            <solid android:color="@color/background_color_light_yellow" />
        </shape>
    </rotate>
</item>

Answer 2

If someone still has issues with this :

1. xml:

   <item android:top="45dp">
       <shape>
           <size android:height="100dp" android:width="90dp"/>
           <solid android:color="@android:color/holo_orange_light" />
       </shape>
   </item>
   <item android:top="36dp" android:left="11dp">
       <rotate
           android:fromDegrees="45"
           android:toDegrees="0"
           android:pivotX="80%"
           android:pivotY="20%" >
           <shape>
               <size android:width="40dp"
                   android:height="30dp"/>
               <stroke android:color="@android:color/holo_orange_light" android:width="1dp"/>
               <solid android:color="@android:color/holo_orange_light" />
           </shape>
       </rotate>
   </item>
   </layer-list>
   

2. override TextView and use it in your layout:

   public class CustomTextView extends TextView {
   
       private int mWidth;
       private int mHeight;
   
   
       public CustomTextView(Context context, AttributeSet attrs)  {
           super(context, attrs);
   
       }
   
       @Override
       protected void onDraw(Canvas canvas) {
   
          super.onDraw(canvas);
           Paint mPaint = new Paint();
           int color = getResources().getColor(R.color.YourColor);
   
           mPaint.setColor(color);
           Path mPath = new Path();
           mPath.moveTo(.0f, this.getHeight());
           mPath.lineTo(0.8f * this.getWidth(), this.getHeight());
           mPath.lineTo(this.getWidth(), 0.5f * this.getHeight());
           mPath.lineTo(0.8f * this.getWidth(), .0f);
           mPath.lineTo(.0f, .0f);
           mPath.lineTo(.0f, this.getHeight());
   
           canvas.clipPath(mPath);
           canvas.drawPath(mPath,mPaint);
   
   
       }
   }
   

Regarding the xml example: there are two rectangles overlapping.You have to play around with the values a lot and this makes it difficult to use on different views. I think using a custom view is the best solution in this case.