Como definir uma forma de círculo em um arquivo extraível XML do Android?


687

Estou com alguns problemas para encontrar a documentação das definições de formas no XML para Android. Gostaria de definir um círculo simples preenchido com uma cor sólida em um arquivo XML para incluí-lo nos meus arquivos de layout.

Infelizmente, a documentação no android.com não cobre os atributos XML das classes Shape. Acho que devo usar um ArcShape para desenhar um círculo, mas não há explicação sobre como definir o tamanho, a cor ou o ângulo necessário para formar um círculo a partir de um arco.


3
Aqui você pode ler sobre como criar forma drawable: developer.android.com/guide/topics/resources/...
Mario Kutlev


A documentação do Android Dev foi aprimorada desde então. Agora ele cobre o android:shapeelemento - Recursos desenháveis .
NaXa

Respostas:


1513

Este é um círculo simples como um drawable no 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
E como mudar a cor dinamicamente?
Ankit Garg

5
@AnkitGarg você pode aplicar um filtro de cor a partir do código Java (ver classe Drawable)
milosmns

7
Eu tentei dpe foi distorcido em uma forma oval. Para mim, usando o ptfixo.
Tyler

13
Não há necessidade de sizeno shapese você definir posteriormente um tamanho quadrado para a exibição.
Ferran Maylinch

2
Sua forma é oval e não redonda. Alguém pode confirmar ??
Tarun

762

Defina isso como plano de fundo da visualização

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

insira a descrição da imagem aqui

Para círculo sólido, use:

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

insira a descrição da imagem aqui

Sólido com curso:

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

insira a descrição da imagem aqui

Nota : Para fazer com que a ovalforma apareça como um círculo, nesses exemplos, sua exibição de que você está usando essa forma como plano de fundo deve ser um quadrado ou você deve definir as propriedades heighte widthda marca de forma com um valor igual.


2
Ótima solução. Obviamente, o oval aparece como um círculo se a largura e a altura da vista forem iguais. Eu acho que havia uma maneira de fazê-la aparecer como um círculo, independentemente do tamanho da visualização.
Ferran Maylinch

2
@FerranMaylinch "Acho que havia uma maneira de fazê-la aparecer como um círculo, independentemente do tamanho da exibição." Resolvi isso usando um RelativeLayout envolvendo um ImageView (com o círculo como drawable "src") com largura / altura fixa e um TextView que envolve um texto (por exemplo).
Michele

Estou fazendo exatamente a mesma coisa, mas o círculo é desenhado como oval #
Bugs Happen

E se precisarmos criar em torno de uma exibição de texto com cores de borda diferentes em tempo de execução?
Anshul Tyagi 27/03

@AnshulTyagi Acredito que você pode fazer isso chamando yourView.getBackground()e definindo a cor manualmente. você precisa convertê-lo para um tipo adequado, como ShapeDrawable. Existem perguntas relacionadas ao SO sobre isso.
M. Reza Nasirloo

93

Código para círculo simples

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

Procure nas amostras do SDK do Android. Existem vários exemplos no projeto ApiDemos:

/ ApiDemos / res / drawable /

  • black_box.xml
  • shape_5.xml
  • etc

Será algo parecido com isto para um círculo com um preenchimento de gradiente:

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

Você pode usar o VectorDrawable como abaixo:

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

O xml acima é renderizado como:

insira a descrição da imagem aqui


Ei, estou tendo um preenchimento entre o círculo e a janela de visualização. Você pode me ajudar?
Ajeet

1
@Ajeet você pode alterar o tamanho da janela e você pode colocar o seu caminho do grupo dentro e especificar a tradução e escala<group android:translateX="-10" android:translateY="15"><path ...
Boris Treukhov

2
@Riyas você pode explicar a parte pathData? o que essas coordenadas implicam?
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
O que <corners />fazer em um oval (que para o meu pensamento não tem cantos)?
Scott Biggs

17

Aqui está um simple circle_background.xml para pré-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>

Você pode usar com o atributo 'android:background="@drawable/circle_background"na definição de layout do seu botão


+ adicione 'tamanho' às formas (dependendo do caso).
TouchBoarder

17

Se você quer um círculo como este

insira a descrição da imagem aqui

Tente usar o código abaixo:

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

insira a descrição da imagem aqui


4

Você pode tentar isso -

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

Além disso, você pode ajustar o raio do círculo ajustando android:thickness.

insira a descrição da imagem aqui


Isso é muito legal! Certamente é preciso brincar um pouco, pois os atributos não são intuitivos. Consegui fazer com que isso exibisse um bom círculo vazio para uma borda sempre. E você pode usar o preenchimento para garantir que o círculo inteiro seja exibido.
Scott Biggs

2

Não consegui desenhar um círculo dentro do meu ConstraintLayout por algum motivo, simplesmente não consegui usar nenhuma das respostas acima.

O que funcionou perfeitamente é um TextView simples com o texto que sai quando você pressiona "Alt + 7":

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

Muito esperto! Tenho certeza de que alguém achará isso útil.
Scott Biggs

muito útil, ótimo ..
Mahbubur Rahman Khan 09/03

1

Você pode tentar usar isso

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

e você não precisa se preocupar com a proporção da largura e da altura se estiver usando isso para uma visualização 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

uma forma de círculo em um arquivo extraível XML do 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 tela

insira a descrição da imagem aqui


-23

Apenas use

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

26
E como posso definir isso como o src de um ImageView no meu arquivo de layout XML?
Janusz

Esta não é directamente aplicável para um código de layout xml
François Legrand

1
isso é realmente funciona. Obrigado :) val background = ShapeDrawable (OvalShape ()) background.paint.color = ContextCompat.getColor (holder.getView (). Contexto, R.color.green) val camadas = arrayOf (background, recurso !!) greenRoundIcon.setImageDrawable (LayerDrawable (camadas))
David

Tão antipatizado, mas funciona e me ajuda, obrigado
Pavel Shorokhov
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.