Android: Create a button with a triangular shape using xml (drawable) definitions

Question

I want to create this using a button (TextView) using an XML definition:

In the Activity layout, I:

<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 based several posts:

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

Android triangle (arrow), defined as an XML form

or Android - create an arrow shape using xml

I tried changing a few XML definitions, but there was nothing good. Is there an easy way to implement this form? It should also have a transparent background.

Answer 1

If anyone else has problems with this:

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

• 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: two rectangles overlap. You need to play a lot with values, and this makes it difficult to use on different views. I think using a custom view is the best solution in this case.

Answer 2

You can also achieve this with the MaterialButton included in the material component library.

Add a MaterialButton to the layout, and then:

• use the app:icon attribute to add an icon to the left
• apply the Widget.MaterialComponents.Button.Icon style provided by the library
• define a custom shape using the app:shapeAppearanceOverlay (this requires v.1.1.0)

Something like:

  <com.google.android.material.button.MaterialButton style="@style/Widget.MaterialComponents.Button.Icon" app:icon="@drawable/ic_add_24px" android:text="..." app:shapeAppearanceOverlay="@style/CustomShapeAppearanceOverlay.Button" .../> 

where shapeAppearanceOverlay defined in your styles.xml :

  <style name="CustomShapeAppearanceOverlay.Button" parent=""> <item name="cornerFamily">rounded</item> <item name="cornerSizeTopLeft">0dp</item> <item name="cornerSizeBottomLeft">0dp</item> <item name="cornerFamilyTopRight">cut</item> <item name="cornerFamilyBottomRight">cut</item> <item name="cornerSizeTopRight">18dp</item> <item name="cornerSizeBottomRight">18dp</item> </style> 

The final result:

Answer 3

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