web-dev-qa-db-fra.com

Comment faire les coins d'un bouton rond?

Je veux faire les coins d'un button. Existe-t-il un moyen simple de réaliser cela dans Android?

androidandroid-buttonrounded-corners
414
artist

Si tu veux quelque chose comme ça

Button preview

voici le code.

1.Créez un fichier xml dans votre dossier pouvant être dessiné tel que 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 bouton alors 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" />
630
Md. Monsur Hossain Tonmoy

Créez un fichier XML dans un dossier pouvant être dessiné 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 pour lequel vous souhaitez créer des angles ronds.

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"
325
Sandip Jadhav

créer un fichier shape.xml

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"/>
28
Almostafa

C'est si simple. Créez un fichier XML comme ci-dessous. Définissez-le comme arrière-plan pour le bouton. Changez l'attribut rayon à votre guise, 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 sur votre bouton:

<Button
    Android:id="@+id/button1"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/button_background"/>
26
Pavithra Purushothaman

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"/>
14
Sky

Un moyen simple que j'ai découvert consistait à créer un nouveau fichier XML dans le dossier pouvant être dessiné, puis à pointer l'arrière-plan des boutons sur 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>
11
AntonioSanchez

Créer un fichier rounded_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 utiliser le fichier this.xml comme arrière-plan de bouton

<Button
Android:id="@+id/btn"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:background="@drawable/rounded_btn"
Android:text="Test" />
11
Ravi Makvana

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
Deep Singh Baweja

bouton de style avec icône enter image description here

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

forme.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" />
6
A.G.THAMAYS

si vous utilisez des éléments vectoriels, vous devez simplement spécifier un élément <corners> dans votre définition. J'ai couvert cela dans un blog post .

Si vous utilisez des éléments dessinables bitmap/9 correctifs, vous devez créer les coins avec transparence dans l'image bitmap.

4
Mark Allison