自定义圆圈按钮

我想创建自定义按钮，我需要它是圆。我如何创建一个圆形按钮? 我认为使用draw9patch是不可能的。

我也不知道如何自定义按钮!

你有什么建议吗?

当前回答

在官方的材质组件库中，你可以使用MaterialButton来应用Widget.MaterialComponents.Button.Icon样式。

喜欢的东西:

   <com.google.android.material.button.MaterialButton
            android:layout_width="48dp"
            android:layout_height="48dp"
            style="@style/Widget.MaterialComponents.Button.Icon"
            app:icon="@drawable/ic_add"
            app:iconSize="24dp"
            app:iconPadding="0dp"
            android:insetLeft="0dp"
            android:insetTop="0dp"
            android:insetRight="0dp"
            android:insetBottom="0dp"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
            />

目前，app:iconPadding="0dp"，android:insetLeft,android:insetTop,android:insetRight,android:insetBottom属性需要在按钮上的图标中心避免额外的填充空间。

使用app:shapeAppearanceOverlay属性来获得圆角。在这种情况下，你会得到一个圆。

  <style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

最终结果:

与喷气背包撰写你可以使用:

    Button(
        onClick = { /* Do something! */ },
        modifier = Modifier.width(48.dp).height(48.dp),
        shape = CircleShape
    ) {
        Icon(Icons.Filled.Add, "")
    }

2019-09-05 07:33:19

其他回答

对于MaterialButton上的FAB样式的按钮:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
    app:cornerRadius="28dp"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="1" />

结果:

如果你改变大小，小心使用按钮大小的一半作为app:cornerRadius。

2020-03-02 15:18:40

在可绘制文件夹中创建一个新的矢量资产。

您也可以导入您的PNG图像，并在https://image.online-convert.com/convert-to-svg上在线将文件转换为SVG。分辨率越高，转换效果越好。

接下来，从该SVG文件创建一个新的矢量资产。

这是一个你可以使用的矢量圆图像样本。将代码复制到drawables文件夹中的xml文件。

ic_check.xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="256"
    android:viewportWidth="256">
    <path
        android:fillColor="#2962FF"
        android:pathData="M111,1.7c-7.2,1.1 -22.2,4.8 -27.9,7 -33.2,12.5 -61.3,40.3 -74.1,73.3 -8.7,22.6 -10.5,55.3 -4.4,78 10.9,40 39.7,72.4 77.4,87 22.6,8.7 55.3,10.5 78,4.4 45.3,-12.3 79.1,-46.1 91.4,-91.4 2.9,-10.7 3.9,-21.9 3.3,-37.4 -0.7,-21.2 -4.6,-35.9 -14,-54.1 -18.2,-35 -54,-60.5 -93.4,-66.4 -6.7,-1 -30.7,-1.3 -36.3,-0.4zM145,23.1c21.8,3.3 46.5,16.5 61.1,32.8 20.4,22.6 30.1,51.2 27.7,81.1 -3.5,44.4 -35.9,82.7 -79.6,94 -21.6,5.6 -46.6,3.7 -67.8,-5.1 -10.4,-4.3 -24.7,-14.1 -33.4,-22.9 -41.6,-41.5 -41.6,-108.4 0,-150 24.3,-24.3 57.6,-35.1 92,-29.9z"
        android:strokeColor="#00000000" />
    <path
        android:fillColor="#2962FF"
        android:pathData="M148.4,113c-24.6,26 -43.3,44.9 -44,44.6 -0.7,-0.3 -8.5,-6.1 -17.3,-13 -8.9,-6.9 -16.5,-12.6 -17,-12.6 -1.4,-0 -25.6,19 -25.8,20.3 -0.3,1.4 62.7,50.2 64.8,50.2 1.7,-0 108.4,-112.3 108.4,-114.1 0,-1.3 -23.8,-20.4 -25.4,-20.4 -0.6,-0 -20.2,20.3 -43.7,45z"
        android:strokeColor="#00000000" />
</vector>

在你的按钮中使用下图:

<ImageButton
    android:id="@+id/btn_level1"
    android:layout_width="36dp"
    android:layout_height="36dp"
    android:background="@drawable/ic_check"
/>

你的按钮将是一个圆形按钮。

2021-01-23 17:26:53

AngryTool自定义android按钮

你可以用这个工具网站制作任何类型的自定义android按钮… 我使圆形和方形按钮与圆角与这个工具站点.. 也许我能帮助你

2015-03-24 05:30:12

如果你想使用VectorDrawable和ConstraintLayout

<FrameLayout
            android:id="@+id/ok_button"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:foreground="?attr/selectableItemBackgroundBorderless"
            android:background="@drawable/circle_button">
                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <ImageView
                        android:id="@+id/icon_of_button"
                        android:layout_width="32dp"
                        android:layout_height="32dp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:srcCompat="@drawable/ic_thumbs_up"/>
                    <TextView
                        android:id="@+id/text_of_button"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        app:layout_constraintTop_toBottomOf="@+id/icon_of_button"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        android:layout_marginTop="5dp"
                        android:textColor="@android:color/white"
                        android:text="ok"
                        />
                </android.support.constraint.ConstraintLayout>
            </FrameLayout>

圆圈背景:circle_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#41ba7a" />
<stroke
    android:width="2dip"
    android:color="#03ae3c" />
<padding
    android:bottom="4dp"
    android:left="4dp"
    android:right="4dp"
    android:top="4dp" />
</shape>

2018-10-20 08:28:07