Android Vector Drawable

Neste tutorial, estaremos discutindo o Android Vector Drawable. Além disso, vamos implementá-los em nosso aplicativo Android.

Android Vector Drawable

A maior parte das vezes usamos PNG como nossas imagens para desenho. Para que as imagens PNG funcionem para diferentes tamanhos de tela, nós criamos vários ativos PNG com diferentes tamanhos e densidades. Posteriormente, as imagens PNG ocupam espaço extra e levam a grandes tamanhos APK dos aplicativos Android.

É aqui que o Vector Drawable vem em nosso socorro! Eles são a sua substituição para imagens PNG.

A VectorDrawable é um gráfico vetorial definido em um arquivo XML como um conjunto de pontos, linhas e curvas juntamente com suas informações de cores associadas.

Eles podem ser escalados de acordo com o tamanho da tela sem perda de qualidade. Eles são renderizados rapidamente na tela também. VectorDrawable são um arquivo XML.

Você pode adicionar um novo Vector Asset em sua pasta de desenho usando New | Vector Asset.

Assim, podemos criar Vector Drawables de ícones de desenho de materiais. O código para o VectorDrawable é assim:

Eles são definidos na tag vector. android:viewportWidth e android:viewportHeight são usados na definição da largura e altura dos limites desenháveis. Dentro destas dimensões, o vetor drawable é desenhado na tela.

path é a tag que cria o drawable. Dentro do caminho nós criamos linhas, curvas, arcos e definimos a borda, a cor de fundo. Fazemos assim os comandos do path no arquivo pathData.

Creating Path for Vector Assets

Os comandos do path consistem em um alfabeto seguido por coordenadas. Imagine criar caminhos como fazer uma pintura. Os alfabetos em maiúsculas representam a posição absoluta. As letras minúsculas representam a posição relativa.

• M – moveto command. É uma forma de dizer mova o lápis para a coordenada dada na vista. Exemplo M 100 100 move um lápis imaginário para a coordenada 100, 100 na tela.
• L – linha para o comando. É usado para desenhar uma linha da posição atual para a posição especificada.
  Exemplo : M 100 100, L 120 100 desenha uma linha horizontal.
• z – É usado para fechar um caminho. Ele desenha uma linha da última posição para a primeira posição. Exemplo M 100 100 L 120 100 L 120 120 L 100 120 Z cria um quadrado.
• C – Isto é usado para criar uma curva bezier. Precisamos de especificar três conjuntos de coordenadas depois disto. O primeiro e o segundo seriam os dois pontos de controle entre o ponto inicial e o ponto final.
• A – é usado para desenhar um arco. Depois de um você precisa especificar o seguinte formato: (rx ry x-axis-rotation grande-arc-flag sweep-flag x y). rx ry e x eixos são os dois raios especificados.

Vamos criar alguns Vector Drawable interessante aleatório em nosso aplicativo Android usando o conhecimento acima.

Edroide Vector Drawable Example Project Structure

Android Vector Drawable Code

O código para a actividade_main.O layout do xml é dado abaixo:

Vejamos cada implementação de Vector Drawables uma vez.

ic_rectangle.xml

No código acima, nós criamos dois caminhos. Cada um com um triângulo em ângulo recto.

Esta configuração no nosso LinearLayout faria o fundo parecer:

ic_w.xml

No código acima, estamos tentando criar um símbolo W usando linhas.

Nota: Ao invés de um caminho separado, podemos fundir todos em um único comando de caminho. Embora você possa usar vários caminhos para obter uma compreensão clara do que cada caminho faz.

ic_w_filled.xml
No código abaixo, vamos usar o comando z para fechar os caminhos e preencher a cor dentro deles:

ic_a.xml
Vamos criar a letra A usando caminhos.

ic_c.xml

As letras A e C com aspecto desenhável como:

>ic_0.xml>

Um círculo é feito usando dois arcos que são então fechados.

Agora para o último. Vamos criar um ícone de amostra do JournalDev JD usando vector drawable.

>

Finalmente, a saída da nossa aplicação parece assim:

>

Esta é a conclusão deste tutorial. Você pode baixar o projeto final do Android VectorDrawable no link abaixo: