Question

我想制作一个与此图像完全相同的按钮

Capsule button

我想使用用于生成此类按钮的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

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

只需遵循以下两个简单步骤：

在可绘制文件夹中创建一个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>

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

Answer 3

考虑自定义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文件夹中，让我们说它将保存为＆＃34; button_bg.xml ＆＃34;，因此在声明时布局中的按钮xml：

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

Answer 4

以下是在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 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组件，请将适当的lib添加到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

请尝试以下操作，适用于任何视图尺寸：

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

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

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

</shape>

Answer 7

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

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

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

7 个答案: