Bouton arrondi dans 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 accomplir est:

  1. Bord Arrondi Boutons
  2. Changer l'arrière-plan du Bouton/apparence différents états (Comme Onclick, Focus)
  3. utilisez mon propre PNG pour l'arrière-plan et ne créez pas de forme.
58
demandé sur Community 2012-02-18 00:02:16

9 réponses

vous pouvez faire un bouton de coin arrondi sans avoir recours à une vue D'image.

Un arrière-plan sélecteur de ressources, 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 à dessiner, p.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 permet d'arrondir les coins!

puis régler le dessin de fond 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 vraiment juste un bouton carré avec la taille du rayon de 1/2 le côté du carré

en outre, dans l'exemple au-dessus de la stroke et gradient ne sont pas des éléments nécessaires, ils sont juste des exemples et des moyens que vous serez en mesure de voir la forme du coin arrondi

103
répondu CSmith 2018-09-07 13:34:55

si vous avez besoin d'un bouton arrondi dans Android, puis créer un fichier XML" RoundShapeBtn.xml" comme drawable.

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

ajouter à votre code:

android:background="@drawable/RoundShapeBtn"
57
répondu Pir Fahim Shah 2015-10-17 20:14:28

créer le fichier xml dans le dossier dessinable dans 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 vos boutons de fond.

 <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"/>
11
répondu Arunendra 2015-02-13 07:27:58

il est recommandé par Google que vous n'imitiez pas les éléments D'interface utilisateur d'autres plateformes. Je ne mettrais pas des boutons de style iOS arrondis dans une application Android.

8
répondu Christopher Perry 2012-02-18 00:19:06

étendre ImageView comme suit:

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 appliquer votre ressource de fond normale à elle et il doit être coupé avec des coins arrondis.

4
répondu Cody Caughlan 2012-02-17 20:07:17

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
répondu Rohit Goyal 2014-05-24 20:26:14

il est beaucoup mieux de mettre les états de bouton et les formes dans 1 fichier de sélecteur xml. Cela devrait rendre votre application plus rapide / Meilleure. Essayez ceci (avec la permission de Introduction to Android Application Development). Ce n'est pas juste 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>

P.SR-Conseil de conception: les gradients et les rectangles arrondis sont les mieux utilisés quand vous pouvez à peine dire qu'ils sont là-utiliser à bon escient.

1
répondu Evan Espey 2014-08-16 17:12:01

les boutons arrondis peuvent être créés en utilisant la forme de l'anneau dessiner aussi, 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
répondu Arnav Rao 2018-03-05 12:40:07

créer ressource tirable nommée btnOval-- > alors 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 l'étiquette de bouton comme,

<Button
andorid:width=""
android:hieght=""
android:background="@Drawable/btnOval"
/>
0
répondu Ashik Azeez 2018-06-19 11:47:02