如何在android中制作药丸状的按钮？

Question

我不确定该怎么称呼……也许是药丸状的。谷歌搜索圆角会发现很多人想要一个带有圆角的矩形按钮。这有点不同，但更像是2个圆和一个矩形，我尝试将其绘制为。

我想通过在android上使用xml可绘制背景，使按钮的形状类似于下面的第一个图像，但其中包含文本和图标图像：

我已经尝试过了，看起来不错，但是如果按钮的长度变化了，它将无法缩放，最终会出现一个矩形和一些其他奇怪的东西。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="40dp" android:top="0dp" android:bottom="0dp">

        <shape android:shape="oval" >
            <solid android:color="#666666"/>
            <size android:width="40dp" android:height="40dp"></size>

        </shape>

    </item>

    <item android:left="20dp" android:right="20dp">
        <shape android:shape="rectangle" >
            <solid android:color="#666666"/>
            <size android:width="20dp" android:height="20dp"></size>
        </shape>


    </item>

    <item android:right="40dp">
        <shape android:shape="oval" >
            <solid android:color="#666666"/>
            <size android:width="40dp" android:height="40dp"></size>

        </shape>

    </item>


</layer-list>

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS82RTh6WC5wbmcifQ==” alt =“在此处输入图像描述”>

我也尝试过这样创建xml drawable：

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
            <solid android:color="#666666" />

            <corners android:radius="20dp"/>
            <size android:height="20dp" android:width="60dp"></size>
        </shape>

看起来像这样：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS8xWU9uUS5wbmcifQ==” alt =“在此处输入图像描述”>

我看过this persons example，但是当我做他做的事情时，我的结果并没有完全圆满。它们更像上面的第二张图片。

Answer 1

您可以尝试将以下代码保存到drawable（例如pill_bg.xml）：

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

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

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

    <stroke
        android:width="1dp"
        android:color="#efefef" />

    <size
        android:width="300dp"
        android:height="120dp" />

</shape>

看看尺寸部分和半径。然后将可绘制对象应用于视图，例如：

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="250dp"
    android:layout_height="60dp"
    android:background="@drawable/pill_bg" />

如您所见，您的视图可以具有不同的大小，背景将被缩放。

Answer 2

此大小可在任何视图背景下正确调整。

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

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

    <solid android:color="@android:color/holo_red_dark" />
</shape>

Answer 3

从v1.1.0-beta01 of the Material Components Android library开始，您可以使用MaterialButton和shapeAppearance样式轻松定义药丸按钮，该按钮不需要您事先知道按钮的高度或依靠猜测足够高的半径值在按钮侧面的中间。

简单定义这样的样式：

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

并像下面这样在MaterialButton上进行设置：

<com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ...
        app:shapeAppearanceOverlay="@style/PillShapeAppearance"
        />

我看过的所有其他答案都忽略的关键是将cornerSize设置为百分比值，以便正确应用其支持的分数值。

Answer 4

好吧，您可以在任何设计程序中创建该按钮，也可以使其类似，使其看起来像被按下，然后使选择器可绘制并将其分配给按钮背景。这就是我做很棒按钮的方式