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).
Figure 2
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).
Figure 7
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.