How to add background image to your Android project with Jetpack Compose
Introduction:
There could be instances when we might decide to use an image as the background instead of the default background color for some specific screens in the Android app we are developing. With the combination of Jetpack Compose and Kotlin programming language in Android Studio, this can be easily achieved. One of the ways to achieve this is to make use of Box layout composable and add the background image as the first element in the Box layout.
Box layout makes elements or items placed in it to be stacked on each other; so, every other element will be placed on the first element (which will be a background image in our own case).
After adding the Image composable, we can add another layout such as Column or Row or even another Box that will contain the other items (such as Text composable, Button composable, and so on) that should be on the background of the app screen.
Demonstration:
In this demo, we will be adding a JPEG image named “demo_bg” as our background. The dimension of the image is 1080 x 1920 pixel. Figure 1 shows the demo_bg.jpg.
Let us launch our Android Studio and create a new project named “Demo One” using “Empty Compose Activity” template (as in Figures 2 and 3).
Our “Demo One” project is now created with some default codes for “Greeting” (that is, “Hello Android”) in the MainActivity.kt. We can click on the “Split” view, and then, click on “Build & Refresh” to see the Preview of our User Interface (as in Figures 4 and 5).
Next, we will copy the background image from our computer, and paste it in the drawable directory in Android Studio (as shown in Figures 6 to 8).
The background image is now imported into our Android Project as shown in Figure 9.
Let us now go back to MainActivity.kt and delete the “Greeting” composable function and replace it with our own composable function named “DemoScreen”. Next, we will delete the call to “Greeting” function in our Preview, and call “DemoScreen” instead. Also, we will make a call to the “DemoScreen” function in Surface composable inside SetContent() method (as in Figure 10).
We can now go back to our “DemoScreen” composable function and add some contents to it. In it, we will add a Box composable that will fill the whole width and height of the Screen using Modifier.fillMaxSize. Next, we will add Image composable that will reference our image, and with ContentScale set to FillBounds, and a Modifier with matchParentSize (as in Figure 11).
Next to the Image composable, we will add a Column layout that will fill maximum size of the parent, and with horizontal alignment set to CenterHorizontally, and vertical arrangement set to Arrangement.Center (as in Figure 8). In the Column, we will add a Text and a Button.
Our background image and other Composables are now added, as shown in the Preview screen (Figure 12).
Since we have previously called our DemoScreen composable function in SetContent, when we run the emulator, the UI will also be clearly shown (as in Figure 13).
That’s it.
Thank you for reading.
Happy coding!
