自定义圆形按钮

Question

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

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

你有什么建议吗？

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选择这样做,创建一个文件夹drawable-v21中res,并拯救他人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>

并将其设置为Buttonxml的背景,如下所示:

<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. 您必须保留这两个文件,以使drawable向后兼容.否则,你将在以前的Android版本中遇到奇怪的例外.

Answer 2

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

Answer 3

AngryTool for custom android按钮

您可以使用此工具网站制作任何类型的自定义Android按钮...我使用此工具制作带圆角的圆形和方形按钮..访问它可能是我会帮助您

Answer 4

使用官方材料组件库，您可以使用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 ( 1.0.0-beta03)，您可以使用：

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

Answer 5

对于 FAB 外观的按钮，此样式位于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。

Answer 6

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

就会像这样