Bitmap de imagem x vetor de imagem

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.

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 mantém a relação entre os diferentes comandos. Bons exemplos de ImageVectors são os símbolos do Material Design, porque todos podem ser definidos com fórmulas matemáticas.

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 básicos, o painterResource() pode ser usado para criar uma ImageBitmap e retorna 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 de elementos gráficos vetoriais escaláveis (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 básicos, painterResource() funciona para ImageVectors da mesma forma que para a classe ImageBitmap, retornando um 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