如何使用 Material Design Theming 使按钮变圆？

Question

我希望我的按钮具有圆角，例如：

// 图片来自 google

要在 android 中使用 material 主题实现此目的是设置：shapeAppearanceSmallComponent 有一个 rounded 角。

但是设置 shapeAppearanceSmallComponent 也会影响所有其他组件，例如 EditText 所以现在它们也被四舍五入了。

因此，我没有将其设置为 shapeAppearanceSmallComponent，而是创建了一个 shapeMaterialOverlay。将此叠加层设置为 buttonStyle 并将主题中的此按钮样式设置为默认按钮样式。

它有效，但仅适用于默认按钮。如果我需要这样的 TextButton：

<Button
    ...
    style="@style/Widget.MaterialComponents.Button.TextButton"/>

TextButton不会被淘汰。因此，作为一种解决方法，我创建了从 TextButton 扩展的 MyTextButton 样式，并在那里设置了 shapeOverlay。

所以现在如果我需要 TextButton，我会这样做：

<Button
    ...
    style="@style/Widget.MaterialComponents.Button.MyTextButton"/>

相反。

我必须对所有其他按钮类型执行此操作。我想知道这种方法是否正确，如果不正确，谁能指导我如何正确执行此操作？

非常感谢。

Answer 1

您可以在按钮上设置可绘制的背景。可绘制对象可能如下所示：

<shape android:shape="rectangle">
    <solid android:color="@android:color/blue" />
    <corners android:radius="10dp" />
</shape>

这将为您的按钮背景提供圆角。

Answer 2

创建可绘制对象 xml 文件

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <stroke
        android:color="@color/colorPrimary"
        android:width="1dp" />
    <corners
        android:radius="30dp"
        android:bottomLeftRadius="30dp"
        />
    <solid
        android:color="#4c95ec"

        />

</shape>

Answer 3

只需在布局中使用 app:shapeAppearanceOverlay 属性。

<com.google.android.material.button.MaterialButton
        app:shapeAppearanceOverlay="@style/buttomShape"
        .../>

与：

  <style name="buttomShape">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

将它应用到所有按钮的唯一方法是像您刚才那样为所有按钮样式定义自定义样式。类似于：

  <style name="...." parent="Widget.MaterialComponents.Button">
    <item name="shapeAppearance">@style/buttomShape</item>
  </style>

  <style name="..."  parent="Widget.MaterialComponents.Button.TextButton">
    <item name="shapeAppearance">@style/buttomShape</item>
  </style>

Answer 4

您知道有一个网站可以为按钮创建自定义布局这是 Link

这是一个自动生成的代码，您无需编写代码。或许对大家有帮助

如何使用 Material Design Theming 使按钮变圆？

How to make buttons rounded with Material Design Theming?

android

material-design

android-button

material-components-android

material-components