How to Convert a Vector to Bitmap in Android?

A vector is a set of points, lines, and colors associated with any image object defined inside an XML file. All these associated attributes are compiled in real-time to develop an image object. Simply, a vector is a coded representation of an image object. Bitmap, also known as bitmap index or bit array is a mapping from integers to bits. It is pixel-oriented a memory organization used to store digital images.

Bitmap representation

In this article, we will show you how you could convert a Vector to a Bitmap in Android. Follow the below procedures once the IDE is ready.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.

Step 2: Create a vector

We create a vector asset as shown below. To create a vector asset, right-click on the res folder, drag the mouse to New, and select the Vector Asset option. You can also refer to the below article for creating a new vector asset: How to Add Vector Assets in Android Studio?

Step 3: Working with the activity_main.xml file

We added two ImageViews and a Button between them. The first ImageView will display the Vector form of the image. The second ImageView will display the processed Bitmap image on a button click.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view_1"
        android:layout_width="100sp"
        android:layout_height="100sp"
        android:layout_centerHorizontal="true"/>

    <Button
        android:id="@+id/button_1"
        android:layout_below="@id/image_view_1"
        android:layout_marginTop="20sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Process"
        android:layout_centerHorizontal="true"/>

    <ImageView
        android:id="@+id/image_view_2"
        android:layout_below="@id/button_1"
        android:layout_marginTop="20sp"
        android:layout_width="100sp"
        android:layout_height="100sp"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

Step 4: Working with the MainActivity.kt file

In the code, we implemented a function that takes in the vector location and processes into a bitmap. This function is called in the main code to convert the vector image to bitmap form. Comments are added inside the code to understand the code in more detail.

Kotlin

package org.geeksforgeeks.myapplication

import android.content.Context
import android.graphics.Bitmap
import android.graphics.Canvas
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView
import androidx.core.content.ContextCompat

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Declaring and initializing the two
        // ImageViews and the Button from the layout file.
        val mImageViewBefore = findViewById<ImageView>(R.id.image_view_1)
        val mImageViewAfter = findViewById<ImageView>(R.id.image_view_2)
        val mButton = findViewById<Button>(R.id.button_1)

        // Displaying the vector form in the first ImageView
        mImageViewBefore.setImageResource(R.drawable.sample_vector)

        // On button click, the vector form is processed into Bitmap version.
        // This bitmap version is displayed in the second ImageView.
        mButton.setOnClickListener {
            val mBitmap = getBitmapFromVectorDrawable(this, R.drawable.sample_vector)
            mImageViewAfter.setImageBitmap(mBitmap)
        }
    }

    // Function that converts the vector form to Bitmap form.
    private fun getBitmapFromVectorDrawable(context: Context, drawableId: Int): Bitmap {
        val drawable = ContextCompat.getDrawable(context, drawableId)
        val bitmap = Bitmap.createBitmap(
            drawable!!.intrinsicWidth,
            drawable.intrinsicHeight, Bitmap.Config.ARGB_8888
        )
        val canvas = Canvas(bitmap)
        drawable.setBounds(0, 0, canvas.width, canvas.height)
        drawable.draw(canvas)
        return bitmap
    }
}

Output:

We can see that upon button click, the bitmap version of the vector is displayed in the second ImageView.