Scribd
Upload
6 views

ImageBitmap Vs ImageVector - Jetpack Compose - Android Developers

Uploaded by

Hien Nguyen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

ImageBitmap Vs ImageVector - Jetpack Compose - Android Developers

Uploaded by

Hien Nguyen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

8/9/24, 10:34 AM ImageBitmap vs ImageVector | Jetpack Compose | Android Developers

ImageBitmap vs ImageVector
The two most common kinds of image formats are raster and vector images.

A raster graphic format contains pixels: tiny individual squares that contain a color (made
up of red, green, blue, and alpha values). When placing a lot of pixels together, a very
detailed image can be formed, such as a photograph. A raster graphic has a fixed
resolution (fixed number of pixels). This means that when you increase the size of the
image, it loses detail, and pixelation can occur. Examples of raster graphic formats are
JPEG, PNG, and WEBP.

Figure 1: JPEG file example

Vector images, on the other hand, are scalable mathematical representations of a visual
element on screen. A vector is a set of commands describing how to draw the image on
screen- for instance, a line, point, or fill. When scaling a vector on screen, it will not lose
quality as the mathematical formula will maintain the relationship between the different
commands. A good example of ImageVector are the Material Symbols
(https://fonts.google.com/icons), as they can all be defined with mathematical formulas.

Figure 2: Vector example (file extensions are .xml or defined in Kotlin code)

ImageBitmap

https://developer.android.com/develop/ui/compose/graphics/images/compare 1/3
8/9/24, 10:34 AM ImageBitmap vs ImageVector | Jetpack Compose | Android Developers

In Compose, a raster image (often referred to as a Bitmap ) can be loaded up into an


ImageBitmap instance, and a BitmapPainter is what is responsible for drawing the
bitmap to screen.

For simple use cases, the painterResource() can be used which takes care of creating
an ImageBitmap and returns a Painter object (in this case - a BitmapPainter ):

Image(
painter = painterResource(id = R.drawable.dog),
contentDescription = stringResource(id = R.string.dog_content_description
)
snippets/src/main/java/com/example/compose/snippets/images/VectorVsBitmapSnippets.kt#L49-L52)

If you require further customization (for instance a custom painter implementation


(/develop/ui/compose/graphics/images/custompainter)) and need access to the ImageBitmap
itself, you can load it in the following way:

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


snippets/src/main/java/com/example/compose/snippets/images/VectorVsBitmapSnippets.kt#L56-L56)

ImageVector
A VectorPainter is responsible for drawing an ImageVector to screen. ImageVector
supports a subset of SVG commands. Not all images can be represented as vectors (for
example, the photos you take with your camera cannot be transformed into a vector).

You can create a custom ImageVector either by importing an existing vector drawable
XML file (imported into Android Studio using the import tool
(/studio/write/vector-asset-studio#running)) or implementing the class and issuing path
commands manually.

For simple use cases, the same way in which painterResource() works for the
ImageBitmap class, it also works for ImageVectors , returning a VectorPainter as the
result. painterResource() handles the loading of VectorDrawables and
BitmapDrawables into VectorPainter and BitmapPainter respectively. To load a
VectorDrawable into an image, use:

https://developer.android.com/develop/ui/compose/graphics/images/compare 2/3
8/9/24, 10:34 AM ImageBitmap vs ImageVector | Jetpack Compose | Android Developers

Image(
painter = painterResource(id = R.drawable.baseline_shopping_cart_24),
contentDescription = stringResource(id = R.string.shopping_cart_content_de
)
snippets/src/main/java/com/example/compose/snippets/images/VectorVsBitmapSnippets.kt#L64-L67)

If you’d require further customization and need to access to the ImageVector itself, you
can load it in the following way:

val imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping


/snippets/src/main/java/com/example/compose/snippets/images/VectorVsBitmapSnippets.kt#L71-L71)

Previous
arrow_back Loading images (/develop/ui/compose/graphics/images/loading)
Next
Material icons (/develop/ui/compose/graphics/images/material)
arrow_forward

Content and code samples on this page are subject to the licenses described in the Content License
(/license). Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.

Last updated 2024-08-06 UTC.

https://developer.android.com/develop/ui/compose/graphics/images/compare 3/3

You might also like