自定义按钮背景有对角切口视图

Question

我想设置背景，如图所示

我尝试了很多教程，例如

• https://medium.com/@adinugroho/create-diagonal-cut-view-in-android-5a376eca6a1c
• https://github.com/florent37/DiagonalLayout

但没有得到正确的结果，任何人都可以帮助我获得完美的结果。

先谢谢。

Answer 1

更新的答案

请注意，您可能需要调整height的{​​{1}}和Button，以使其适合您。

您可以使用vector和layer-list drawables来执行此操作。

  

diagonal_shape

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="150dp"
    android:height="80dp"
    android:viewportWidth="52.652084"
    android:viewportHeight="21.166666">
    <path
        android:fillColor="#F48733"
        android:pathData="M31.214,0.036 L2.229,0.027C0.332,0.026 0.104,0.811 0.101,1.862l-0.047,16.618c-0.003,1.466 -0.185,2.731 1.932,2.729L51.342,21.175c1.381,0.096 1.798,-0.748 0.581,-2.647L45.639,9.214 40.544,1.907C39.687,0.67 39.285,0.305 38.061,0.138 36.744,-0.042 34.414,0.081 31.214,0.036Z"
        android:strokeWidth="1.11766827"/>
</vector>

  

ic_arrow_forward

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M12,4l-1.41,1.41L16.17,11H4v2h12.17l-5.58,5.59L12,20l8,-8z"/>
</vector>

  

button_background_layer_list

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:gravity="end"
        android:left="10dp">
        <shape android:shape="rectangle">
            <solid android:color="#3B5998" />
            <corners android:radius="3dp" />
        </shape>
    </item>
    <item
        android:drawable="@drawable/diagonal_shape"
        android:gravity="start"
        android:right="20dp" />

    <item
        android:drawable="@drawable/ic_arrow_forward"
        android:gravity="end|center_vertical"
        android:right="5dp" />

</layer-list>

现在只需将button_background_layer_list设置为Button中的xml背景

android:background="@drawable/button_background_layer_list"

这看起来像这样。

更新代码后的新按钮看起来像这样，希望这就是你想要的。