¿Cómo definir una forma circular en un archivo dibujable XML de Android?


687

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 lleno de 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 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 necesarios para hacer un círculo fuera de un Arco.


3
Aquí puede leer sobre cómo crear formas dibujables: developer.android.com/guide/topics/resources/…
Mario Kutlev


La documentación de Android Dev se ha mejorado desde entonces. Ahora cubre android:shapeelemento - Recursos extraíbles .
naXa

Respuestas:


1513

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>

51
¿Y cómo cambiar el color dinámicamente?
Ankit Garg

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

77
Lo intenté dpy se distorsionó en una forma ovalada. Para mí, usar en su ptlugar lo arregló.
Tyler

13
No es necesario sizeen el shapesi luego define un tamaño cuadrado para la vista.
Ferran Maylinch

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

762

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>

ingrese la descripción de la imagen aquí

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>

ingrese la descripción de la imagen aquí

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>

ingrese la descripción de la imagen aquí

Nota : Para hacer que la ovalforma aparezca como un círculo, en estos ejemplos, su vista de que está usando esta forma como fondo debe ser un cuadrado o debe establecer las propiedades heighty widthde la etiqueta de forma en un valor igual.


2
Buena solución Por supuesto, el óvalo aparece como un círculo si el ancho y la altura de la vista son iguales. Creo que había una manera de hacerlo aparecer como un círculo, sin importar el tamaño de la vista.
Ferran Maylinch

2
@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 envolviendo un ImageView (con el círculo como "src" dibujable) 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 ovalado
errores ocurren el

¿Qué sucede si lo necesitamos para crear una vista de texto con diferentes colores de borde en tiempo de ejecución?
Anshul Tyagi

@AnshulTyagi Creo que puede hacerlo llamando yourView.getBackground()y configurando el color manualmente. necesitas lanzarlo a un tipo apropiado como ShapeDrawable. Hay preguntas relacionadas sobre SO sobre esto.
M. Reza Nasirloo

93

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>

46

Mire 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 así 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">
    <gradiente android: startColor = "# FFFF0000" android: endColor = "# 80FF00FF"
            android: angle = "270" />
</shape>


46

Puede usar VectorDrawable de la siguiente manera:

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

ingrese la descripción de la imagen aquí


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

1
@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 Treukhov

2
@ Riyas, ¿puedes explicar la parte pathData? ¿Qué implican esas coordenadas?
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>

1
¿Qué <corners />hacen en un óvalo (que a mi parecer no tiene esquinas)?
Scott Biggs

17

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 usar con el atributo 'android:background="@drawable/circle_background"en la definición de diseño de su botón


+ agregue 'tamaño' a las formas (según el caso de uso).
TouchBoarder

17

Si quieres un círculo como este

ingrese la descripción de la imagen aquí

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>

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>

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>

ingrese la descripción de la imagen aquí


4

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.

ingrese la descripción de la imagen aquí


¡Esto es realmente lindo! Ciertamente toma algo de tiempo jugar ya que los atributos no son intuitivos. Me las arreglé para que esto muestre 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.
Scott Biggs

2

No pude dibujar un círculo dentro de mi RestraintLayout 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>

¡Muy inteligente! Estoy seguro de que alguien encontrará esto útil.
Scott Biggs

muy útil, genial ..
Mahbubur Rahman Khan

1

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 molestarse en la relación de aspecto de ancho y alto si está usando esto para una vista de texto


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>

0

una forma circular 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

ingrese la descripción de la imagen aquí


-23

Solo usa

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

26
¿Y cómo puedo configurar eso como el 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

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

No me gustó, pero funciona y me ayuda, gracias
Pavel Shorokhov
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.