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.

Janusz
fonte
3
Aqui você pode ler sobre como criar forma drawable: developer.android.com/guide/topics/resources/...
Mario Kutlev
Você pode obter o xml do círculo aqui developer.android.com/samples/WearSpeakerSample/res/drawable/…
Shahab Rauf 15/18
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>
Arefin
fonte
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.

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

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

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

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

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

krhitesh
fonte
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>
НИоНН
fonte
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

Cyril David
fonte
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
fonte
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

Aftab Alam
fonte
-23

Apenas use

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

fonte
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