Usando vector graphics no Android

Diego Gonçalves Santos
2 min readJul 25, 2018

--

Quando falamos sobre layouts de tela no Android, image assets são uma das partes mais importantes. Você pode utilizar essas imagens em botões ou mesmo para ilustrar algo em sua tela. Usar as imagens certas pode tornar a experiência do seu usuário muito melhor.

Mas um aspecto do Android que você precisa levar em conta quando estiver adicionando imagens ao seu projeto, é que ele vai rodar em diversos modelos de aparelhos com tamanhos diferentes de telas e as imagens que você adicionar, deverão ter boa aparência em todas as telas disponíveis.

Quando utilizamos jpgs e pngs, o que você pode fazer é criar assets com tamanhos diferentes para cada densidade de tela. Você deve apenas colocar as imagens nas pastas corretas e o Android se encarrega do resto. Isso funciona, no entanto o lado ruim é que o tamanho final do apk vai aumentar e isso é sem dúvida algo que você deve evitar.

Bom, uma boa solução para isso é usar vetores. Vetores são arquivos que ao invés de ser compostos por grids de pixels, ele traz a informação sobre a ilustração como os paths que o formam, as cores, margens, etc. É como uma receita de como desenha-lo e o computador faz todo o trabalho. A maior vantagem disso é que é fácil redimensionar ou mesmo recolorir sempre que necessário. No Android você consegue user esse tipo de resource e é muito simples! Para abrir a tela do Configure Vector Asset, abre File > New > Vector Asset. A tela a seguir será exibida:

Você tem duas opções para usar vetores. O Vector Asset Studio, já traz uma grande biblioteca de ícones prontos com basicamente todos os ícones mais utilizados em telas no Android.

Você pode apenas escolher uma das opções da lista, escolher um nome, cor, tamanho e opacidade e é isso! Outra opção é usar o seu próprio ícone customizado em svg ou psd, importá-lo e transformá-lo em um xml.

Depois disso você pode usá-lo como background das suas views normalmente como você já fazia com seus assets de imagens, simples assim!

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/ic_android_black_24dp"/>

Bom, por hoje é isso! Espero que seja útil. Se você quiser saber mais sobre como diminuir o tamanho final da sua Apk, você pode ver mais no link: https://developer.android.com/topic/performance/reduce-apk-size

Até a próxima!! ;)

--

--

Diego Gonçalves Santos

Engenheiro de Software @Dextra_digital, escritor, palestrante, entusiasta de tecnologia e esportes.