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

Janusz
fuente
3
Aquí puede leer sobre cómo crear formas dibujables: developer.android.com/guide/topics/resources/…
Mario Kutlev
Puede obtener el círculo xml desde aquí developer.android.com/samples/WearSpeakerSample/res/drawable/…
Shahab Rauf
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>
Arefin
fuente
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.

M. Reza Nasirloo
fuente
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>
Ravi Makvana
fuente
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>

Goosemanjack
fuente
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í

Riyas PK
fuente
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>
Ashana.Jackol
fuente
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

kip2
fuente
+ 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>
Paraskevas Ntsounos
fuente
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
fuente
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í

Tienanhvn
fuente
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í

krhitesh
fuente
¡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>
Иво Недев
fuente
¡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

Cyril David
fuente
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
fuente
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í

Aftab Alam
fuente
-23

Solo usa

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

fuente
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