web-dev-qa-db-fra.com

Comment dessiner un cercle à l'intérieur d'un cercle en utilisant des formes Android xml?

J'essaie de créer un pouce pour une barre de recherche pour mon application et je souhaite avoir un cercle intérieur entouré d'un cercle extérieur différent, plus grand (semi-transparent). J'essaie d'utiliser layer-list, mais j'ai des problèmes. Ci-dessous mon code ...

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
<item>
    <shape
        Android:shape="oval" >
        <solid Android:color="#00f" />

        <size
            Android:height="15dp"
            Android:width="15dp" />
    </shape>
</item>

<item>
    <shape
        Android:shape="oval" >
        <solid Android:color="#f00" />

        <size
            Android:height="10dp"
            Android:width="10dp" />
    </shape>
</item>

</layer-list>

Je m'attendrais à voir un petit cercle rouge au-dessus d'un cercle bleu plus grand, mais tout ce que je vois, c'est le petit cercle rouge. Quelqu'un a-t-il une idée?

javaandroidxml
36
jas7457

La seule façon pour que cela fonctionne est de définir un trait transparent pour le cercle intérieur (c'est-à-dire supérieur) qui correspond à la différence entre la taille du grand et du petit cercle.

Par exemple, ceci:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<!-- Larger blue circle in back -->
<item>
    <shape Android:shape="oval">
        <solid Android:color="#00f"/>
        <size
                Android:width="15dp"
                Android:height="15dp"/>
    </shape>
</item>
<!-- Smaller red circle in front -->
<item>
    <shape Android:shape="oval">
        <!-- transparent stroke = larger_circle_size - smaller_circle_size -->
        <stroke Android:color="@Android:color/transparent"
                Android:width="5dp"/>
        <solid Android:color="#f00"/>
        <size
                Android:width="10dp"
                Android:height="10dp"/>
    </shape>
</item>
</layer-list>

...ressemble à ça:

enter image description here

67
Sean Barbeau

j'espère que ça va aider. Ceci est dessinable * .xml

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

      <item>
          <shape Android:shape="oval">
              <padding
                  Android:bottom="1dp"
                  Android:left="1dip"
                  Android:right="1dp"
                  Android:top="1dp" />

              <solid Android:color="#000" />
          </shape>
      </item>
      <item>
          <shape Android:shape="oval">
              <padding
                  Android:bottom="1dp"
                  Android:left="1dip"
                  Android:right="1dp"
                  Android:top="1dp" />

              <solid Android:color="#EEE" />
          </shape>
      </item>
    </layer-list>
10
Евгений Дюндин

Il est tard, mais peut-être utile, vous pouvez utiliser un rembourrage pour le cercle central.

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item>
    <shape
        Android:shape="oval">
        <solid
            Android:color="#00fff"/>
        <padding
            Android:bottom="30dp"
            Android:left="30dp"
            Android:right="30dp"
            Android:top="30dp"/>
        <stroke
            Android:width="1dp"
            Android:color="@color/holo_red_light"/>
    </shape>
</item>
<item>
    <shape
        Android:shape="oval">
        <solid
            Android:color="#00666666"/>

        <size
            Android:width="120dp"
            Android:height="120dp"/>
        <stroke
            Android:width="1dp"
            Android:color="@color/holo_red_light"/>
    </shape>

</item>
</layer-list>
8
Amir

J'ai réussi à résoudre ce problème en définissant la largeur et la hauteur du <item> dans le <layer-list>. Probablement pas aussi conforme aux meilleures pratiques, mais semble bien fonctionner comme c'était le cas pour l'arrière-plan de l'icône dans la vue liste qui avait des dimensions fixes. 

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <!-- larger circle at the back -->
    <item Android:height="54dp" Android:width="54dp" Android:gravity="center">
        <shape
               Android:shape="oval">

            <solid
                Android:color="#0000FF"/>

            <!-- thicker outer boarder -->
            <stroke
                Android:width="2dp"
                Android:color="#000000"/>
        </shape>
    </item>


    <!-- inner circle -->
    <item Android:height="40dp" Android:width="40dp" Android:gravity="center">
        <shape
               Android:shape="oval"  >
            <solid
                Android:color="#00FF00"/>

            <stroke
                Android:width="1dp"
                Android:color="#000000"/>

        </shape>
    </item>
</layer-list>
6
scottyab

Je me suis retrouvé ici à la recherche d'un cercle concentrique qui ne contenait que des réponses avec une approche par liste de couches; j'ajoute donc ma réponse en utilisant uniquement la variable shape, j'espère que cela aidera quelqu'un.

<shape Android:shape="oval">
    <solid Android:color="#FFF" />
    <size
        Android:width="15dp"
        Android:height="15dp" />
    <stroke
        Android:width="6dp"
        Android:color="#000" /> 
</shape>

Et c'est le résultat .  enter image description here

1
war_Hero

J'espère que l'extrait de code aide :) 

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
        <!-- larger circle at the back -->
        <item>
            <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="#FFFFFF" />
                  <stroke
                      Android:width="1dp"
                      Android:color="#000000" /></shape>
        </item>

    <!-- inner circle -->
    <item  >
        <shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
               Android:innerRadius="0dp"
               Android:shape="ring"
               Android:thicknessRatio="2.1"
               Android:useLevel="false" >
            <solid Android:color="#000000" />
            <stroke
                Android:width="1dp"
                Android:color="#FFFFFF" /></shape>
    </item>
</layer-list>
0
Niranjan

ceci est une version courte de la réponse de Sean Barbeau

<stroke
    Android:width="1dp"
    Android:color="@color/white" />
<solid Android:color="@color/dark_blue" />

<size
    Android:width="14dp"
    Android:height="14dp" />

0
Ankit Pandey