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

Question

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

Answer 1

您可以创建一个 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>

Answer 2

更新

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

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

Answer 3

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

Answer 4

试试下面的可绘制背景矢量，例如

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

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

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

How to create a button like the picture

android

button

android-button

android-vectordrawable

material-components-android