How to implement an image in Android using Jetpack Compose and Kotlin

Oscar de la Hera Gomez
Four flowers that represent Kotlin, Android, Jetpack Compose and Android Studio side by side. Beneath them sits the text “Local Images.”

A step by step guide on adding a local image to Android Studio and using it in an app using Jetpack Compose and Kotlin.

Step One: Add the Image

A screenshot of Android Studio showing the Resources Manager window that includes a "Sudo Image" which is added as part of this step.

The following step walks you through how to add an image to your Android apps resources, which can later be consumed by the app.

A | Open the Resource Manager

A screenshot of Android Studio showing the location of the Resource Manager tab - which is found on the top left side of Android Studio on a side bar.

In Android Studio, select the Resource Manager tab on the left menu side bar.

B | Drag and Drop the Image

A screenshot of Android Studio showing the modal that appears when you drag and drop an image into the resource manager. Click "next" on the bottom right and move onto the next part of this step.

Drag and drop the image into the resource manager.

This will bring up a modal similar to the one above where you can add extra configurations to your image, including changing its reference name (sudoimage on the top left of the imported image). When you are ready, press Next.

C | Import

A screenshot of the modal that allows you to confirm that everything looks right for the image or images that you are trying to import. This appears after pressing next (last step) and if everything looks right, press "Import" on the bottom right to complete the process.

Finally, click Import to complete importing the image into your apps resources.

Step Two: Implement the Image

A screenshot of Android Studio showing the implementation of the image through the code that is available below.

Wherever you wish to implement the image, use code similar to the one below.

Please note that R.drawable.sudoimage should be replaced with R.drawable.THE_IMAGE_REF, where THE_IMAGE_REF is the name that was given to your image in Step One part B.

Step Three: Test

A screenshot of the image being used on a device.

Run your app and confirm that everything looks as expected.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details