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

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 relleno con un color sólido en un archivo XML para incluirlo en mis archivos de diseño.

Lamentablemente, la documentación de android.com no cubre los atributos XML de las clases Shape. Creo que debería usar un forma de arco 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.

preguntado el 06 de julio de 10 a las 06:07

Aquí puede leer sobre cómo crear formas dibujables: desarrollador.android.com/guide/topics/resources/… -

Puede obtener el círculo xml desde aquí desarrollador.android.com/samples/WearSpeakerSample/res/drawable/… -

La documentación de Android Dev se ha mejorado desde entonces. Ahora cubre android:shape elemento - Recursos dibujables. -

17 Respuestas

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>

Respondido 25 ago 12, 13:08

¿Y cómo cambiar el color de forma dinámica? - ankitgarg

@AnkitGarg puede aplicar un filtro de color desde el código Java (consulte la clase Drawable) - milosmns

Lo intenté dp y se distorsionó en una forma ovalada. Para mi, usando pt en su lugar lo arregló. - Tyler

No es necesario el size en el capítulo respecto a la shape si luego define un tamaño cuadrado para la vista. - Ferrán Maylinch

Su forma es ovalada y no redonda. ¿Alguien puede confirmar? - Tarun

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

enter image description here

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>

enter image description here

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>

enter image description here

Nota: Para hacer el oval la forma aparece como un círculo, en estos ejemplos, o su vista de que está usando esta forma como fondo debe ser un cuadrado o tiene que establecer el height e width propiedades de la etiqueta de forma a un valor igual.

Respondido el 14 de Septiembre de 18 a las 10:09

Buena solucion. Por supuesto, el óvalo aparece como un círculo si el ancho y el alto de la vista son iguales. Creo que había una forma de hacer que pareciera un círculo sin importar el tamaño de la vista. - Ferrán Maylinch

@FerranMaylinch "Creo que había una manera de hacerlo aparecer como un círculo sin importar el tamaño de la vista". Resolví esto usando un RelativeLayout que envuelve un ImageView (con el círculo como dibujable "src") con ancho / alto fijo y un TextView que envuelve un texto (por ejemplo). - Michele

Estoy haciendo exactamente lo mismo, pero el círculo se dibuja como un óvalo. Suceden errores

¿Qué pasa si lo necesitamos para crear alrededor de una vista de texto con diferentes colores de borde en tiempo de ejecución? - Anshul Tyagui

@AnshulTyagi Creo que puedes hacerlo llamando yourView.getBackground() y configurar el color manualmente. necesitas convertirlo en un tipo adecuado como ShapeDrawable. Hay preguntas relacionadas en SO sobre esto. - M. Reza Nasirloo

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>

Respondido el 04 de junio de 15 a las 12:06

Puedes usar VectorDibujable como 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 xml anterior se representa como:

enter image description here

Respondido 30 Abr '18, 10:04

Oye, tengo un relleno entre el círculo y la ventana gráfica. ¿Me pueden ayudar? - Ajeet

@Ajeet puede cambiar el tamaño de la ventana gráfica y puede poner su ruta dentro del grupo y especificar la traducción y la escala <group android:translateX="-10" android:translateY="15"><path ... - Boris Treujov

@Riyas, ¿puedes explicar la parte de pathData? ¿Qué implican esas coordenadas? - Darshan Miskin

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

/ ApiDemos / res / drawable /

  • caja_negra.xml
  • forma_5.xml
  • etc.

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

Respondido 11 ago 11, 18:08

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

Respondido el 07 de junio de 18 a las 10:06

¿Qué <corners /> hacer en un óvalo (que en mi opinión no tiene esquinas)? - SM Bigggs

Aquí hay un simple circle_background.xml para prematerial:

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

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

Respondido el 10 de junio de 15 a las 00:06

+ agregue 'tamaño' a la (s) forma (s) (según el caso de uso). - Borde táctil

Si quieres una círculo como este

enter image description here

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

Respondido 27 Jul 19, 12:07

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>

enter image description here

Respondido 26 Feb 20, 17:02

una forma de círculo en un archivo dibujable XML de Android

<?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/white" />
    <stroke
        android:width="1.5dp"
        android:color="@android:color/holo_red_light" />
    <size
        android:width="120dp"
        android:height="120dp" />
</shape>

Captura de pantalla

enter image description here

Respondido el 05 de junio de 20 a las 20:06

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

Respondido 18 Oct 17, 22:10

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 android:thickness.

enter image description here

Respondido el 07 de junio de 18 a las 09:06

¡Esto es realmente bueno! Ciertamente, es necesario jugar un poco, ya que los atributos no son intuitivos. Me las arreglé para que esto mostrara un bonito círculo vacío para un borde cada vez. Y puede usar relleno para asegurarse de que se muestre todo el círculo. - SM Bigggs

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ó a la perfección es un TextView simple con el texto que sale, cuando presiona "Alt + 7":

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

contestado el 01 de mayo de 18 a las 14:05

¡Muy inteligente! Estoy seguro de que a alguien le resultará útil. - SM Bigggs

Puedes intentar usar esto

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

y no tiene que preocuparse por la relación de aspecto de ancho y alto si está usando esto para una vista de texto

respondido 13 nov., 19:12

eso es lo que quiero gracias - Mosa

Puede crear un dibujo personalizado para cambiar el color y el radio del círculo de forma dinámica

import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.drawable.Drawable;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

public class CircleDrawable extends Drawable {

    private Paint circlePaint;
    private int fillColor;
    private int strokeColor;
    private float radius;

    public CircleDrawable(int fillColor, int strokeColor, float radius) {
        this.fillColor = fillColor;
        this.strokeColor = strokeColor;
        this.radius = radius;
        circlePaint=new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    @Override
    public void draw(@NonNull Canvas canvas) {
        int x=getBounds().centerX();
        int y=getBounds().centerY();
        //draw fill color circle
        circlePaint.setStyle(Paint.Style.FILL);
        circlePaint.setColor(fillColor);
        canvas.drawCircle(x,y,radius,circlePaint);
        // draw stroke circle
        circlePaint.setStyle(Paint.Style.STROKE);
        circlePaint.setColor(strokeColor);
        circlePaint.setStrokeWidth(5);
        canvas.drawCircle(x,y,radius,circlePaint);
    }

    @Override
    public void setAlpha(int alpha) {
        circlePaint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {
         circlePaint.setColorFilter(colorFilter);
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }
}

Configure esto desde la interfaz de usuario para obtener la forma del círculo

imageView.setImageDrawable(new CircleDrawable(Color.RED,Color.YELLOW,100));

La salida será así

enter image description here

respondido 10 mar '21, 06:03

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

Respondido 10 Oct 18, 12:10

Sólo tiene que utilizar

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

Respondido 06 Jul 10, 11:07

¿Y cómo puedo configurarlo como src de un ImageView en mi archivo de diseño XML? - Janusz

Esto no es directamente aplicable para un código de diseño xml - François Legrand

esto realmente funciona. Gracias :) val background = ShapeDrawable (OvalShape ()) background.paint.color = ContextCompat.getColor (holder.getView (). Context, R.color.green) val layer = arrayOf (background, resource !!) greenRoundIcon.setImageDrawable (LayerDrawable (capas)) - David

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.