自定义圆形按钮

Question

我想创建自定义的按钮，并且需要它是圆形。如何创建一个圆形的按钮？ 我不认为可以使用draw9patch实现。

另外，我不知道如何制作自定义按钮！

你有什么建议吗？

- Ata

---

你需要扩展按钮类并重写onDraw方法。 - Ashwin N Bhanushali

但问题在于，如果我扩展它，并且用户触摸圆形的外部，将调用Onlcick，如何解决这个问题。 - Ata

为什么不将圆形图片设置为按钮的背景呢？ - MKJParekh

我做了一个简单的OnDrawn，它在设计视图中显示，但当我想运行应用程序时，在加载时会出现以下问题：android.view.InflateException: Binary XML file line #52: Error inflating class com.inaros.magicbox._customButtonPlay。 - Ata

Answer 1

可以像这样使用xml drawable：

将以下内容保存为round_button.xml，并放在drawable文件夹中：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#c20586"/>
        </shape>
    </item>
</selector>

Android材料效果: 尽管FloatingActionButton是更好的选择，但如果您想使用xml选择器完成它，可以在res中创建一个名为drawable-v21的文件夹，然后将另一个round_button.xml保存在其中，并使用以下xml内容。

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#c20586">
    <item>
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
</ripple>

将其设置为xml中Button的背景，如下所示:

<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="hello"
android:textColor="#fff" />

重要提示：

1. 如果您想显示所有这些状态（启用、禁用、高亮等），您将使用此处所描述的选择器。
2. 为了使可绘制的向后兼容，您必须保留两个文件。否则，在早期的Android版本中，您将面临奇怪的异常。

- Adil Soomro

---

你的意思是要打开一个名为“drawable”的文件夹，还是将其保存在drawable-mdpi，hdpi等文件夹下？ - Jjang

@Jjang 不需要保存到'mdpi'、'hdpi'等文件夹中，只需保存到'drawable'文件夹即可。通常情况下，任何xml资源都应该保存在'drawable'文件夹中。 - Adil Soomro

好的，谢谢。直到现在我还没有drawable文件夹（只有mdpi、hdpi...和-v21）:) - Jjang

请问如何为按钮设置默认的涟漪颜色？就像应用程序中默认为所有按钮着色的灰色一样。 - Jjang

@AdilSoomro，请告诉我你的电子邮件地址，或者给我发邮件 [e-mail]，来自巴基斯坦的 Adil。 - Adiii

Answer 2

Markushi编写了一个带有惊人效果的圆形按钮小部件，点击这里！

- Jerome

---

如何在非圆形图像中使用它？ - tomsoft

提醒一下：此答案中链接的库现已过时。作者（Markushi）建议改用浮动操作按钮。 - Reinstate Monica

@ABoschman 我们可以在圆形按钮小部件中放置文本吗？还是只能用于可绘制对象？ - Ruchir Baronia

@ABoschman 嘿，我真的很喜欢这个库中这个按钮的效果。有什么办法吗？ - Ruchir Baronia

@RuchirBaronia 嗯，这取决于你。该库仍然存在，你可能仍然可以使用它。但请记住，它已被弃用并不再得到开发。这可能会在未来成为一个严重的问题。 - Reinstate Monica

Answer 3

使用官方的Material Components库，您可以使用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>

最终结果：

---

使用Jetpack Compose，你可以：

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

- Gabriele Mariotti

---

感谢@Gabriele Mariotti。值得强调的是需要使用app:iconPadding="0dp"来确保图标居中。在找到这个方法之前，我浪费了很多时间尝试居中。看起来app:iconGravity缺少“center”值是一个疏忽。 - scottyab

感谢@Gabriele Mariotti。对我来说很有效！ - Androidz

要删除按钮的高程，可以使用以下样式：Widget.MaterialComponents.Button.UnelevatedButton.Icon。 - Marcola Carr

Answer 4

AngryTool for custom android button

您可以使用此工具网站制作任何类型的自定义Android按钮... 我使用这个工具网站制作了圆形和带有圆角的正方形按钮.. 访问它，也许它会帮助您。

- Pranav P

Answer 5

你可以使用来自AndroidX材料库的MaterialButton

<com.google.android.material.button.MaterialButton
     android:layout_width="75dp"
     android:layout_height="75dp"
     android:layout_margin="10dp"
     android:insetLeft="0dp"
     android:insetTop="0dp"
     android:insetRight="0dp"
     android:insetBottom="0dp"
     app:cornerRadius="50dp"
     app:icon="@drawable/ic_camera"
     app:iconGravity="textStart"
     app:iconPadding="0dp"
     app:iconSize="35dp" />

这样它将会是这个样子

- AmrDeveloper

Answer 6

为了让按钮看起来漂亮，可以在MaterialButton上使用以下样式：

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

- Roberto Leinardi

---

这个解决方案真棒。 - Sayok Majumder

Answer 7

如果您想使用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>

- Milad ranjbar

Answer 8

不幸的是，使用XML可绘制对象并覆盖背景意味着您必须显式设置颜色，而不能使用应用程序样式颜色。

与其为每种行为硬编码按钮颜色，我选择了硬编码角半径，感觉略微不那么狡猾，并保留了所有默认按钮行为（在按下时更改颜色和其他视觉效果），默认情况下使用应用程序样式颜色：

1. 将android:layout_height和android:layout_width设置为相同的值

2. 将app:cornerRadius设置为高度/宽度的一半

   （实际上，任何大于或等于高度/宽度一半的值都可以，因此为了避免在更新高度/宽度时需要更改半径，您可以将其设置为非常高的值，例如1000dp，风险在于如果这种行为发生变化，则可能会出现问题。）

3. 将android:insetBottom和android:insetTop设置为0dp以获得完美的圆形

例如：

<Button
    android:insetBottom="0dp"
    android:insetTop="0dp"
    android:layout_height="150dp"
    android:layout_width="150dp"
    app:cornerRadius="75dp"
    />

- bmaupin

Answer 9

以下是简单的操作步骤，您可以在drawable.xml中创建一个可绘制资源文件，例如round_button.xml，并粘贴以下代码。

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

    <item>
       <shape
           android:shape="oval">

           <solid
               android:color="@color/button_start_gradient_color"/>
       </shape>
    </item>
    <item
        android:drawable="@drawable/microphone"/>
</layer-list>

注意：使用自己的颜色和可绘制资源，我已经使用了@drawable/microphone。

以下是结果 [1]：https://istack.dev59.com/QyhdJ.webp

- Shashank Pandey

Answer 10

如果你想使用 ImageButton，可以使用以下代码。它会创建带有材质水波纹效果的圆形 ImageButton。

<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_settings_6"
android:background="?selectableItemBackgroundBorderless"
android:padding="10dp"
/>

- karatuno