Comment dessiner un rectangle arrondi dans l'interface utilisateur Android?


142

J'ai besoin de dessiner un rectangle arrondi dans l'interface utilisateur Android. Avoir le même rectangle arrondi pour TextViewet EditTextserait également utile.


Jetez un œil à cette discussion stackoverflow.com/questions/3646415/…
Kartik Domadiya

au moins vous devriez mettre l'image .. parce que si quelqu'un cherche la même question que ce sera facile à comprendre.
Himanshu Mori

Réponses:


216

Dans votre mise en page xml, procédez comme suit:

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

    <solid android:color="@android:color/holo_red_dark" />

    <corners android:radius="32dp" />

</shape>

En changeant le, android:radiusvous pouvez changer la quantité de «rayon» des coins.

<solid> est utilisé pour définir la couleur du dessin.

Vous pouvez utiliser le remplacer android:radiusavec android:bottomLeftRadius, android:bottomRightRadius, android:topLeftRadiuset android:topRightRadiusde définir le rayon pour chaque coin.


Ils n'ont pas demandé de dégradé. Je ne sais pas pourquoi cette réponse est acceptée.
Jerry Destremps

Je suppose que cela a été accepté parce que c'était là plusieurs mois avant la plupart des autres réponses. Je n'ai pas fait de développement Android depuis des années, donc je n'ai aucune idée de la façon dont la réponse pourrait être modifiée ou mise à jour maintenant pour supprimer le dégradé, bien que je suppose que la balise "solide" utilisée dans la réponse de Noundla Sandeep ci-dessous ferait probablement l'affaire l'astuce.
Andreass

125

Je pense que c'est exactement ce dont vous avez besoin.

Voici un fichier dessinable (xml) qui crée un rectangle arrondi. round_rect_shape.xml

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

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

    <corners
        android:bottomLeftRadius="8dp"
        android:bottomRightRadius="8dp"
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp" />

</shape>

Ici le fichier de mise en page: my_layout.xml

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/round_rect_shape"
    android:orientation="vertical"
    android:padding="5dp" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Something text"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#ff0000" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <requestFocus />
    </EditText>
</LinearLayout>

-> Dans le code ci-dessus, LinearLayout ayant l'arrière-plan (c'est le rôle clé à placer pour créer un rectangle arrondi). Ainsi, vous pouvez placer n'importe quelle vue comme TextView, EditText ... dans ce LinearLayout pour voir l'arrière-plan comme un rectangle rond pour tous.


1
Y a-t-il un moyen d'abstraire cela? Je veux pouvoir utiliser android:background="@drawable/round_rect_shape"dans mon styles.xml, mais utiliser différentes couleurs d'arrière-plan en définissant une autre propriété. Existe-t-il une autre option que de créer un dessin identique pour chaque couleur?
karl

Vous pouvez faire n'importe quelle forme arrondie de cette façon!
Sabri Meviş

22

Dans monodroid, vous pouvez faire comme ceci pour un rectangle arrondi, puis le conserver en tant que classe parent, editboxet d'autres fonctionnalités de mise en page peuvent être ajoutées.

 class CustomeView : TextView
    {
       public CustomeView (Context context, IAttributeSet ) : base (context, attrs)  
        {  
        }
       public CustomeView(Context context, IAttributeSet attrs, int defStyle) : base(context, attrs, defStyle)  
        {  
        }
       protected override void OnDraw(Android.Graphics.Canvas canvas)
       {
           base.OnDraw(canvas);
           Paint p = new Paint();
           p.Color = Color.White;
           canvas.DrawColor(Color.DarkOrange);

           Rect rect = new Rect(0,0,3,3);

           RectF rectF = new RectF(rect);


           canvas.DrawRoundRect( rectF, 1,1, p);



       }  
    }
}

4
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:padding="10dp"
  android:shape="rectangle">
    <solid android:color="@color/colorAccent" /> 
    <corners
      android:bottomLeftRadius="500dp"
      android:bottomRightRadius="500dp"
      android:topLeftRadius="500dp"
      android:topRightRadius="500dp" />
</shape>

Maintenant, dans quel élément vous souhaitez utiliser cette forme, ajoutez simplement: android:background="@drawable/custom_round_ui_shape"

Créez un nouveau XML dans un dessin nommé "custom_round_ui_shape"


1

Utilisez CardView pour le rectangle rond. CardView offre plus de fonctionnalités comme cardCornerRadius, cardBackgroundColor, cardElevation et bien d'autres. CardView rend l'interface utilisateur plus adaptée que le rectangle rond personnalisé dessiné.


1

Vous pouvez simplement définir un nouvel arrière-plan xml dans le dossier drawables

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

Après cela, incluez-le simplement dans votre TextView ou EditText en le définissant en arrière-plan.

<TextView
 android:id="@+id/textView"
 android:layout_width="0dp"
 android:layout_height="80dp"
 android:background="YOUR_FILE_HERE"
 Android:layout_weight="1"
 android:gravity="center"
 android:text="TEXT_HERE"
 android:textSize="40sp" />

0

Cliquez avec le bouton droit sur le dessinable et créez un nouveau fichier de mise en page xml au nom par exemple de button_background.xml. puis copiez et collez le code suivant. Vous pouvez le modifier selon vos besoins.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="14dp" />
<solid android:color="@color/colorButton" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
<size
android:width="120dp"
android:height="40dp" />
</shape>

Vous pouvez maintenant l'utiliser.

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

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

Veuillez fournir une explication à votre réponse
exécutable
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.