背景可绘制项不适用于按钮

Question

我正在尝试用XML创建胶囊/药丸形按钮。我已经定义了一个可绘制对象并将其设置为按钮的背景，但是在预览中，当我运行该应用程序时，尽管背景可绘制对象是一个白色的椭圆形，但它仍显示为蓝色矩形。有谁知道为什么会这样？

这是按钮：

<Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/search_box"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="24dp"
            android:background="@drawable/button_capsule"
            android:text="@string/search"
            android:textColor="@color/precipLightBlue"/>

这是背景可绘制对象：

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="1000dp" />

    <solid android:color="@android:color/white" />

</shape>

Answer 1

您放置了未定义的形状。要定义椭圆形，应在标签中放置shape =“ oval”选项。尽管我认为您想要一个带有圆角的矩形，如我在您的代码中看到的那样。

半径1000dp也很多，这也许是个问题。 也定义尺寸。因为该形状没有任何大小，并且可能不会像在按钮定义中使用wrap_content一样显示

尝试一下：

<corners android:radius="30dp" />

<solid android:color="@android:color/white" />

<size
    android:width="200dp"
    android:height="50dp"/>

如果您想要椭圆形，请删除corners标签，并将android：shape =“ oval”添加为shape标签的属性

Answer 2

这是有关按钮可绘制背景的代码。

Xml代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center|top"
android:background="@color/colorLightPurple">
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="24dp"
    android:background="@drawable/button_bg"
    android:text="Search"
    android:textColor="@color/colorBlue"/>
</LinearLayout>

对于按钮背景，请添加相同的可绘制文件

Answer 3

似乎您所做的一切正确。只是一小部分，请尝试在shape标签中添加android:shape="rectangle"。

这是 button_capsule.xml 的外观。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="1000dp" />
    <solid android:color="@android:color/white" />
</shape>

希望这行得通。一切顺利。

Answer 4

要使用胶囊/药丸形按钮，您可以使用app:cornerRadius属性在官方MaterialButton中使用Material Component library。

 <com.google.android.material.button.MaterialButton
            android:layout_width="100dp"
            app:cornerRadius="32dp"
            ..../>

在1.1.0版中，您还可以使用app:shapeAppearanceOverlay属性来customize the shape组件

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

在样式定义中：

 <style name="ShapeAppearanceOverlay.ButtonRounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">32dp</item>
 </style>

您也可以尝试使用ExtendedFloatingActionButton：

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/exfab"
        android:layout_width="wrap_content"
        .... />

Answer 5

在材料设计版本1.2.0 中，他们已解决此问题，并添加了用于设置“材质按钮”背景的属性 这是最新版本的依赖项

com.google.android.material:material:1.2.0

并且如果您想删除可绘制对象顶部和底部之间的空间，以使可绘制对象获得整个宽度和高度，请使用以下两个属性

    android:insetTop="0dp"
    android:insetBottom="0dp"

如果要探索有关属性的更多信息，可以参考库的发行版并可以检查所有属性。

https://github.com/material-components/material-components-android/releases/tag/1.2.0

Answer 6

使用它。