如何创建一个像图片一样的按钮答案

【问题标题】：How to create a button like the picture如何创建一个像图片一样的按钮
【发布时间】：2021-02-20 06:16:26
【问题描述】：

我想为像这张图片这样的按钮创建一个形状，但我不知道如何使用形状来创建像图片这样的按钮。

【问题讨论】：

标签： android button android-button material-components-android android-vectordrawable

【解决方案1】：

更新

或者您可以将图片添加为背景。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
 
    <item android:drawable="@drawable/pic1" />
</selector>

只需为按钮定义一个布局作为背景插入，就可以改变你想要的效果。

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke android:width="3dp" android:color="#ff000000" />
    <corners android:topLeftRadius="0dp" android:bottomLeftRadius="30dp"
        android:topRightRadius="0dp" android:bottomRightRadius="0dp"/>
    <solid android:color="#ff0000"/>
</shape>

【讨论】：

这个形状只是创建一个简单的矩形
HI@H Hooshyar 我更新了我的代码，请参考，希望对您有所帮助
非常感谢，但这与我在问题中发送的图片不同。我的图片没有任何半径
嗨朋友，我刚刚更新了我的代码，请参考:)

【解决方案2】：

试试下面的背景矢量可绘制类似的东西

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="40dp"
    android:viewportWidth="80"
    android:viewportHeight="100">
    <group android:name="rotationGroup">
        <path
            android:pathData="M 5,5 L 75,5 75,25 12,25 5,16 5,5"
            android:strokeWidth="1"
            android:fillColor="#44008080"
            android:strokeColor="#008080"
            android:trimPathStart="0"
            android:trimPathEnd="1" />
    </group>

</vector>

【讨论】：

【解决方案3】：

您可以创建一个 SVG 文件并将其设置为背景。根据您的要求更改它（颜色和路径）

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="40dp"
    android:viewportWidth="80"
    android:viewportHeight="100">
    <group android:name="rotationGroup">
        <path
            android:pathData="M 5,5 L 75,5 75,25 15,25 5,5"
            android:strokeWidth="1"
            android:strokeColor="#ffffff"
            android:trimPathStart="0"
            android:trimPathEnd="1" />
    </group>

</vector>

【讨论】：

非常感谢，但是这个 XML 并没有在左侧画一条线。我对创建 SVG 的 XML 一无所知，所以请告诉我应该如何修复它以在左侧绘制另一条线，如图片

【解决方案4】：

您可以搜索 .svg 格式的按钮，使用在线转换器将其转换为 xml 编码，然后在您的应用程序中使用该 xml 代码。然后你只需要引用那个 xml 文件。

【讨论】：

【解决方案5】：

您不需要自定义形状作为背景。
只需将MaterialButton 与shapeAppearanceOverlay一起使用：

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    app:strokeWidth="1dp"
    app:strokeColor="@color/..."
    app:shapeAppearanceOverlay="@style/CustomShape"
    />

与：

<style name="CustomShape">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">0dp</item>
    <item name="cornerSizeBottomLeft">50%</item>
</style>

【讨论】：