Transparenter Kreis mit Rand


83

Ich versuche mit XML in Android einen Kreis mit nur einem Rand zu erstellen:

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

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

</shape>

Der Code, den ich verwendet habe, ist oben angegeben. Ich bekomme jedoch eine feste Scheibe und keinen Ring. Ich möchte die Ausgabe nur mit XML und nicht mit Canvas erhalten. Was mache ich falsch?

Vielen Dank.

EDIT: Habe es dank der Antwort unten zum Laufen gebracht. Hier ist mein letzter Code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="1.9"
    android:useLevel="false" >

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

    <size android:width="100dp"
     android:height="100dp"/>

    <stroke android:width="1dp"
    android:color="#FFFFFF"/>

</shape>

Antworten:


187

Versuchen Sie so etwas

<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/transparent" />

    <stroke
        android:width="2dp"
        android:color="@android:color/darker_gray" />
</shape>

Update: gemacht android:thicknessRatio="2", um den Kreis zu schließen (mit Nexus 5 - Lollipop)


7
Ich habe es android:thicknessRatio="2"zu einem geschlossenen Ring gemacht (Nexus 5, Lollipop)
David

Der Bereich außerhalb des Kreises wird für mich nicht als transparent angezeigt.
Paradox

@ Paradox versuchen Bildansicht anstelle der Schaltfläche
Nikunj Patel

33

Verwenden Sie dies, es wird funktionieren

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

<gradient
    android:centerX=".6"
    android:centerY=".40"
    android:endColor="@android:color/transparent"
    android:gradientRadius="20"
    android:startColor="@android:color/transparent"
    android:type="radial" />

<stroke
    android:width="1dp"
    android:color="#FFFFFF" />

<size
    android:height="100dp"
    android:width="100dp" />

</shape>

13

Hohl

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
        <stroke
            android:width="1dp"
            android:color="@color/indicator_unselected" />
    </shape>

Voll

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

6

Der Stricheffekt kann erzielt werden, indem ein transparentes Oval mit dem Strich einer gewünschten Farbe gezeichnet wird (im Beispiel # 000):

<?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/transparent" />
    <stroke
        android:width="1dp"
        android:color="#000" />
    <size
        android:width="40dp"
        android:height="40dp" />
</shape>

3

Wenn Sie Vector Drawables verwenden können, versuchen Sie dies

<vector android:height="24dp" android:viewportHeight="512.0"
    android:viewportWidth="512.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FFFFFF" android:fillType="evenOdd"
        android:pathData="M0,0L512,0L512,512L0,512L0,0ZM256,511C396.8,511 511,396.8 511,256C511,115.2 396.8,1 256,1C115.2,1 1,115.2 1,256C1,396.8 115.2,511 256,511Z"
        android:strokeColor="#00000000" android:strokeWidth="1"/>
</vector>

2

Sie können Android eingebauten Wert für transparent als @android:color/transparentoder verwenden #0000oder verwenden#00000000

für oben war das Starten für 4 Stellen zuerst für Alpha und für den 8-stelligen Wert die ersten zwei Ziffern für Alpha.

Wenn Sie nur eine 3-stellige oder 6-stellige Farbe als Standard-Alpha-Wert angeben, geben Sie das Alpha dieses Farbwerts ein, indem Sie einen 4-stelligen oder 8-stelligen Wert übergeben


1
Hallo Pratik, ich habe den Alpha-Teil deiner Antwort nicht verstanden. Ich habe der XML-Datei die Zeile <solid android: color = "# 0000" /> hinzugefügt. Aber immer noch das gleiche Ergebnis.
Anirudh

Dieses Alpha wurde verwendet, um die Deckkraft der Farbe einzustellen. Wenn Sie die 4 0 oder 8 0 als vollständig transparent einstellen, erhöhen Sie mit der Erhöhung der ersten 2 Ziffer des 8 0-Werts nur den Wert der Deckkraft
Pratik

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

        <gradient
            android:endColor="@android:color/transparent"
            android:gradientRadius="20"
            android:startColor="@android:color/transparent" />

        <stroke
            android:width="1dp"
            android:color="#d9d9d9" />

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

    <item
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp">
        <shape android:shape="oval" >

            <gradient
                android:endColor="@android:color/transparent"
                android:gradientRadius="20"
                android:startColor="@android:color/transparent" />

            <stroke
                android:width="1dp"
                android:color="#b3b3b3" />

            <size
                android:height="100dp"
                android:width="100dp" />
        </shape>
    </item>
</layer-list>

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

            <stroke
                android:width="4dp"
                android:color="@color/colorPrimaryDark" />
            <corners android:radius="0dp" />
        </shape>
    </item>
    <item
        android:top="1dp"
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp">

        <shape android:shape="oval">
            <solid android:color="@color/colorRed" />
            <size android:height="@dimen/_100sdp"
                android:width="@dimen/_100sdp"></size>
        </shape>

    </item>

</layer-list>

0

Wenn Sie die Farbe auf einstellen #00000000, ist das Ergebnis transparent. Sie würden es so machen wollen, wenn Sie es in der Zukunft der Entwicklung ändern wollen. Wenn Sie beispielsweise möchten, dass es rot und teilweise transparent ist, ist dies #ff000088die letzten beiden Zahlen sind die Deckkraft. Ich mache es so, um zukünftige Änderungen einfacher zu machen.


0
<shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:innerRadiusRatio="2"
     android:shape="ring"
     android:thicknessRatio="1"
     android:useLevel="false">

    <gradient
        android:type="radial"
        android:gradientRadius="8dp"
        android:endColor="@color/colorDarkPurple"
        android:elevation="5dp"
    />

    <stroke
        android:width="2dp"
        android:color="@color/colorLilac"/>
</shape>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.