如何使用 Material Design 主题制作圆形按钮？

Question

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

// 图片来自谷歌

要在 android 中使用材质主题来实现这一点，请将：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

只需在布局中使用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 2

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

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

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

Answer 3

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

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

Answer 4

创建一个可绘制的 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>