Android 创建带有一个圆角的自定义按钮

Question

我想从这张取自 material.io 的图像中实现黑色按钮，该图像用于展开底部 sheet。按钮的内容并不重要，它实现一个圆角。当尝试设置角半径时，我只能将所有 4 个角都圆化，而不是一个单独的角。有人可以告诉他们他们是怎么做到的吗？他们没有在该网站上提供此按钮的任何示例。

到目前为止我有这个不起作用：

 <com.google.android.material.button.MaterialButton
            android:id="@+id/btnBottomSheetGratitude"
            android:layout_width="wrap_content"
            android:layout_height="55dp"
            android:insetTop="0dp"
            android:insetBottom="0dp"
            android:gravity="center_vertical"
            android:text="Examples"
            android:background="@drawable/btn_bottom_sheet"
            app:icon="@drawable/ic_baseline_arrow_drop_up_24"
            app:iconPadding="4dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

 
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:topLeftRadius="1000dp" />
<solid android:color="@color/white" />
</shape>

Answer 1

使用 Material 按钮：

在 styles.xml

中定义样式

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

<style name="MyShapeAppearance">
    <item name="cornerFamily">rounded</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerFamilyBottomLeft">cut</item>
    <item name="cornerSizeTopLeft">10dp</item>
</style>

然后在您的 MaterialButton 中使用此样式。有关详细信息，请参阅 docs or an usage example.

普通按钮：

您可以使用 ShapeDrawable 作为按钮的背景，例如：

bg_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#ff000000"/>

    <corners android:topLeftRadius="10dp"/>
</shape>

然后在你的布局中：

<Button
    android:id="@+id/cornerButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_button"
    ... />

Answer 2

我不知道你究竟尝试了什么，但可以这样尝试：

android:topLeftRadius="10dp"

Answer 3

您可以使用 shapeAppearanceOverlay 属性：

    <com.google.android.material.button.MaterialButton
        android:insetTop="0dp"
        android:insetBottom="0dp"
        app:shapeAppearanceOverlay="@style/one_rounded"
        app:icon="@drawable/ic_add_24px"
        app:iconPadding="4dp"
      />

与：

<style name="one_rounded">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">0dp</item>
    <item name="cornerSizeTopLeft">50%</item>
</style>

Answer 4

android:background 属性不适用于 MaterialButton，因为它在内部使用。我认为他们已经可以在库的最新 alpha 版本中更改它，但还不能在稳定版本中更改。所以这就是你要怎么做。

首先，确保您的应用主题继承自 Material 主题，以便我们可以使用所有 material 属性（您可以使用任何 material 主题).

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
...
</style>

现在，为 MaterialButton 的 ShapeAppearance 定义样式。

<style name="shapeAppearance">
    <item name="cornerSizeTopLeft">20dp</item>
</style>

最后，在定义按钮的 XML 代码中使用它。

<com.google.android.material.button.MaterialButton
            android:id="@+id/loginButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@style/Widget.MaterialComponents.Button"
            app:shapeAppearance="@style/shapeAppearance"
            android:text="@string/main_fragment_login_label"/>

现在您的按钮应该如下所示，这正是您要找的。

Android 创建带有一个圆角的自定义按钮

Android create custom button with one rounded corner

android

material-design

android-button

material-components-android

material-components

使用 Material 按钮：

普通按钮：