Wie definiere ich eine Kreisform in einer Android XML-Zeichnungsdatei?

687

Ich habe einige Probleme, die Dokumentation der Definitionen von Formen in XML für Android zu finden. Ich möchte einen einfachen Kreis definieren, der mit einer Volltonfarbe in einer XML-Datei gefüllt ist, um ihn in meine Layoutdateien aufzunehmen.

Leider werden in der Dokumentation auf android.com die XML-Attribute der Shape-Klassen nicht behandelt. Ich denke, ich sollte eine ArcShape verwenden, um einen Kreis zu zeichnen, aber es gibt keine Erklärung, wie man die Größe, die Farbe oder den Winkel festlegt , die erforderlich sind, um aus einem Bogen einen Kreis zu machen.

Janusz
quelle
3
Hier können Sie lesen, wie man eine Form zum Zeichnen erstellt: developer.android.com/guide/topics/resources/…
Mario Kutlev
Sie können die Kreis-XML von hier herunterladen. Developer.android.com/samples/WearSpeakerSample/res/drawable/…
Shahab Rauf
Die Android Dev-Dokumentation wurde seitdem verbessert. Jetzt werden android:shapeelement - Drawable-Ressourcen behandelt .
NaXa

Antworten:

1512

Dies ist ein einfacher Kreis, der in Android gezeichnet werden kann.

<?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
quelle
51
Und wie kann man die Farbe dynamisch ändern?
Ankit Garg
5
@AnkitGarg Sie können einen Farbfilter aus Java-Code anwenden (siehe Drawable-Klasse)
Milosmns
7
Ich versuchte es dpund es wurde in eine ovale Form verzerrt. Für mich hat es ptstattdessen behoben.
Tyler
13
Keine Notwendigkeit für die sizein der , shapewenn Sie später eine quadratische Größe für die Ansicht definieren.
Ferran Maylinch
2
Seine Form ist oval und nicht rund. Kann jemand bestätigen?
Tarun
762

Legen Sie dies als Hintergrund für Ihre Ansicht fest

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="1dp"
        android:color="#78d9ff"/>
</shape>

Geben Sie hier die Bildbeschreibung ein

Für durchgezogene Kreise verwenden:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="#48b3ff"/>
</shape>

Geben Sie hier die Bildbeschreibung ein

Fest mit Schlaganfall:

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

Geben Sie hier die Bildbeschreibung ein

Hinweis : Damit die ovalForm als Kreis angezeigt wird, sollte in diesen Beispielen entweder Ihre Ansicht, dass Sie diese Form als Hintergrund verwenden, ein Quadrat sein, oder Sie müssen die heightund width-Eigenschaften des Form-Tags auf den gleichen Wert setzen.

M. Reza Nasirloo
quelle
2
Schöne Lösung. Natürlich erscheint das Oval als Kreis, wenn Breite und Höhe der Ansicht gleich sind. Ich denke, es gab eine Möglichkeit, es als Kreis erscheinen zu lassen, unabhängig von der Größe der Ansicht.
Ferran Maylinch
2
@FerranMaylinch "Ich denke, es gab eine Möglichkeit, es als Kreis anzuzeigen, unabhängig von der Größe der Ansicht." Ich habe dies mit einem RelativeLayout gelöst, das sowohl eine ImageView (mit dem Kreis als "src" zum Zeichnen) mit fester Breite / Höhe als auch eine TextView umschließt, die beispielsweise einen Text umschließt.
Michele
Ich mache genau das Gleiche, aber der Kreis ist oval gezeichnet
Bugs Happen
Was ist, wenn wir es zur Laufzeit benötigen, um eine Textansicht mit verschiedenen Rahmenfarben zu erstellen?
Anshul Tyagi
@AnshulTyagi Ich glaube, Sie können dies tun, yourView.getBackground()indem Sie die Farbe manuell aufrufen und einstellen. Sie müssen es auf einen richtigen Typ wie umwandeln ShapeDrawable. Es gibt verwandte Fragen zu SO.
M. Reza Nasirloo
93

Code für einfachen Kreis

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

Schauen Sie sich die Android SDK-Beispiele an. Das ApiDemos-Projekt enthält mehrere Beispiele:

/ ApiDemos / res / drawable /

  • black_box.xml
  • shape_5.xml
  • usw

Für einen Kreis mit einer Verlaufsfüllung sieht es ungefähr so ​​aus:

<? 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" />
</ form>

goosemanjack
quelle
46

Sie können VectorDrawable wie folgt verwenden :

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

Die obige XML-Datei wird wie folgt dargestellt:

Geben Sie hier die Bildbeschreibung ein

Riyas PK
quelle
Hey, ich habe eine Polsterung zwischen Kreis und Ansichtsfenster. Kannst du mir helfen?
Ajeet
1
@Ajeet Sie können die Größe des Ansichtsfensters ändern und Sie können Ihren Pfad innerhalb der Gruppe setzen und die Übersetzung und den Maßstab angeben<group android:translateX="-10" android:translateY="15"><path ...
Boris Treukhov
2
@ Riyas kannst du den pathData Teil erklären? Was bedeuten diese Koordinaten?
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
quelle
1
Was machen die <corners />in einem Oval (das meiner Meinung nach keine Ecken hat)?
Scott Biggs
17

Hier ist eine einfache circle_background.xml für Vormaterial:

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

Sie können das Attribut 'android:background="@drawable/circle_background"in der Layoutdefinition Ihrer Schaltfläche verwenden

kip2
quelle
+ füge 'Größe' zu den Formen hinzu (abhängig vom Anwendungsfall).
TouchBoarder
17

Wenn Sie einen Kreis wie diesen wollen

Geben Sie hier die Bildbeschreibung ein

Versuchen Sie es mit dem folgenden Code:

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

Geben Sie hier die Bildbeschreibung ein

Tienanhvn
quelle
4

Sie können dies versuchen -

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

Sie können den Radius des Kreises auch durch Anpassen anpassen android:thickness.

Geben Sie hier die Bildbeschreibung ein

krhitesh
quelle
Das ist wirklich schön! Es braucht sicherlich etwas Spielzeit, da die Attribute nicht intuitiv sind. Ich habe es geschafft, dass jedes Mal ein schöner leerer Kreis für einen Rand angezeigt wird. Und Sie können Polster verwenden, um sicherzustellen, dass der gesamte Kreis angezeigt wird.
Scott Biggs
2

Ich konnte aus irgendeinem Grund keinen Kreis in meinem ConstraintLayout zeichnen, ich konnte einfach keine der obigen Antworten verwenden.

Was perfekt funktioniert hat, ist eine einfache Textansicht mit dem Text, der beim Drücken von "Alt + 7" ausgegeben wird:

 <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#0075bc"
            android:textSize="40dp"
            android:text="•"></TextView>
Иво Недев
quelle
Sehr schlau! Ich bin sicher, dass jemand dies nützlich finden wird.
Scott Biggs
sehr nützlich, großartig ..
Mahbubur Rahman Khan
1

Sie können versuchen, dies zu verwenden

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

und Sie müssen das Seitenverhältnis von Breite und Höhe nicht stören, wenn Sie dies für eine Textansicht verwenden

Cyril David
quelle
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
quelle
-23

Benutz einfach

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

quelle
26
Und wie kann ich das als Quellcode einer ImageView in meiner XML-Layoutdatei festlegen?
Janusz
Dies gilt nicht direkt für einen XML-Layoutcode
François Legrand
1
das funktioniert eigentlich. Danke :) val background = ShapeDrawable (OvalShape ()) background.paint.color = ContextCompat.getColor (Inhaber.getView (). Kontext, R.color.green) val Ebenen = arrayOf (Hintergrund, Ressource !!) greenRoundIcon.setImageDrawable (LayerDrawable (Ebenen))
David
So unbeliebt, aber es funktioniert und es hilft mir, danke
Pavel Shorokhov