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>
android xml geometry transparent Anirudh
quelle

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)

Stinepike
quelle
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>
Anupam Sharma
quelle
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>
Hitesh Sahu
quelle
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>
Alex Burov
quelle
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>
Tyrannisieren
quelle
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

Pratik
quelle
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>
Palak Jain
quelle
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>
Mohsinali
quelle
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.

Jack Papel
quelle
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>
Patricia Milou
quelle