webentwicklung-frage-antwort-db.com.de

Wie zeichnet man einen Kreis innerhalb eines Kreises mit Android-XML-Formen?

Ich versuche, einen Daumen für eine Suchleiste für meine App zu machen, und ich möchte einen inneren Kreis, der von einem anderen, größeren (halbtransparenten) äußeren Kreis umgeben ist. Ich versuche, layer-list zu verwenden, habe aber Probleme. Unten ist mein 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>

Ich würde erwarten, einen kleinen roten Kreis über einem größeren blauen Kreis zu sehen, aber alles, was ich sehe, ist der kleine rote Kreis. Hat jemand irgendwelche Ideen?

36
jas7457

Die einzige Möglichkeit, wie ich dies erreichen kann, besteht darin, einen transparenten Strich für den inneren (d. H. Oberen) Kreis zu definieren, der den Unterschied zwischen der Größe des größeren und des kleineren Kreises darstellt.

Zum Beispiel das:

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

...sieht aus wie das:

enter image description here

67
Sean Barbeau

hoffe es wird helfen Dies ist eine * .xml-Datei

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

Es ist spät, aber vielleicht hilfreich. Sie können die Auffüllung für den Mittelkreis verwenden.

<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

Ich konnte dieses Problem lösen, indem ich die Breite und Höhe von <item> im <layer-list> einstellte. Wahrscheinlich nicht so empfehlenswert, scheint aber in Ordnung zu sein, wie für den Hintergrund des Symbols in der Listenansicht mit festen Abmessungen. 

<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

Ich bin hier auf der Suche nach dem Zeichnen eines konzentrischen Kreises gelandet, der nur Antworten mit dem Ansatz der Ebenenliste gefunden hat. Wenn Sie also meine Antwort nur mit shape hinzufügen, hoffe ich, dass es jemandem helfen wird.

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

Und das ist das Ergebnis .  enter image description here

1
war_Hero

Hoffe unter Code-Ausschnitt hilft :) 

<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

dies ist eine kurze Version der Antwort von 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

Sie müssen nur das Shap Attribut verwenden

xml code drawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="oval">
    <stroke Android:width="2dp" Android:color="#B91969"/>
    <size Android:width="@dimen/dim_16dp" Android:height="@dimen/dim_16dp" />
    <solid Android:color="#0f0" />
</shape>

Ausgabe

enter image description here

0
ND1010_