ImageBitmap x ImageVector

Os dois tipos mais comuns de formatos de imagem são rasterizadas e vetoriais.

Um formato gráfico de rasterização contém pixels: pequenos quadrados individuais com uma cor formada por valores vermelhos, verdes, azuis e Alfa. Ao colocar muitos pixels juntos, é possível formar uma imagem muito detalhada, como uma foto. Um gráfico de rasterização tem uma resolução fixa, ou seja, um número fixo de pixels. Isso significa que, quando você aumenta o tamanho da imagem, ela perde detalhes e pode ocorrer pixelização. Exemplos de formatos gráficos rasterizados são JPEG, PNG e WEBP.

Figura 1: exemplo de arquivo JPEG

As imagens vetoriais, por outro lado, são representações matemáticas escalonáveis de um elemento visual na tela. Um vetor é um conjunto de comandos que descrevem como desenhar a imagem na tela, por exemplo, uma linha, um ponto ou um preenchimento. Ao dimensionar um vetor na tela, ele não vai perder qualidade, já que a fórmula matemática vai manter a relação entre os diferentes comandos. Um bom exemplo de imagem vetorial são os símbolos do Material Design, porque todos podem ser definidos com fórmulas matemáticas.

Figura 2: exemplo de vetor (as extensões de arquivo são .xml ou definidas no código em Kotlin)

ImageBitmap

No Compose, uma imagem rasterizada, geralmente chamada de Bitmap, pode ser carregada em uma instância de ImageBitmap, e um BitmapPainter é responsável por desenhar o bitmap na tela.

Para casos de uso simples, o painterResource() pode ser usado para criar uma ImageBitmap e retornar um objeto Painter (neste caso, um BitmapPainter):

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)
VectorVsBitmapSnippets.kt

Se você quiser mais personalização, como uma implementação de pintor personalizado, e precisar de acesso à ImageBitmap propriamente dita, carregue-a da seguinte maneira:

val imageBitmap = ImageBitmap.imageResource(R.drawable.dog)
VectorVsBitmapSnippets.kt

ImageVector

Um VectorPainter é responsável por desenhar uma ImageVector na tela. ImageVector é compatível com um subconjunto de comandos SVG. Nem todas as imagens podem ser representadas como vetores. Por exemplo, as fotos que você tira com a câmera não podem ser transformadas em um vetor.

É possível criar uma ImageVector personalizada importando um arquivo XML de drawable vetorial já existente importado para o Android Studio usando a ferramenta de importação ou implementando a classe e enviando comandos do caminho manualmente.

Para casos de uso simples, da mesma forma que painterResource() funciona para a classe ImageBitmap, também funciona para ImageVectors, retornando uma VectorPainter como resultado. painterResource() processa o carregamento de VectorDrawables e BitmapDrawables para VectorPainter e BitmapPainter, respectivamente. Para carregar um VectorDrawable em uma imagem, use:

Image(
    painter = painterResource(id = R.drawable.baseline_shopping_cart_24),
    contentDescription = stringResource(id = R.string.shopping_cart_content_desc)
)
VectorVsBitmapSnippets.kt

Se você quiser mais personalização e precisar acessar a ImageVector propriamente dita, carregue-a da seguinte maneira:

val imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping_cart_24)
VectorVsBitmapSnippets.kt