Image composable in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display an image from a drawable resource using Image composable.

Android Kotlin

Image(painter = painterResource(id = [1]), contentDescription = "Sample image")

Drag options to blanks, or click blank then click option'

AR.layout.activity_main

BR.string.app_name

CR.color.primary

DR.drawable.ic_launcher_foreground

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string or layout resource instead of a drawable resource.

Forgetting to use painterResource to load the drawable.

The painterResource function requires a drawable resource ID to load the image. R.drawable.ic_launcher_foreground is a valid drawable resource.

2fill in blank

medium

Complete the code to set the content scale of the Image composable to crop the image.

Android Kotlin

Image(painter = painterResource(id = R.drawable.ic_launcher_foreground), contentDescription = "Sample image", contentScale = [1])

Drag options to blanks, or click blank then click option'

AContentScale.Crop

BContentScale.FillBounds

CContentScale.Fit

DContentScale.Inside

Attempts:

3 left

💡 Hint

Common Mistakes

Using ContentScale.Fit which fits the whole image but may leave empty space.

Using ContentScale.FillBounds which stretches the image.

ContentScale.Crop scales the image to fill the bounds and crops any overflow, which is useful to fill the space without distortion.

3fill in blank

hard

Fix the error in the code by completing the modifier to add padding around the Image composable.

Android Kotlin

Image(painter = painterResource(id = R.drawable.ic_launcher_foreground), contentDescription = "Sample image", modifier = Modifier.[1](16.dp))

Drag options to blanks, or click blank then click option'

Apadding

BfillMaxSize

Cbackground

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Using size instead of padding which changes the composable size.

Using background which changes color but not space.

The padding modifier adds space around the composable. Using padding(16.dp) adds 16 density-independent pixels of space around the image.

4fill in blank

hard

Fill both blanks to create an Image composable that fills the max width and has a rounded corner shape.

Android Kotlin

Image(painter = painterResource(id = R.drawable.ic_launcher_foreground), contentDescription = "Sample image", modifier = Modifier.[1]().clip(RoundedCornerShape([2])))

Drag options to blanks, or click blank then click option'

AfillMaxWidth

BfillMaxHeight

C8.dp

D16.dp

Attempts:

3 left

💡 Hint

Common Mistakes

Using fillMaxHeight instead of fillMaxWidth.

Using too small or no corner radius.

fillMaxWidth() makes the image fill the available width. RoundedCornerShape(16.dp) rounds the corners with a radius of 16 density-independent pixels.

5fill in blank

hard

Fill all three blanks to create an Image composable with a content description, a tint color, and a size modifier.

Android Kotlin

Image(painter = painterResource(id = R.drawable.ic_launcher_foreground), contentDescription = [1], colorFilter = ColorFilter.tint([2]), modifier = Modifier.[3](48.dp))

Drag options to blanks, or click blank then click option'

A"App icon"

BColor.Red

Csize

Dpadding

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding instead of size for the modifier.

Not providing a content description string.

Using a color without ColorFilter.tint.

The contentDescription should be a descriptive string like "App icon" for accessibility. ColorFilter.tint(Color.Red) applies a red tint to the image. Modifier.size(48.dp) sets the image size to 48 density-independent pixels.