studio - ¿Cómo definir una forma de círculo en un archivo dibujable xml de Android?

shapes in android

Question

Tengo algunos problemas para encontrar la documentación de las definiciones de formas en XML para Android. Me gustaría definir un círculo simple con un color sólido en un archivo XML para incluirlo en mis archivos de diseño.

Lamentablemente, la Documentación en android.com no cubre los atributos XML de las clases de Shape. Creo que debería usar un ArcShape para dibujar un círculo, pero no hay una explicación sobre cómo establecer el tamaño, el color o el ángulo necesario para hacer un círculo a partir de un Arco.

Answer 1

Aquí hay un simple circle_background.xml para pre-material:

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

Puede usarlo con el atributo ''android:background="@drawable/circle_background" en la definición de diseño de su botón

Answer 2

Código para círculo simple

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

Answer 3

Establecer esto como su fondo de vista

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

Para uso en círculo sólido:

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

Sólido con trazo:

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

Nota : para hacer que la forma oval aparezca como un círculo, en estos ejemplos, ya sea su opinión de que está utilizando esta forma, ya que su fondo debe ser un cuadrado o debe establecer las propiedades de height y width de la etiqueta de forma en un valor igual .

Answer 4

Este es un círculo simple como dibujable en Android.

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

Answer 5

Mira en las muestras de Android SDK. Hay varios ejemplos en el proyecto ApiDemos:

/ ApiDemos / res / drawable /

• black_box.xml
• shape_5.xml
• etc

Se verá algo como esto para un círculo con un relleno degradado:

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

Answer 6

No pude dibujar un círculo dentro de mi ConstraintLayout por alguna razón, simplemente no pude usar ninguna de las respuestas anteriores.

Lo que funcionó perfectamente es un simple TextView con el texto que sale, cuando presionas "Alt + 7":

 <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#0075bc"
            android:textSize="40dp"
            android:text="•"></TextView>

Answer 7

Puedes probar esto ...

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

Además, puede ajustar el radio del círculo ajustando el android:thickness .

Answer 8

Puedes usar VectorDrawable como se muestra a continuación:

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

El anterior XML se procesa como:

Answer 9

Si quieres un circulo como este

Intenta usar el siguiente código:

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

Answer 10

Solo usa

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

Answer 11

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

Answer 12

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

Answer 13

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