Comment arrondir les coins d'un bouton?


457

Je veux faire les coins d'un buttontour. Existe-t-il un moyen simple d'y parvenir dans Android?




11
ce n'est pas une question large, c'est absolument pertinent. le marquer comme «trop large» n'est qu'une mentalité SO qui doit être changée. Arrêtez d'être des dictateurs.
user734028

2
d'accord avec user734028: qu'est-ce que diable comment se ferment pour être trop large ?? la seule façon dont cela aurait pu être plus précis si l'OP avait demandé comment régler le rayon du coin sur N pixels. Allons!
nyholku

Réponses:


679

Si vous voulez quelque chose comme ça

Aperçu du bouton

voici le code.

1.Créez un fichier xml dans votre dossier dessinable comme mybutton.xml et collez le balisage suivant:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <gradient android:angle="-90" android:startColor="#345953" android:endColor="#689a92"  />            
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <solid android:color="#58857e"/>       
        </shape>
    </item>  
    <item >
       <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <gradient android:angle="-90" android:startColor="#8dbab3" android:endColor="#58857e" />            
       </shape>
    </item>
</selector>

2. Utilisez maintenant ce dessin pour l'arrière-plan de votre vue. Si la vue est un bouton, quelque chose comme ceci:

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textColor="#ffffff"
    android:background="@drawable/mybutton"
    android:text="Buttons" />

il s'est écrasé: Causé par: org.xmlpull.v1.XmlPullParserException: ligne de fichier XML binaire # 24: la balise <item> nécessite un attribut 'drawable' ou une balise enfant définissant un drawable
Zennichimaro

3
pouvons-nous le faire par programme.
Killer

Il indique que le sélecteur d'élément doit être déclaré EDIT: Désolé, le fichier se trouvait dans le dossier de valeurs au lieu du dessinable. Quand je l'ai transféré, cela a fonctionné.
F0r3v3r-A-N00b

qu'est-ce qui crée l'ombre au clic? j'essaie de réduire la largeur des ombres en bas ... pas de chance
Neville Nazerane

Je ne vois pas ce que montrer comment les sélecteurs sont codés a à voir avec expliquer comment les coins des boutons doivent être codés.
TavernSenses

345

Créez un fichier xml dans un dossier dessinable comme ci-dessous

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
    <!-- you can use any color you want I used here gray color-->
    <solid android:color="#ABABAB"/> 
    <corners android:radius="10dp"/>
</shape>

Appliquez-le comme arrière-plan au bouton que vous souhaitez arrondir.

Ou vous pouvez utiliser un rayon séparé pour chaque coin comme ci-dessous

android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"

57
Vous pouvez simplement raccourcir les coins pour Android: radius = "10dp", qui s'appliquera à tous
Ben Simpson

22
Ce n'est pas une solution complète car elle ne prend pas en charge les différents états des boutons (enfoncé, concentré, par défaut). Pour une meilleure solution, voir stackoverflow.com/questions/9334618/rounded-button-android
JosephL

3
@BenSimpson, vous verrez qu'il y a une différence de forme lorsque vous ne mettez qu'une seule ligne au lieu de définir chacun des rayons d'angle individuellement.
Garima Tiwari

cela fonctionne plus parfaitement que la réponse mise en évidence. merci mille fois!
Dan Linh

37

Créez un fichier XML comme ci-dessous. Définissez-le comme arrière-plan pour le bouton. Modifiez l'attribut radius selon votre souhait, si vous avez besoin de plus de courbe pour le bouton.

button_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/primary" />
    <corners android:radius="5dp" />
</shape>

Définissez l'arrière-plan de votre bouton:

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_background"/>

30

créer shape.xml dans un dossier dessinable

comme shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <stroke android:width="2dp"
    android:color="#FFFFFF"/>
  <gradient 
    android:angle="225"
    android:startColor="#DD2ECCFA"
    android:endColor="#DD000000"/>
<corners
    android:bottomLeftRadius="7dp"
    android:bottomRightRadius="7dp"
    android:topLeftRadius="7dp"
   android:topRightRadius="7dp" />
</shape>

et dans myactivity.xml

vous pouvez utiliser

<Button
    android:id="@+id/btn_Shap"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:text="@string/Shape"
    android:background="@drawable/shape"/>

16

Créer un fichier myButton.xml

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

ajouter à votre bouton

 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/myButton"/>

16

Existe-t-il un moyen simple d'y parvenir dans Android?

Oui, il y en a aujourd'hui, et c'est très simple.
Utilisez simplement le MaterialButtondans la bibliothèque de composants de matériaux avec l' app:cornerRadiusattribut.

Quelque chose comme:

    <com.google.android.material.button.MaterialButton
        android:text="BUTTON"
        app:cornerRadius="8dp"
        ../>

entrez la description de l'image ici

Il suffit d'obtenir un Bouton aux coins arrondis.

Vous pouvez utiliser l'un des styles de bouton Matériau . Par exemple:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    .../>

entrez la description de l'image ici

À partir de la version 1.1.0, vous pouvez également modifier la forme de votre bouton. Utilisez simplement l' shapeAppearanceOverlayattribut dans le style du bouton:

  <style name="MyButtonStyle" parent="Widget.MaterialComponents.Button">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MyApp.Button.Rounded</item>
  </style>

  <style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">16dp</item>
  </style>

Ensuite, utilisez simplement:

<com.google.android.material.button.MaterialButton
   style="@style/MyButtonStyle"
   .../>

Vous pouvez également appliquer le shapeAppearanceOverlaydans la disposition xml:

<com.google.android.material.button.MaterialButton
   app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
   .../>

Le shapeAppearancepermet également d'avoir des formes et des dimensions différentes pour chaque coin:

<style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSizeTopLeft">32dp</item>
    <item name="cornerSizeBottomLeft">32dp</item>
</style>

entrez la description de l'image ici


Il nécessite également d'utiliser le thème Matériel
Vlad

@Vlad Oui, les composants matériels nécessitent un thème matériel.
Gabriele Mariotti

11

Le moyen le plus simple que j'ai découvert était de créer un nouveau fichier xml dans le dossier dessinable, puis de pointer l'arrière-plan des boutons vers ce fichier xml. Voici le code que j'ai utilisé:

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

<solid android:color="#ff8100"/>
<corners android:radius="5dp"/>

</shape>

3
Pour restaurer l'effet d'ondulation du thème du matériau dans l'arrière-plan dessinable personnalisé, ajoutez-le android:foreground="?attr/selectableItemBackground"dans la vue des boutons. Voir stackoverflow.com/questions/38327188/…
Mr-IDE

11

Créer un fichier round_btn.xml dans le dossier Drawable ...

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
     <solid android:color="@color/#FFFFFF"/>    

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

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

     <corners android:bottomRightRadius="5dip" android:bottomLeftRadius="5dip" 
         android:topLeftRadius="5dip" android:topRightRadius="5dip"/> 
  </shape>

et utilisez ce fichier.xml comme arrière-plan du bouton

<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/rounded_btn"
android:text="Test" />

7

Ce lien contient toutes les informations dont vous avez besoin. Ici

Shape.xml

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

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

    <corners    android:bottomLeftRadius="8dip"
                android:topRightRadius="8dip"
                android:topLeftRadius="1dip"
                android:bottomRightRadius="1dip"
                />
</shape>

et main.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">

    <TextView   android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Hello Android from NetBeans"/>

    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nishant Nair"
            android:padding="5dip"
            android:layout_gravity="center"
            android:background="@drawable/button_shape"
            />
</LinearLayout>

Cela devrait vous donner le résultat souhaité.

Bonne chance


6

bouton de style avec icône entrez la description de l'image ici

   <Button
        android:id="@+id/buttonVisaProgress"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="5dp"
        android:background="@drawable/shape"
        android:onClick="visaProgress"
        android:drawableTop="@drawable/ic_1468863158_double_loop"
        android:padding="10dp"
        android:text="Visa Progress"
        android:textColor="@android:color/white" />

shape.xml

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="14dp" />
<gradient
    android:angle="45"
    android:centerColor="#1FA8D1"
    android:centerX="35%"
    android:endColor="#060d96"
    android:startColor="#0e7e1d"
    android:type="linear" />
<padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />
<size
    android:width="270dp"
    android:height="60dp" />
<stroke
    android:width="3dp"
    android:color="#000000" />


4

si vous utilisez des dessins vectoriels, il vous suffit de spécifier un élément <corners> dans votre définition de dessin. J'ai couvert cela dans un article de blog .

Si vous utilisez des tirages bitmap / 9 patchs, vous devrez créer les coins avec transparence dans l'image bitmap.


0

dossier dessinable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF"/>
    <corners android:radius="30dp"/>
    <stroke android:width="2dp" android:color="#999999"/>
</shape>

dossier de disposition

<Button
    android:id="@+id/button2"
    <!-- add style to avoid square background -->
    style="@style/Widget.AppCompat.Button.Borderless"
    android:background="@drawable/corner_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

assurez-vous d'ajouter du style pour éviter l'arrière-plan carré

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.