Pontos principais
- Um drawable vetorial é um gráfico vetorial definido em um arquivo XML como um conjunto de pontos, linhas e curvas com as informações de cor associadas.
- Os drawables vetoriais são dimensionáveis, ou seja, podem ser redimensionados sem perder a qualidade de exibição. Isso os torna ideais para uso em apps Android, já que podem ajudar a reduzir o tamanho dos arquivos APK e melhorar o desempenho.
- É possível criar drawables vetoriais no Android Studio clicando com o botão direito do mouse na pasta drawable no projeto e selecionando New > Vector Asset. Também é possível importar arquivos SVG para o Android Studio como drawables vetoriais.
Introdução
UmVectorDrawable
é um gráfico vetorial definido
em um arquivo XML como um conjunto de pontos, linhas e curvas, juntamente com seus
informações de cor. A principal vantagem de usar um drawable vetorial é a escalonabilidade
da imagem. Ele pode ser dimensionado sem perder a qualidade da tela, o que significa que
o mesmo arquivo é redimensionado para diferentes densidades de tela sem perder a qualidade da imagem.
Isso resulta em arquivos menores de APK em e menos manutenção para o desenvolvedor. Você também pode
usar imagens vetoriais para animação usando vários arquivos XML em vez de vários
imagens para cada resolução de tela.
Esta página e o vídeo abaixo trazem uma visão geral de como criar drawables vetoriais em XML. O Android Studio também converte arquivos SVG para o formato de drawable vetorial, conforme descrito em Adicionar gráficos vetoriais de várias densidades.
O Android 5.0 (nível 21 da API) foi a primeira versão a oferecer suporte oficial a drawables vetoriais com
VectorDrawable
e AnimatedVectorDrawable
. No entanto,
é possível usar versões mais antigas com a Biblioteca de Suporte do Android, que oferece as classes
VectorDrawableCompat
e
AnimatedVectorDrawableCompat
.
Sobre a classe VectorDrawable
VectorDrawable
define um drawable estático.
objeto. Semelhante ao formato SVG, cada gráfico vetorial é definido como uma árvore
composta por objetos path
e group
.
Cada path
contém a geometria do contorno do objeto, e group
contém detalhes da transformação. Todos os caminhos são desenhados
na mesma ordem em que aparecem no arquivo XML.

Figura 1. Amostra de hierarquia de um recurso de drawable vetorial.
O recurso de vetor Studio oferece uma maneira simples de adicionar um gráfico vetorial ao projeto como um arquivo XML.
Exemplo de XML
Confira um exemplo de arquivo XML VectorDrawable
que renderiza uma imagem
de uma bateria no modo de carregamento.
<!-- res/drawable/battery_charging.xml --> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:width="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <group android:name="rotationGroup" android:pivotX="10.0" android:pivotY="10.0" android:rotation="15.0" > <path android:name="vect" android:fillColor="#FF000000" android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z" android:fillAlpha=".3"/> <path android:name="draw" android:fillColor="#FF000000" android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/> </group> </vector>
Esse XML renderiza a seguinte imagem:

Sobre a classe animateVectorDrawable
AnimatedVectorDrawable
adiciona animação às propriedades de um gráfico
vetorial. Um gráfico vetorial animado pode ser definido como três
ou como um único arquivo XML que define todo o drawable. Vamos
analisar as duas abordagens para entender melhor: Vários arquivos XML e Arquivo
XML único.
Vários arquivos XML
Com essa abordagem, você pode definir três XML files diferentes:
- Um arquivo XML
VectorDrawable
. -
Um arquivo XML
AnimatedVectorDrawable
que define o destinoVectorDrawable
, o caminhos e grupos a serem animados, as propriedades e as animações definidas como objetosObjectAnimator
ouAnimatorSet
. - Um arquivo XML do animador.
Exemplo de vários arquivos XML
Os arquivos XML a seguir demonstram a animação de um gráfico vetorial.
- Arquivo XML do VectorDrawable:
vd.xml
-
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600" > <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="vectorPath" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector>
- XML file de AnimatedVectorDrawable:
avd.xml
-
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vd" > <target android:name="rotationGroup" android:animation="@anim/rotation" /> <target android:name="vectorPath" android:animation="@anim/path_morph" /> </animated-vector>
- XML files do animador usados no XML file de
AnimatedVectorDrawable:
rotation.xml
epath_morph.xml
-
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
<set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:duration="3000" android:propertyName="pathData" android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z" android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z" android:valueType="pathType"/> </set>
XML file único
Com essa abordagem, você pode mesclar os arquivos XML relacionados em um único
XML no formato de pacote XML. No momento da criação do app, o
A tag aapt
cria recursos separados e os referencia na
vetor animado. Essa abordagem requer o Build Tools 24 ou mais recente e a
é compatível com versões anteriores.
Exemplo de um único arquivo XML
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"> <aapt:attr name="android:drawable"> <vector android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24"> <path android:name="root" android:strokeWidth="2" android:strokeLineCap="square" android:strokeColor="?android:colorControlNormal" android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" /> </vector> </aapt:attr> <target android:name="root"> <aapt:attr name="android:animation"> <objectAnimator android:propertyName="pathData" android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4" android:duration="300" android:interpolator="@android:interpolator/fast_out_slow_in" android:valueType="pathType" /> </aapt:attr> </target> </animated-vector>
Solução de compatibilidade com versões anteriores de drawables vetoriais
Para oferecer suporte a drawables vetoriais e drawables vetoriais animados em dispositivos com versões da plataforma anteriores
ao Android 5.0 (nível 21 da API) ou usar as funcionalidades fillColor
, fillType
e
strokeColor
em versões anteriores ao Android 7.0 (nível 24 da API),
VectorDrawableCompat
e AnimatedVectorDrawableCompat
estão disponíveis em duas bibliotecas de suporte:
support-vector-drawable
e animated-vector-drawable
,
respectivamente.
O Android Studio 1.4 introduziu suporte limitado para drawables
vetoriais gerando arquivos PNG durante a compilação. No entanto, as bibliotecas de suporte de drawables
vetoriais e drawables vetoriais animados oferecem flexibilidade e
ampla compatibilidade. Elas são bibliotecas de suporte, então você pode usá-las com todas
as versões da plataforma Android até o Android 2.1 (API de nível 7+). Para configurar o
app para usar bibliotecas de suporte de vetores, adicione o elemento vectorDrawables
ao arquivo build.gradle
no módulo do app.
Use o snippet de código abaixo para configurar o vectorDrawables
.
element:
// For Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
// For Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
// For Gradle Plugin 1.5 or below android { defaultConfig { // Stops the Gradle plugin’s automatic rasterization of vectors generatedDensities = [] } // Flag notifies aapt to keep the attribute IDs around aaptOptions { additionalParameters "--no-version-vectors" } }
// For Gradle Plugin 1.5 or below android { defaultConfig { // Stops the Gradle plugin’s automatic rasterization of vectors generatedDensities() } // Flag notifies aapt to keep the attribute IDs around aaptOptions { additionalParameters("--no-version-vectors") } }
Você pode usar VectorDrawableCompat
e
AnimatedVectorDrawableCompat
em todos
em dispositivos com o Android 4.0 (nível 14 da API) e versões mais recentes. A maneira como o Android
carrega drawables, não todos os locais que aceitam um ID de drawable, como em um arquivo
compatível com o carregamento de drawables vetoriais. O
O pacote android.support.v7.appcompat
adicionou um número
de recursos para facilitar o uso de drawables vetoriais. Primeiro, quando você usa
Pacote android.support.v7.appcompat
com
ImageView
ou com subclasses como
ImageButton
e
FloatingActionButton
, é possível
usar o novo atributo app:srcCompat
para referenciar drawables vetoriais
além de qualquer outro drawable disponível para android:src
:
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_add" />
Para mudar drawables durante a execução, use o comando
setImageResource()
como antes. Como usar o AppCompat
e app:srcCompat
é o método mais infalível de integração
drawables vetoriais ao seu app.
A Biblioteca de Suporte 25.4.0 e versões mais recentes oferecem suporte aos seguintes recursos:
- Transformação de caminhos (avaliador PathType): usado para transformar um caminho em outro.
- Interpolação de caminho usada para definir uma variável flexível interpolador (representado como um caminho) em vez do padrão interpoladores, como LinearInterpolator.
A Biblioteca de Suporte 26.0.0-beta1 e versões mais recentes oferecem suporte aos seguintes recursos:
- Mover pelo caminho: o objeto de geometria pode ser movido por um caminho arbitrário como parte de uma animação.
Exemplo de vários XML files que usam a Biblioteca de Suporte
Os arquivos XML a seguir demonstram a abordagem de uso de vários arquivos XML para animar um gráfico vetorial.
- Arquivo XML de VectorDrawable:
vd.xml
-
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600" > <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="vectorPath" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector>
- Arquivo XML de animateVectorDrawable:
avd.xml
-
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vd" > <target android:name="rotationGroup" android:animation="@anim/rotation" /> </animated-vector>
- Arquivo XML do animador usado no XML do animateVectorDrawable.
arquivo:
rotation.xml
-
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
XML file único
O XML file a seguir demonstra a abordagem de usar um único XML file
para animar um gráfico vetorial. No momento da criação do app, a
tag aapt
cria recursos diferentes e os referencia no
vetor animado. Essa abordagem requer o Build Tools 24 ou mais recente e a
é compatível com versões anteriores.
Exemplo de um único arquivo XML que usa a Biblioteca de Suporte
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"> <aapt:attr name="android:drawable"> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="64dp" android:height="64dp" android:viewportWidth="600" android:viewportHeight="600"> <group android:name="rotationGroup" android:pivotX="300" android:pivotY="300" android:rotation="45.0" > <path android:name="vectorPath" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector> </aapt:attr> <target android:name="rotationGroup"> <aapt:attr name="android:animation"> <objectAnimator android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" android:duration="6000" android:interpolator="@android:interpolator/fast_out_slow_in" /> </aapt:attr> </target> </animated-vector>