Set Background Image in KMP Compose Multiplatform App Screen

In today’s tutorial, we learn how to set the background image in the KMP Compose Multiplatform Android iOS application. This is a step-by-step guide in which we will use background images from shared resources.

Set Background Image in KMP Compose Multiplatform App Screen

Set Background Image in KMP Compose Multiplatform App Screen.

We all have seen background images applied in many Android & iOS applications. In KMM(Kotlin multiplatform mobile) to set the background image as the application screen background we will use the Box widget. Basically in Compose Multiplatform, all the Views are in Root and child format.

1. First of all download our demo home_bg.jpg image from below or you can use your image. But the image should be in the right dimensions.

demo background image

2. Open your Compose Multiplatform project and paste the background image into,

composeApp -> commonMain -> composeResource -> drawable folder.

KMP common resource folder for Image

3. Now, we have to Rebuild our Android Studio project. Without the Rebuild project, we cannot use images placed inside shared resources.

Rebuild KMP project

4. Open your project’s App.kt file and create your app’s Root component – App composable.

5. Creating a HomeScreen composable component. This is our home screen. In this screen, we will integrate the Box component, and as a box child, we will put the Image component. This will set the background image as our Home screen.

Complete source code for App.kt file:

Screenshot in Android device:

Set Background Image in KMP Compose Multiplatform App Screen

Screenshot in iOS device:

Background image in iOS

 

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *