自定义圆形按钮答案

【问题标题】：Custom circle button自定义圆形按钮
【发布时间】：2012-04-10 16:03:58
【问题描述】：

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

我也不知道怎么做自定义按钮！

你有什么建议吗？

【问题讨论】：

你必须扩展按钮类并覆盖onDraw方法。
但是问题就在这里，如果我扩展它，并且用户触摸超出圆圈，将调用 Onlcick，如何解决这个问题。
为什么不将圆形图像设置为按钮的背景？
我做了简单的 OnDrawn ，它显示在设计视图上，但是当我想运行应用程序时，它在加载时出现这个问题：android.view.InflateException: Binary XML file line #52: Error inflating class com.inaros.magicbox._customButtonPlay

标签： android android-button

【解决方案1】：

像这样使用 xml 可绘制对象：

将以下内容另存为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 Material Effect：虽然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" />

重要：

如果您希望它显示所有这些状态（启用、禁用、突出显示等），您将使用选择器作为described here。
您必须保留这两个文件才能使可绘制对象向后兼容。否则，您将在之前的 android 版本中遇到奇怪的异常。

【讨论】：

drawable 文件夹是指打开一个名为'drawable' 的文件夹，或者将其保存在drawable-mdpi、hdpi 等...？
@Jjang 不，你只需要将它保存到'drawable'文件夹，drawable的任何xml资源通常都保存在'drawable'中，而不是mdpi，hdpi等中。
K thx，直到现在我还没有可绘制的文件夹（只有 mdpi、hdpi... 和 -v21）:)
P.S 如何给按钮一个默认的波纹颜色？就像默认情况下为应用程序中的所有按钮着色的灰色一样。
@AdilSoomro 我需要你的电子邮件地址，或者给我发邮件adilm717@gmail.com,adil from pak

【解决方案2】：

Markushi 编写了一个具有惊人效果的圆形按钮小部件。点击here！

【讨论】：

如何将它与非圆形图像一起使用？
请注意：此答案中链接的库现已弃用。作者（Markushi）建议改用Floating Action Button。
@ABoschman 我们可以在圆形按钮小部件中放置文本吗？或者只是用于drawables
@RuchirBaronia 我认为你真的应该考虑 Android FAB。您想在一个小圆形按钮内放置多少散文？它似乎是为图标而生的。签出：google.com/design/spec/components/…
@ABoschman 嘿，但是我真的很喜欢这个库中这个按钮的效果。有什么办法吗？

【解决方案3】：

通过官方的材料组件库，您可以使用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。值得强调的是需要app:iconPadding="0dp" 以确保图标居中。在找到这个之前，我花了很多时间尝试中心。 app:iconGravity 缺少“中心”值似乎是一种疏忽。
感谢@Gabriele Mariotti。对我来说工作得很好！
要从按钮中移除高度，可以使用以下样式：Widget.MaterialComponents.Button.UnelevatedButton.Icon

【解决方案4】：

AngryTool for custom android button

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

【讨论】：

【解决方案5】：

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

【讨论】：

这个解决方案很棒

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

我选择硬编码圆角半径，而不是硬编码每个行为的按钮颜色，这样感觉稍微不那么hacky并保留所有默认按钮行为（按下时更改颜色和其他视觉效果）并使用应用程序样式颜色默认：

将android:layout_height 和android:layout_width 设置为相同的值
将app:cornerRadius 设置为高度/宽度的一半

（实际上看起来任何大于或等于一半的高度/宽度都有效，因此为避免每次更新高度/宽度时都必须更改半径，您可以将其设置为非常高的值，例如作为1000dp，如果这种行为发生变化，它可能会崩溃。）
将android:insetBottom 和android:insetTop 设置为0dp 得到一个完美的圆

例如：

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

【讨论】：

【解决方案8】：

您可以使用 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" />

会是这样的

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

这里是你可以简单地执行的方法，在 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://i.stack.imgur.com/QyhdJ.png

【讨论】：

【解决方案11】：

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

您也可以导入您的 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"
/>

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

【讨论】：