Comment définir une forme de cercle dans un fichier dessinable Android XML?


687

J'ai des problèmes pour trouver la documentation des définitions des formes dans XML pour Android. Je voudrais définir un simple cercle rempli d'une couleur unie dans un fichier XML pour l'inclure dans mes fichiers de mise en page.

Malheureusement, la documentation sur android.com ne couvre pas les attributs XML des classes Shape. Je pense que je devrais utiliser une ArcShape pour dessiner un cercle, mais il n'y a aucune explication sur la façon de définir la taille, la couleur ou l'angle nécessaire pour faire un cercle à partir d'un arc.


3
Ici, vous pouvez lire comment créer une forme dessinable: developer.android.com/guide/topics/resources/…
Mario Kutlev


La documentation Android Dev a depuis été améliorée. Maintenant, il couvre l' android:shapeélément - ressources Drawable .
naXa

Réponses:


1515

Il s'agit d'un simple cercle comme dessinable dans Android.

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

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

   <size 
       android:width="120dp"
        android:height="120dp"/>
</shape>

51
Et comment changer la couleur dynamiquement?
Ankit Garg

5
@AnkitGarg vous pouvez appliquer un filtre de couleur à partir du code Java (voir la classe Drawable)
milosmns

7
J'ai essayé dpet il a été déformé en une forme ovale. Pour moi, utiliser à la ptplace l'a corrigé.
Tyler

13
Pas besoin de sizedans le shapesi vous définissez ultérieurement une taille carrée pour la vue.
Ferran Maylinch,

2
Sa forme est ovale et non ronde. Quelqu'un peut-il confirmer ??
Tarun

762

Définissez ceci comme arrière-plan de votre vue

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="1dp"
        android:color="#78d9ff"/>
</shape>

entrez la description de l'image ici

Pour une utilisation en cercle plein:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="#48b3ff"/>
</shape>

entrez la description de l'image ici

Solide avec coup:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#199fff"/>
    <stroke
        android:width="2dp"
        android:color="#444444"/>
</shape>

entrez la description de l'image ici

Remarque : Pour que la ovalforme apparaisse sous forme de cercle, dans ces exemples, votre vue selon laquelle vous utilisez cette forme comme arrière-plan doit être un carré ou vous devez définir les propriétés heightet widthde la balise de forme sur une valeur égale.


2
Belle solution. Bien sûr, l'ovale apparaît comme un cercle si la largeur et la hauteur de la vue sont identiques. Je pense qu'il y avait un moyen de le faire apparaître comme un cercle quelle que soit la taille de la vue.
Ferran Maylinch

2
@FerranMaylinch "Je pense qu'il y avait un moyen de le faire apparaître comme un cercle quelle que soit la taille de la vue." J'ai résolu cela en utilisant un RelativeLayout enveloppant à la fois une ImageView (avec le cercle comme "src" pouvant être dessiné) avec une largeur / hauteur fixe et une TextView qui enveloppe un texte (par exemple).
Michele

Je fais exactement la même chose, mais le cercle est dessiné comme ovale
Bugs Happen

Que faire si nous en avons besoin pour créer une vue de texte avec différentes couleurs de bordure au moment de l'exécution?
Anshul Tyagi

@AnshulTyagi Je pense que vous pouvez le faire en appelant yourView.getBackground()et en définissant la couleur manuellement. vous devez le convertir en un type approprié comme ShapeDrawable. Il y a des questions connexes sur SO à ce sujet.
M. Reza Nasirloo

93

Code pour cercle simple

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
        <solid android:color="#9F2200"/>
        <stroke android:width="2dp" android:color="#fff" />
        <size android:width="80dp" android:height="80dp"/>
</shape>

46

Regardez dans les exemples de SDK Android. Il existe plusieurs exemples dans le projet ApiDemos:

/ ApiDemos / res / drawable /

  • black_box.xml
  • shape_5.xml
  • etc

Cela ressemblera à quelque chose comme ceci pour un cercle avec un remplissage dégradé:

<? xml version = "1.0" encoding = "utf-8"?>
<shape xmlns: android = "http://schemas.android.com/apk/res/android" android: shape = "oval">
    <gradient android: startColor = "# FFFF0000" android: endColor = "# 80FF00FF"
            android: angle = "270" />
</shape>


46

Vous pouvez utiliser VectorDrawable comme ci-dessous:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="64"
    android:viewportWidth="64">

    <path
        android:fillColor="#ff00ff"
        android:pathData="M22,32
        A10,10 0 1,1 42,32
        A10,10 0 1,1 22,32 Z" />
</vector>

Le xml ci-dessus s'affiche comme:

entrez la description de l'image ici


Hé, j'ai un remplissage entre le cercle et la fenêtre. Peux-tu m'aider?
Ajeet

1
@Ajeet vous pouvez changer la taille de la fenêtre d'affichage et vous pouvez mettre votre chemin à l'intérieur du groupe et spécifier la traduction et l'échelle<group android:translateX="-10" android:translateY="15"><path ...
Boris Treukhov

2
@Riyas pouvez-vous expliquer la partie pathData? qu'impliquent ces coordonnées?
Darshan Miskin

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

    <!-- fill color -->
    <solid android:color="@color/white" />

    <!-- radius -->
    <stroke
        android:width="1dp"
        android:color="@color/white" />

    <!-- corners -->
    <corners
        android:radius="2dp"/>
</shape>

1
Que font les <corners />ovales (qui à mon avis n'ont pas de coins)?
Scott Biggs

18

Si vous voulez un cercle comme celui-ci

entrez la description de l'image ici

Essayez d'utiliser le code ci-dessous:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="2"
    android:useLevel="false" >
    <solid android:color="@android:color/white" />
    <stroke
        android:width="1dp"
        android:color="@android:color/darker_gray" />
</shape>

17

Voici un simple circle_background.xml pour le pré-matériel:

<?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="oval">
            <solid android:color="@color/color_accent_dark" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/color_accent" />
        </shape>
    </item>
</selector>

Vous pouvez utiliser avec l'attribut 'android:background="@drawable/circle_background"dans la définition de mise en page de votre bouton


+ ajouter une «taille» à la (aux) forme (s) (selon le cas).
TouchBoarder du

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

    <stroke
        android:width="10dp"
        android:color="@color/white"/>

    <gradient
        android:startColor="@color/red"
        android:centerColor="@color/red"
        android:endColor="@color/red"
        android:angle="270"/>

    <size 
        android:width="250dp" 
        android:height="250dp"/>
</shape>

7

res / drawble / circle_shape.xml

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

        <shape android:shape="oval">
            <solid android:color="#e42828"/>
            <stroke android:color="#3b91d7" android:width="5dp"/>
            <!-- Set the same value for both width and height to get a circular shape -->
            <size android:width="250dp" android:height="250dp"/>
        </shape>
    </item>
</selector>

entrez la description de l'image ici


4

Vous pouvez essayer ceci -

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="700"
    android:thickness="100dp"
    android:useLevel="false">

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

</shape>

Vous pouvez également ajuster le rayon du cercle en ajustant android:thickness.

entrez la description de l'image ici


C'est vraiment sympa! Il faut certainement jouer avec car les attributs ne sont pas intuitifs. J'ai réussi à obtenir ceci pour afficher un joli cercle vide pour une bordure à chaque fois. Et vous pouvez utiliser un rembourrage pour vous assurer que le cercle entier s'affiche.
Scott Biggs

2

Je ne pouvais pas dessiner un cercle à l'intérieur de mon ConstraintLayout pour une raison quelconque, je ne pouvais tout simplement pas utiliser l'une des réponses ci-dessus.

Ce qui a parfaitement fonctionné est une simple TextView avec le texte qui sort, lorsque vous appuyez sur "Alt + 7":

 <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#0075bc"
            android:textSize="40dp"
            android:text="•"></TextView>

Très intelligent! Je suis sûr que quelqu'un trouvera cela utile.
Scott Biggs

très utile, super ..
Mahbubur Rahman Khan

1

Vous pouvez essayer d'utiliser ceci

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

<item>
    <shape
        android:innerRadius="0dp"
        android:shape="ring"
        android:thicknessRatio="2"
        android:useLevel="false" >
        <solid android:color="@color/button_blue_two" />
    </shape>
</item>

et vous n'avez pas à déranger le rapport largeur / hauteur si vous l'utilisez pour une visualisation de texte


0
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/text_color_green"/>
            <!-- Set the same value for both width and height to get a circular shape -->
            <size android:width="250dp" android:height="250dp"/>
        </shape>
    </item>
</selector>

0

une forme de cercle dans un fichier dessinable XML Android

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@android:color/white" />
    <stroke
        android:width="1.5dp"
        android:color="@android:color/holo_red_light" />
    <size
        android:width="120dp"
        android:height="120dp" />
</shape>

Capture d'écran

entrez la description de l'image ici


-22

Utilisez simplement

ShapeDrawable circle = new ShapeDrawable( new  OvalShape() );

26
Et comment puis-je définir cela comme le src d'une ImageView dans mon fichier de disposition XML?
Janusz

Ce n'est pas directement applicable pour un code de mise en page xml
François Legrand

1
cela fonctionne réellement. Merci :) val background = ShapeDrawable (OvalShape ()) background.paint.color = ContextCompat.getColor (holder.getView (). Context, R.color.green) val couches = arrayOf (background, resource !!) greenRoundIcon.setImageDrawable (LayerDrawable (couches))
David

Tellement détesté, mais ça marche et ça m'aide, merci
Pavel Shorokhov
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.