如何在android中制作胶囊形状的按钮？

Question

我想做一个和这张图片一模一样的按钮

我想使用一个 xml 文件来生成这样的按钮。谁能告诉我该怎么做？

Answer 1

我终于找到了使用 xml 文件的方法。这是给我胶囊形状按钮的 xml 文件的代码。

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

  <corners
    android:bottomLeftRadius="30dp"
    android:bottomRightRadius="30dp"
    android:radius="60dp"
    android:topLeftRadius="30dp"
    android:topRightRadius="30dp" />

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

  <padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />

  <size
    android:height="60dp"
    android:width="270dp" />

</shape>    

Answer 2

只需通过 cornerRadius 属性和您喜欢的宽度使用 MaterialButton。

 <com.google.android.material.button.MaterialButton
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            app:cornerRadius="18dp"
            android:text="BUTTON"
            />

您也可以使用 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>

Answer 3

我没有在这里尝试所有的答案，但我相信其中一些/全部都是有效的。 接受的答案也有效，但可以简化。由于我喜欢优雅和简单的解决方案，我想出了自己的解决方案。基本上，与View 的宽度和高度相比，我们只需要添加足够大的半径，这样它就会创建一个圆角。在这种情况下，我输入1000dp 以确保安全。我们甚至根本不需要添加android:shape="rectangle"。

只需执行以下 2 个简单步骤：

1. 在您的可绘制文件夹中创建一个 XML 文件。例如，我们将其命名为bg.xml

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

2. 然后您可以在布局 XML 文件中使用它作为您的 View 属性 android:background="@drawable/bg" 或者直接在代码view.setBackgroundResource(R.drawable.bg)

Answer 4

考虑为其定制一个shape 并在该形状内使用corners：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp"/> <!-- increasing the value, increases the rounding. And as  TTransmit said, to make it like a capsule make the radius half of your button height -->
    <solid android:color="#AAAAAA"/> <!-- the button color -->

</shape>

因此，将该形状保存在您的 /drawable 文件夹中，假设它将保存为“button_bg.xml”，因此在布局 xml 中声明 Button 时：

<Button
    android:background="@drawable/button_bg"
    android:layout_height="20dp"
                .
                .                          />

Answer 5

它被称为材料中的芯片，可以这样使用：

<com.google.android.material.chip.Chip
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world"/>

更多信息可以在here和here找到。

要在您的项目中使用 Material 组件，您需要将适当的库添加到您的 build.gradle：

dependencies {
    // ...
    implementation 'com.google.android.material:material:1.0.0-beta01'
    // ...
  }

更多关于向您的项目添加材料的信息可以在here找到。

或者，您可以使用最新版本的支持设计库：

<android.support.design.chip.Chip
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:chipText="@string/hello_world"/>

同时拉入适当的库：

dependencies {
    // ...
    implementation 'com.android.support:appcompat-v7:28.0.0-alpha1'
    implementation 'com.android.support:design:28.0.0-alpha1'
    // OR
    implementation 'com.android.support:design-chip:28.0.0-alpha1'
    // ...
}

有关后一种方法的更多信息，请参阅this answer。

Answer 6

这是在 xml 中创建按钮的代码，但是如果你想将按钮创建为胶囊形状，则必须添加背景

        <Button
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            **android:background="@drawable/button_background"**
            android:text="@string/image" >
        </Button>

在drawable文件夹中创建button_background.xml，在button_background.xml中写入如下代码

         <?xml version="1.0" encoding="UTF-8"?>

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

             android:shape="rectangle" android:padding="40dp">

          <!-- you can use any color you want I used here gray color-->

         <solid android:color="#01A9DB"/>

          <corners

          android:bottomRightRadius="20dp"

          android:bottomLeftRadius="20dp"

          android:topLeftRadius="20dp"

          android:topRightRadius="20dp"/>

      </shape>

Answer 7

试试下面，适用于任何视图大小：

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

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

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

</shape>