Make an arrow shape both side with xml

问题:

I want to make a button shape like this

Is there a way to do this with XML?

Actually I am looking for like this

回答1:

It is not exactly what you are looking for, because it is not with realized with a XML. However with the new MaterialButton it is very simple to obtain it:

Just define the Button in your layout:

 <com.google.android.material.button.MaterialButton
        app:cornerRadius="0dp"
        android:paddingLeft="24dp"
        android:paddingRight="12dp"
        .../>

Then just use the ShapeAppearanceModel to define a custom shape.

      float size = getResources().getDimension(R.dimen.cutout_size); //18dp
      TriangleEdgeTreatment triangleEdgeTreatment = new TriangleEdgeTreatment(size,true);
      CutCornerTreatment cutCornerTreatment = new CutCornerTreatment(size);

      button.setShapeAppearanceModel(button.getShapeAppearanceModel()
          .toBuilder()
          .setLeftEdge(triangleEdgeTreatment)
          .setTopRightCorner(cutCornerTreatment)
          .setBottomRightCorner(cutCornerTreatment)
          .build());

Using more buttons (use button.setBackgroundTintList(..) or app:backgroundTint="..." in xml to change the backgroundColor) you can obtain something like:

回答2:

I have achieved this by vector.

@KinjalShah Please look into this.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="138.25dp"
    android:height="23dp"
    android:viewportWidth="138.25"
    android:viewportHeight="23">
    <path android:pathData="M132.53,22.48l-132.27,0l5.36,-10.95l-5.36,-10.94l132.27,0l5.36,10.94z">
        <aapt:attr name="android:fillColor">
            <gradient
                android:endX="137.8946"
                android:endY="11.535"
                android:startX="0.2646"
                android:startY="11.535"
                android:type="linear">
                <item
                    android:color="#3b0b7b"
                    android:offset="0" />
                <item
                    android:color="#6244A5"
                    android:offset="1" />
            </gradient>
        </aapt:attr>
    </path>
</vector>

回答3:

You can make drawable for this, this is below code which exactly you want, for the process how i have created this, you can check here in the link https://stackoverflow.com/a/57443999/7216511

<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
    android:viewportWidth="1870"
    android:viewportHeight="490"
    android:width="187dp"
    android:height="49dp">
    <path
        android:pathData="M0 245l0 -245 935 0 935 0 0 245 0 245 -935 0 -935 0 0 -245z"
        android:fillColor="#F99E3F" />
    <path
        android:pathData="M1 245l0 -245 934 0 935 0 0 245 0 245 -935 0 -934 0 0 -245z"
        android:fillColor="#E4CFBA" />
    <path
        android:pathData="M4 378c6 -136 6 -117 0 -260l-5 -118 935 0 936 0 0 245 0 245 -936 0 -935 0 5 -112z"
        android:fillColor="#D5D5D5" />
    <path
        android:pathData="M4 378c6 -136 6 -117 0 -260l-5 -118 935 0 936 0 0 50c0 28 -5 50 -10 50 -7 0 -7 6 0 19 6 12 10 92 9 195l-1 176 -934 0 -935 0 5 -112zm1811 -57l34 -69 -35 -76 -35 -76 -879 0c-484 0 -880 2 -880 5 0 3 15 36 34 73l34 68 -33 72 -34 72 879 0 880 0 35 -69z"
        android:fillColor="#E5DBCF" />
    <path
        android:pathData="M4 378c7 -138 7 -128 0 -265l-6 -113 936 0 936 0 0 50c0 28 -5 50 -10 50 -7 0 -7 6 0 19 13 25 13 227 0 252 -7 13 -7 19 0 19 5 0 10 22 10 50l0 50 -936 0 -936 0 6 -112zm1811 -58l35 -70 -34 -75 -35 -75 -880 0c-485 0 -881 3 -881 8 1 4 16 36 34 72l34 65 -34 67c-19 37 -34 70 -34 73 0 3 396 5 880 5l880 0 35 -70z"
        android:fillColor="#EEEEEE" />
</vector>