如何在Android中创建一个带有圆形轮廓的Material按钮？

Question

如何在Android中创建一个带有圆形轮廓的Material按钮？

androidandroid-layoutandroid-buttonmaterial-componentsmaterial-components-android

36

我正在尝试创建一个带有中心图标的按钮。圆形的顶部和底部略微扁平。是否有一种不使用圆角半径的方法来实现这一点？这是我的按钮布局。

<com.google.android.material.button.MaterialButton
        android:id="@+id/start_dispenser_btn"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="175dp"
        android:layout_height="175dp"
        android:padding="14dp"
        app:cornerRadius="150dp"
        app:icon="@drawable/ic_play_arrow_black_60dp"
        app:iconGravity="end"
        app:iconSize="150dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/stop_dispenser_btn"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/test_dispenser_container"
        app:strokeColor="@color/background_black" />

- QThompson

1

@Md.Asaduzzaman 为什么不呢？也可以看看我的回答。它不需要自定义背景，只需使用 app:shapeAppearanceOverlay 属性即可。 - Gabriele Mariotti

3个回答

23

通过使用cornerRadius和inset，您可以获得圆角形状：

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
    android:layout_width="48dp"
    android:layout_height="48dp"
    app:cornerRadius="30dp"
    android:insetTop="0dp"
    android:insetBottom="0dp"
    android:insetLeft="0dp"
    android:insetRight="0dp"
    app:icon="@drawable/ic_menu"/>

- Ahmed Ashour

1

比起样式和图标形状，这个更好用。谢谢。 - StayCool

这个 Widget.MaterialComponents.OutlinedButton.Icon 样式对我来说是未定义的。 - carduque

@carduque 他们将其更改为“Widget.MaterialComponents.Button.OutlinedButton.Icon”。 - Ahmed Ashour

30dp和48dp之间的关系是什么？ - pete

1

我的答案是对以上答案的增强。为了构建可重用的资源：

<style name="ShapeAppearance.MdcShapeAppearance.SmallComponent.OutlinedCircleButton" parent="Widget.MaterialComponents.Button.OutlinedButton.Icon">
    <item name="android:insetLeft">@dimen/dip_0</item>
    <item name="android:insetRight">@dimen/dip_0</item>
    <item name="android:insetTop">@dimen/dip_0</item>
    <item name="android:insetBottom">@dimen/dip_0</item>
    <item name="android:padding">@dimen/dip_0</item>
    <item name="iconGravity">textStart</item>
    <item name="iconPadding">@dimen/dip_0</item>
</style>

然后，您可以将其用作按钮样式。不要忘记添加app:cornerRadius="@dimen/dip_20"，以使其成为您所需大小的圆形。

<com.google.android.material.button.MaterialButton
        android:id="@+id/btn_plus"
        style="@style/ShapeAppearance.MdcShapeAppearance.SmallComponent.OutlinedCircleButton"
        android:layout_width="@dimen/dip_20"
        android:layout_height="@dimen/dip_20"
        app:cornerRadius="@dimen/dip_20"
        android:layout_marginEnd="@dimen/dip_16"
        app:icon="@drawable/ic_plus"
        app:iconTint="?colorOnBackground"
        app:layout_constraintBottom_toBottomOf="@id/tv_total_checkout_product"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/tv_total_checkout_product"
        app:strokeColor="?colorOnBackground" />

- icgoogo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gabriele Mariotti · Accepted Answer

您可以使用 app:shapeAppearanceOverlay 属性来定义角落大小。您可以使用 50% 值。

<com.google.android.material.button.MaterialButton
    android:layout_width="50dp"
    android:layout_height="50dp"
    style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
    app:icon="@drawable/ic_add_24px"
    app:iconSize="24dp"
    app:iconGravity="textStart"
    android:padding="0dp"
    app:iconPadding="0dp"
    android:insetLeft="0dp"
    android:insetTop="0dp"
    android:insetRight="0dp"
    android:insetBottom="0dp"
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle"
    />

使用:

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

或者使用 style="@style/Widget.MaterialComponents.Button.Icon"

至少需要版本1.1.0。

使用 Jetpack Compose，您可以使用OutlinedButton并将CircleShape应用为形状：

    OutlinedButton(onClick = { /* ... */ },
        modifier= Modifier.size(50.dp), // it is important otherwise the button is oval
        shape = CircleShape,
        border= BorderStroke(1.dp, Color.Blue),
        contentPadding = PaddingValues(0.dp),
        colors = ButtonDefaults.outlinedButtonColors(contentColor =  Color.Blue)
    ) {
            Icon(Icons.Default.Add, contentDescription = "content description")
    }