Introduction

Jetpack Compose is a modern Android UI development kit that makes UI development with composable functions easy. Images are a vital aspect of the user interface of any application, from displaying icons to presenting content.

With the Image Composable function, you can display and customize images on your application. This guide will walk you through the process of adding images to your Android application using Jetpack Compose.

Prerequisite

• You must have Basic knowledge of the Kotlin programming language.

• Ensure Android Studio is installed on your computer.

• An emulator running on your Android studio or a USB debugging device

• Ensure you are familiar with Android Studio.

Setting Up Your Compose Project

Installing the necessary dependencies

implementation("androidx.compose.ui:ui-graphics")
implementation("androidx.compose.ui:ui-tooling-preview")
implementation("androidx.compose.material3:material3")

The above dependencies should be pasted on your build.gradle file in Android Studio if you don't have it.

Steps in Creating a Compose Project

Step 1: Open your Android Studio and click on New Project

Step 2: Click on Empty Activity

Step 3: Set the name of your application>package name>Location>MinimumSDK>Build Configuration Language > Click on Finish

Step 4: After creating the project allow Gradle to build. If you don't have the Material and UI dependencies copy and paste the dependencies from the above code. At the left side of Android Studio click on GradleScripts >build.gradle.kts(module:app)

Paste to allow Gradle to synchronize and build.

Description of Image in Compose

Images are represented using the Image composable function in Jetpack Compose. To display an image, you need to provide it with a Painter that loads drawable resources i.e. the image itself. The images are placed in the drawables, vector drawables, and URLs as well as bitmaps resource files.

The Content description function allows you to describe your image, this can also be set as null.

The Modifier function allows you to size your image by fixing its width and height or using other modifier properties.

Lastly, the ContentScale function traditionally known as scale type. This allows you to specify how the image should be scaled to fit in within its bound or control how the image should be displayed. The content scale has the following properties FillBounds, FillHeight, FillWidth, Inside, Fit, Crop.

How to Create a Simple Image

Copy and paste your image on the drawable resource file

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           SimpleImage()


       }
   }
}

@Composable
fun SimpleImage() {
   Image(
       painter = painterResource(id = R.drawable.pet),
       contentDescription = "pet",
       modifier = Modifier.fillMaxWidth()
   )
}

Output

In this example, the (R.drawable.pet) displays the Image using the Image composable function. The fillMaxWidth modifier ensures the image takes up the entire available width of the parent layout.

How to Create a Circle Image

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           CircleImage()


       }
   }
}

@Composable
fun CircleImage() {
   Image(
       painter = painterResource(id = R.drawable.pet),
       contentScale = ContentScale.Crop,// scales the content proportionally to completely fill the bounds
       contentDescription = "car",
       modifier = Modifier
           .padding(40.dp)
           .size(120.dp)// increases the size of the image function
           .clip(CircleShape)//gives the image a circle shape


   )
}

Output

In this example, padding was added to all sides of the image composable to shift it from the parent layout, the clip modifier gives the circle shape and ContentScale.Crop scales the content proportionally to fill the bounds.

How to Create a Rounded Corner Image

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           RoundedCornerImage()


       }
   }
}

@Composable
fun RoundedCornerImage() {
   Image(
       painter = painterResource(id = R.drawable.pet),
       contentDescription = "pet",
       contentScale = ContentScale.Crop,
       modifier = Modifier
           .padding(40.dp)
           .size(120.dp)
           .clip(RoundedCornerShape(20))//takes values in percent or dp



   )
}

Output

In the above example, padding was added to the Image function, and the clip property for the RoundedCornerShape takes values in dp or percent.

Conclusion

In this guide, we've learned the basics of creating images in Jetpack Compose for UI in app development, including creating simple, circular, and rounded corner images.

This is very crucial for beginners to compose. With this basic concept, you can enhance the visuals of your mobile application. There is more to the application of the image Composable function which you can keep exploring.

https://developer.android.com/courses/android-basics-compose/unit-1