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.

Janusz
la source
3
Ici, vous pouvez lire comment créer une forme dessinable: developer.android.com/guide/topics/resources/…
Mario Kutlev
Vous pouvez obtenir le cercle xml ici developer.android.com/samples/WearSpeakerSample/res/drawable/…
Shahab Rauf
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>
Arefin
la source
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.

M. Reza Nasirloo
la source
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>
Ravi Makvana
la source
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>

goosemanjack
la source
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

Riyas PK
la source
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>
Ashana.Jackol
la source
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>
Paraskevas Ntsounos
la source
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

kip2
la source
+ 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>
TeeTracker
la source
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

Tienanhvn
la source
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

krhitesh
la source
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>
Иво Недев
la source
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

Cyril David
la source
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>
varun setia
la source
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

Aftab Alam
la source
-22

Utilisez simplement

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

la source
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