用 xml 在两边做一个箭头形状

Question

我想做一个这样的按钮形状

有没有办法用 XML 做到这一点？

其实我正在找这个

Answer 1

这不是您要找的东西，因为它不是用 XML 实现的。但是使用新的 MaterialButton 获取它非常简单：

只需在您的布局中定义按钮：

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

然后只需使用 ShapeAppearanceModel 定义自定义形状。

      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());

使用更多的按钮（使用 xml 中的 button.setBackgroundTintList(..) 或 app:backgroundTint="..." 来改变背景颜色）你可以获得类似的东西：

Answer 2

您可以为此制作可绘制对象，这是您想要的代码下方，对于我创建它的过程，您可以在 link [=12= 中查看]

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

Answer 3

我通过 vector 实现了这一目标。

@KinjalShah 请调查一下。

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

用 xml 在两边做一个箭头形状

Make an arrow shape both side with xml

xml

android

android-button

material-design

material-components-android