web-dev-qa-db-fra.com

comment faire un bouton en forme de capsule dans android?

Je veux faire un bouton exactement comme dans cette image

Capsule button

Je veux utiliser un fichier XML qui sera utilisé pour produire un tel bouton. Quelqu'un peut-il me dire comment faire cela? 

androidbutton
22
user3393926

enfin j'ai trouvé le moyen de le faire avec un fichier xml. Voici le code du fichier XML qui m'a donné le bouton de forme de capsule.

<?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>
45
user3393926

Je n'ai pas essayé toutes les réponses ici, mais je crois que certaines/toutes sont des œuvres . La réponse acceptée est également une œuvre, mais elle peut être simplifiée. Puisque j'aime élégante et simple solution, je propose ma propre solution. Fondamentalement, nous avons juste besoin d’ajouter un rayon assez grand par rapport à votre largeur et hauteur View pour créer un coin arrondi. Dans ce cas, je mets 1000dp pour le rendre sûr. Nous n'avons même pas besoin d'ajouter Android:shape="rectangle" du tout.

Il suffit de suivre ces 2 étapes simples:

  1. Créez un fichier XML dans votre dossier pouvant être dessiné. Par exemple, appelons-le 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. Ensuite, vous pouvez l’utiliser dans le fichier XML de présentation en tant que propriété View et Android:background="@drawable/bg".__ ou directement dans le code view.setBackgroundResource(R.drawable.bg).

4
HendraWD

pensez à personnaliser une shape et utilisez corners à l'intérieur de cette forme:

<?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>

Donc, enregistrez cette forme dans votre dossier /drawable, disons qu'elle sera sauvegardée sous le nom " button_bg.xml ", donc lorsque vous déclarez le bouton dans votre mise en page xml:

<Button
    Android:background="@drawable/button_bg"
    Android:layout_height="20dp"
                .
                .                          />
2
Muhammed Refaat

C'est ce qu'on appelle une puce dans le matériau et peut être utilisé comme suit:

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

Plus d'informations peuvent être trouvées ici et ici .

Pour utiliser les composants Material dans votre projet, vous devez ajouter la bibliothèque appropriée à votre build.gradle:

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

Vous trouverez plus d’informations sur l’ajout de matériel à votre projet ici .

Vous pouvez également utiliser la dernière version de la bibliothèque de conception de support:

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

Tirez également dans les bibliothèques appropriées:

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

Voir cette réponse pour plus d'informations sur cette dernière approche.

1
David Kennedy

Essayez ci-dessous, fonctionne avec n'importe quelle taille de vue:

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

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

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

</shape>
0
Kevin Crain

Voici le code pour créer un bouton en XML, mais si vous voulez créer un bouton en forme de capsule, vous devez ajouter l’arrière-plan.

        <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>

créez button_background.xml dans un dossier pouvant être dessiné, écrivez le code suivant dans 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>
0
Gangadhar katteboyena