Skip to main content

How to add background image to your Android project with Jetpack Compose

Image
by

 


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.


Figure 1

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 


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


Figure 4


Figure 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 6


Figure 7


Figure 8

The background image is now imported into our Android Project as shown in Figure 9.


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


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


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


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


Figure 13

That’s it.

Thank you for reading.

Labels

Tags

Popular Posts

Android Development: Addition of Bottom Navigation Bar with Kotlin and Jetpack Compose

by
  Introduction In this article, we will add bottom navigation bar to the second screen of the “Demo One” App that I have been using for demonstrations in my previous Android development articles. The bottom navigation bar will have three navigation items, which are, “Home”, “Info” and “Settings”.  The navigation items would be programmed to render their contents on the screen accordingly when clicked or tapped. Note that the “Demo One” Android project already had a TopAppBar, as added in my previous article. The user interface of the second screen of the Demo One App is as shown in Figure 1. Figure 1 Addition of Needed Dependency The dependency that we will need for the addition of bottom navigation bar to our Android project is called “navigation”. Let us now open the module-level build.gradle file in our Android project and add the version 2.6.0 of the navigation dependency. After the addition of the dependency, we will connect to the internet and then click on “Sync...
Post a Comment
Read more

Android Development: Using Alert Dialog with Button in Jetpack Compose

by
  Introduction: In Android application development, buttons could be programmed to perform some actions (such as navigating to another screen, showing toast message, closing the app, among others) when the user taps or clicks on them. In this article, we will learn how to make a button to perform the action of displaying an alert message to the user. This would be achieved using a composable function called AlertDialog. Note that we will be demonstrating this with the 'Click Here to Proceed' button located inside the ‘DemoScreen’ composable function in our 'Demo One' Android project from my previous article. Demonstration: First, we will open the 'Demo One' project. ‘Demo One’ project is now opened as shown in Figure 1. Figure 1 Next, above the button composable in our ‘DemoScreen’ composable function, we will define a mutable state variable, set its value to ‘false’, and store it with the name 'showAlertMessage' (as shown in Figure 2). Note th...
Post a Comment
Read more