How to make custom shape (arrow on the sides pointing outwards) of a button?

Question

I want to make my button look like the following. Can you please tell me, how to make a drawable xml file for the following?

like this image

Answer 1

Just use the standard MaterialButton in the Material Components Library with the shapeAppearanceOverlay attribute.
Something like:

    <com.google.android.material.button.MaterialButton
        app:shapeAppearanceOverlay="@style/ButtomShapeArrow"
        ../>

with:

  <style name="ButtomShapeArrow">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">50%</item>
  </style>

With Jetpack Compose:

Button(
    onClick = { /* do something */},
    shape = CutCornerShape(50)
){
    Text ("SHAPE")
}

Answer 2

You can do this by creating a drawable XML file inside your drawable

background.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="27dp"
    android:height="24dp"
    android:viewportHeight="628.0"
    android:viewportWidth="726.0">
    <path
        android:fillColor="#00ffffff"
        android:pathData="m723,314c-60,103.9 -120,207.8 -180,311.8 -120,0 -240,0 -360,0C123,521.8 63,417.9 3,314 63,210.1 123,106.2 183,2.2c120,0 240,0 360,0C603,106.2 663,210.1 723,314Z"
        android:strokeColor="#ffffff"
        android:strokeWidth="20" />
</vector>

Then in your layout file you can add the background like below

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#652ef0"
    android:orientation="vertical"
    tools:context="com.MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@drawable/background"
        android:gravity="center"
        android:text="Hello World!" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/background"
        android:gravity="center"
        android:text="Hello World 2!" />
</LinearLayout>

This will give you output something like this

Answer 3

If it were only the shape maybe a vector drawable would be enough, but to draw shape, icon and text, better to create your own Button class and draw things in the overriden onDraw. The shape can be drawn using a Path.