web-dev-qa-db-fra.com

Bouton arrondi sous Android

Je veux créer des boutons arrondis dans un programme Android. J'ai regardé Comment créer EditText avec des coins arrondis?

Ce que je veux réaliser, c'est:

  1. Bouts arrondis
  2. Changer le fond/l'apparence du bouton sur différents états (comme Onclick, Focus)
  3. Utilisez mon propre fichier PNG pour l'arrière-plan et ne créez pas de forme.
androidandroid-buttonrounded-corners
63
Arnab C.

Vous pouvez créer un bouton de coin arrondi sans avoir recours à ImageView.

Une ressource de sélecteur d'arrière-plan, button_background.xml: 

<?xml version="1.0" encoding="utf-8" ?> 
     <selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
     <!--  Non focused states 
      --> 
      <item Android:state_focused="false" Android:state_selected="false" Android:state_pressed="false" Android:drawable="@drawable/button_unfocused" /> 
      <item Android:state_focused="false" Android:state_selected="true" Android:state_pressed="false" Android:drawable="@drawable/button_unfocused" /> 
     <!--  Focused states 
      --> 
      <item Android:state_focused="true" Android:state_selected="false" Android:state_pressed="false" Android:drawable="@drawable/button_focus" /> 
      <item Android:state_focused="true" Android:state_selected="true" Android:state_pressed="false" Android:drawable="@drawable/button_focus" /> 
     <!--  Pressed 
      --> 
      <item Android:state_pressed="true" Android:drawable="@drawable/button_press" /> 
    </selector>

Pour chaque état, une ressource pouvant être extraite, par ex. button_press.xml:

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
  <stroke Android:width="1dp" Android:color="#FF404040" /> 
  <corners Android:radius="6dp" /> 
  <gradient Android:startColor="#FF6800" Android:centerColor="#FF8000" Android:endColor="#FF9700" Android:angle="90" /> 
</shape>

Notez l'attribut corners, cela vous donne des coins arrondis!

Puis définissez l’arrière-plan dessinable sur le bouton:

Android:background="@drawable/button_background"

EDIT (9/2018) : La même technique peut être utilisée pour créer un bouton circulaire. Un cercle est en réalité un bouton carré dont la taille du rayon est définie sur la moitié du côté du carré.

De plus, dans l'exemple ci-dessus, les stroke et gradient ne sont pas des éléments nécessaires, ce ne sont que des exemples et des moyens de voir la forme du coin arrondi.

113
CSmith

Si vous avez besoin d'un bouton arrondi sous Android, créez un fichier XML "RoundShapeBtn.xml" pouvant être dessiné.

 <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle" Android:padding="10dp">   
  <solid Android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->
  <corners
   Android:bottomRightRadius="10dp"
   Android:bottomLeftRadius="10dp"
   Android:topLeftRadius="10dp"
   Android:topRightRadius="10dp"/>
</shape>

Ajoutez ceci à votre code de bouton:

Android:background="@drawable/RoundShapeBtn"
63
Pir Fahim Shah

créer un fichier xml dans un dossier pouvant être dessiné sous Android comme: 

rounded_button.xml

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

    <corners Android:radius="20dp"/> // if you want clear round shape then make radius size is half of your  button`s height.
    <solid Android:color="#EEFFFFFF"/> // Button Colour
    <padding
        Android:bottom="5dp"
        Android:left="10dp"
        Android:right="10dp"
        Android:top="5dp"/>

</shape>

Maintenant, ce fichier XML comme arrière-plan de vos boutons.

 <Button
        Android:id="@+id/button"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="center"
        Android:background="@drawable/rounded_button"
        Android:text="@string/button_text"
        Android:textColor="@color/black"/>
12
Arunendra

Il est recommandé par Google de ne pas imiter les éléments d'interface utilisateur d'autres plates-formes. Je ne mettrais pas de boutons de style iOS arrondis dans une application Android.

7
Christopher Perry

Étendez ImageView comme ceci:

public class RoundedImageView extends ImageView {
  private static final String TAG = "RoundedImageView";

  private float mRadius = 0f;

  public RoundedImageView(Context context) {
    super(context);
  }

  public RoundedImageView(Context context, AttributeSet attrs) {
    super(context, attrs);

    // retrieve styles attributes
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundedView);
    mRadius = a.getDimension(R.styleable.RoundedView_radius, 0f);
    a.recycle();
  }

  @Override
  protected void onDraw(Canvas canvas) {
    // only do this if we actually have a radius
    if(mRadius > 0) {
      RectF rect = new RectF(0, 0, getWidth(), getHeight());
      Path clipPath = new Path();
      clipPath.addRoundRect(rect, mRadius, mRadius, Path.Direction.CW);
      canvas.clipPath(clipPath);
    }
    super.onDraw(canvas);
  }
}

Et appliquez votre ressource d'arrière-plan normale à celle-ci et elle devrait être découpée avec des coins arrondis.

4
Cody Caughlan

Cela peut être fait en utilisant l'attribut corner. Regardez le XML ci-dessous.

<item>
    <shape Android:shape="rectangle" >
        <stroke
            Android:height="1.0dip"
            Android:width="1.0dip"
            Android:color="#ffee82ee" />

        <solid Android:color="#ffee82ee" />

        <corners
            Android:bottomLeftRadius="102.0dip"
            Android:bottomRightRadius="102.0dip"
            Android:radius="102.0dip"
            Android:topLeftRadius="102.0dip"
            Android:topRightRadius="102.0dip" />
    </shape>
</item>

2
Rohit Goyal

Il est bien préférable de placer les états et les formes des boutons dans un fichier de sélection xml. Cela devrait faire fonctionner votre application plus rapidement/mieux. Essayez ceci (avec la permission de Introduction to Android Application Development). Ne pas envoyer de spam ici pour montrer que ce n'est pas mon code.

    <?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="12dip" />
     <stroke Android:width="1dip" Android:color="#333333" />
     <gradient Android:angle="-90" Android:startColor="#333333"      Android:endColor="#555555"  />            
    </shape>
    </item>
    <item Android:state_focused="true">
    <shape Android:shape="rectangle"  >
     <corners Android:radius="12dip" />
     <stroke Android:width="1dip" Android:color="#333333" />
     <solid Android:color="#58857e"/>       
    </shape>
    </item>  
    <item >
    <shape Android:shape="rectangle"  >
     <corners Android:radius="12dip" />
     <stroke Android:width="1dip" Android:color="#333333" />
     <gradient Android:angle="-90" Android:startColor="#333333" Android:endColor="#555555" />            
    </shape>
    </item>

    </selector>

Conseil de conception P.S.: il est préférable d’utiliser les gradients et les rectangles arrondis lorsque vous savez à peine qu’ils sont présents - utilisez-le à bon escient.

1
Evan Espey

Créez une ressource Drawable nommée btnOval -> puis code passé;

 <?xml version="1.0" encoding="utf-8"?>
      <shape xmlns:Android="http://schemas.Android.com/apk/res/Android" 
Android:shape="oval"  
Android:padding="10dp">   
      <solid Android:color="#6E6E6E"/> 
    </shape>

et l'utilisateur à l'intérieur de la balise bouton comme,

<Button
andorid:width=""
Android:hieght=""
Android:background="@Drawable/btnOval"
/>
0
Ashik Azeez

Des boutons arrondis peuvent être créés à l’aide de la forme d’anneau, voir http://www.zoftino.com/Android-shape-drawable-examples

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:innerRadius="0dp"
    Android:shape="ring"
    Android:thickness="40dp"
    Android:useLevel="false">
    <solid Android:color="@color/colorPrimary" />
    <padding Android:bottom="50dp"
        Android:left="16dp"
        Android:right="16dp"
        Android:top="50dp"/>
</shape>
0
Arnav Rao

Essayez ci-dessous le code Créez un fichier dessinable appelé circular_button.xml et insérez le ci-dessous

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle">
<solid Android:color="#008577" />
<corners Android:bottomRightRadius="100dp"
    Android:bottomLeftRadius="100dp"
    Android:topRightRadius="100dp"
    Android:topLeftRadius="100dp"/>
</shape>

Puis changez l’arrière-plan du bouton en ce fichier dessinable

 <Button
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:background="@drawable/circle_button"
                Android:text="Button"/>

Si vous voulez un bouton de cercle complet, vous pouvez utiliser le dessin ci-dessous

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

    <solid
        Android:color="#008577"/>

    <size
        Android:width="120dp"
        Android:height="120dp"/>
</shape>
0
Udara Abeythilake