Как сделать форму капсулы в андроиде?

Я хочу сделать кнопку точно так же, как на этом изображении

Capsule button

Я хочу использовать xml файл, который будет использоваться для создания такой кнопки. Может ли кто-нибудь сказать мне, как это сделать?

Ответы

Ответ 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>    

Ответ 2

Я не попробовал все ответы здесь, но я полагаю, что некоторые/все они - работы. Принятый ответ тоже работает, но его можно упростить. Поскольку я люблю элегантное и простое решение, я придумала собственное решение. По сути, нам просто нужно добавить достаточно большой радиус по сравнению с вашими шириной и высотой View, чтобы получился круглый angular. В этом случае я положил 1000dp, чтобы сделать его безопасным. Нам даже не нужно добавлять android:shape="rectangle".

Просто выполните следующие 2 простых шага:

  1. Создайте файл XML в вашей папке Drawable. Например, назовите его 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)

Ответ 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, скажем, она будет сохранена как " button_bg.xml", поэтому при объявлении кнопки в вашем макете xml:

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

Ответ 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>

создайте 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>

Ответ 5

Он называется Chip in Material и может использоваться следующим образом:

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

Более подробную информацию можно найти здесь и здесь.

Чтобы использовать компоненты Material в своем проекте, вы должны добавить соответствующую библиотеку в свой build.gradle:

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

Подробнее о добавлении материала в ваш проект можно найти здесь.

Кроме того, вы можете использовать последнюю версию библиотеки поддержки дизайна:

<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'
    // ...
}

Смотрите этот ответ, чтобы узнать больше о последнем подходе.

Ответ 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>

Ответ 7

Просто используйте MaterialButton, используя атрибут app:cornerRadius и свою любимую ширину.

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

enter image description here