Vector Drawable: o que é, formato XML e como funciona

O que é Vector Drawable?

Vector Drawable é um recurso Android que representa uma imagem vetorial em formato XML, baseado na especificação SVG (Scalable Vector Graphics). O Google introduziu este formato no Android 5.0 (API 21) como alternativa a imagens raster para ícones, ilustrações e outros elementos gráficos de interface.

Ao contrário do PNG, onde a imagem é armazenada como uma matriz de pixels de tamanho fixo, o Vector Drawable descreve formas matematicamente — através de coordenadas de pontos, curvas Bezier, preenchimentos e traçados. Isso significa que uma única imagem vetorial pode substituir até seis arquivos PNG para diferentes densidades de tela (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi), simplificando drasticamente a manutenção de recursos gráficos.

O formato suporta não apenas imagens estáticas, mas também animação via AnimatedVectorDrawable, bem como adaptação ao tema escuro e cores personalizadas através de atributos de tema. Desde o Android 7.0 (API 24), o Vector Drawable também suporta preenchimentos gradientes e operações complexas de recorte (clipPath), expandindo as possibilidades de design.

Componentes principais do Vector Drawable

Cada Vector Drawable contém um elemento raiz vector com parâmetros de largura, altura e viewport — um sistema de coordenadas virtual onde as formas são desenhadas. Dentro há grupos (group) e caminhos (path), onde path define a geometria através de uma sequência de comandos: M (moveTo), L (lineTo), C (cubicTo), Z (close) e outros. Cada path pode ter seu próprio fillColor e strokeColor, que podem referenciar recursos do tema.

Elementos adicionais incluem clip-path para recorte, gradient para transições gradientes e atributos de adaptação ao tema escuro através do atributo android:theme. Todas as cores no Vector Drawable podem ser especificadas como referências a atributos de tema (por exemplo, ?attr/colorPrimary), o que altera a aparência dos ícones ao mudar de tema sem duplicar recursos.

Formato Vector Drawable: estrutura XML

O arquivo XML do Vector Drawable é colocado no diretório res/drawable/ e tem um elemento raiz . Dentro podem haver elementos aninhados para organização hierárquica e elementos para descrever contornos. Cada path contém um atributo pathData — uma string de comandos de desenho no formato SVG.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="@color/ic_launcher_background"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"
        android:strokeWidth="1"
        android:strokeColor="#333333"/>

</vector>

No exemplo, é descrito um círculo com raio de 10 unidades em um viewport 24×24. O parâmetro fillColor referencia um recurso de cor, enquanto strokeWidth e strokeColor definem o traço. As dimensões width e height são especificadas em dp — isso garante escala correta em telas com diferentes densidades de pixels sem transformações adicionais.

Agrupamento e transformações

O elemento group permite agrupar vários paths e aplicar transformações comuns a eles: rotação (rotation), translação (translateX, translateY) e escala (scaleX, scaleY). Grupos podem ser aninhados, permitindo a criação de hierarquias complexas com centenas de elementos sem perda de desempenho.

<vector ...>
    <group android:name="arrow_group"
        android:pivotX="12"
        android:pivotY="12"
        android:rotation="90">
        <path .../>
    </group>
</vector>

O agrupamento com o atributo pivotX/pivotY é usado para animação: você pode girar ou escalar parte de uma imagem independentemente de outros elementos, o que é particularmente útil para criar ícones de estado animados (por exemplo, carregamento → sucesso).

Vector Drawable vs gráficos raster

A escolha entre gráficos vetoriais e raster depende do caso de uso. Vector Drawable é ideal para ícones, ilustrações e elementos de interface com poucos detalhes, enquanto fotos e imagens complexas com milhares de cores permanecem em formatos raster.

De acordo com Android Performance Patterns (Google I/O 2016), substituir ícones PNG por Vector Drawable reduz o tamanho do APK em 40–60% para aplicativos com grande número de recursos gráficos. No entanto, ao renderizar vetores complexos com centenas de paths, a carga da CPU aumenta, portanto, para animações e redesenhos frequentes, recomenda-se o uso de rasters pré-cacheados.

Quando escolher Vector Drawable

Vector Drawable é ideal para ícones de interface (barra de ferramentas, navegação, status), logotipos, ilustrações simples e elementos animados. O formato é especialmente vantajoso ao suportar múltiplas telas: em vez de gerar PNGs para seis densidades, um único arquivo XML é suficiente. Isso simplifica a manutenção do design e elimina erros de incompatibilidade de tamanhos. Para fotos e imagens com gradientes fotorrealistas, formatos raster com compressão WebP ainda são usados.

Animação de Vector Drawable

O Android suporta animação de Vector Drawable através de dois mecanismos: AnimatedVectorDrawable (disponível desde a API 21) e AnimatedStateListDrawable. O primeiro permite animar atributos de path — rotação, translação, mudança de cor e transformação de forma. O segundo alterna entre diferentes estados (pressionado, destacado) com transições suaves.

AnimatedVectorDrawable usa três arquivos XML: o próprio Vector Drawable, um ObjectAnimator descrevendo a animação e um AnimatedVectorDrawable de ligação que conecta o alvo (nome do grupo ou path) ao animator. A animação pode alterar fillColor, strokeColor, rotation, translateX/Y, scaleX/Y e até pathData — transformando suavemente uma forma em outra (morphing).

Exemplo de animação morphing

Considere uma animação onde um ícone de «mais» se transforma em um «x». A principal limitação: o número de comandos pathData deve corresponder nos estados inicial e final, caso contrário a animação não funcionará.

<!-- res/drawable/anim_plus_to_close.xml -->
<animated-vector xmlns:android="...">
    <target
        android:name="plus_path"
        android:animation="@anim/plus_to_close"/>
</animated-vector>

O ObjectAnimator plus_to_close altera a propriedade pathData da forma original de «mais» para a forma de «x» em 300 milissegundos. O sistema interpola automaticamente as coordenadas entre os dois conjuntos de comandos SVG. Este tipo de animação é amplamente usado no Material Design para transições suaves de estados de botões e ícones.

Exemplos de código Vector Drawable

Vamos ver um exemplo completo de XML vetorial para um ícone de seta para trás com suporte a tema escuro. A cor é definida através de uma referência a um atributo de tema, que altera automaticamente a cor do ícone ao alternar entre temas claro e escuro sem duplicar recursos.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">

    <group android:name="arrow">
        <path
            android:fillColor="@android:color/white"
            android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
    </group>

</vector>

O parâmetro android:tint com o valor ?attr/colorControlNormal aplica automaticamente a cor do sistema de controle — cinza escuro no tema claro, branco no tema escuro. O grupo chamado arrow permite animar este ícone via AnimatedVectorDrawable.

Carregando Vector Drawable do código

Para carregar programaticamente um Vector Drawable no Android, use a classe AppCompatResources.getDrawable() ou o método ContextCompat.getDrawable(). Em projetos modernos com Jetpack Compose, Drawables raster e vetoriais são carregados via painterResource, que determina automaticamente o formato do recurso.

import androidx.appcompat.content.res.AppCompatResources

val vectorDrawable = AppCompatResources.getDrawable(
    context,
    R.drawable.ic_arrow_back
)

// Jetpack Compose
Icon(
    painter = painterResource(R.drawable.ic_arrow_back),
    contentDescription = "Back",
    tint = MaterialTheme.colorScheme.onSurface
)

Ao usar AppCompatResources.getDrawable(), a biblioteca AppCompat seleciona automaticamente a versão correta do drawable com base no nível da API: em dispositivos anteriores ao Android 5.0 (API 21), pode ser usado um fallback raster; em dispositivos mais novos, o Vector Drawable é usado. No Jetpack Compose, o painterResource lida com essa compatibilidade automaticamente.