Surface and shape in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the visual result of this Kotlin Compose code?

Consider this Compose UI code that draws a shape with a shadow. What will the user see on the screen?

Android Kotlin

Box(modifier = Modifier
  .size(100.dp)
  .shadow(8.dp, shape = RoundedCornerShape(16.dp))
  .background(Color.Red, shape = RoundedCornerShape(16.dp)))

A A red square with rounded corners and a shadow around it

B A transparent box with a shadow but no color

C A red circle with a shadow

D A red square with sharp corners and no shadow

💡 Hint

Look at the shape used in background and shadow modifiers.

The Box has a red background with rounded corners of 16.dp and a shadow of 8.dp with the same rounded shape, so the shadow follows the rounded corners.

🧠 Conceptual

intermediate

What does the Surface composable provide in Jetpack Compose?

In Jetpack Compose, what is the main purpose of the Surface composable?

A To provide a container that applies background color, elevation, and shape

B To handle navigation between screens

C To load images from the internet

D To draw a clickable button with text

💡 Hint

Think about a container that can have shadows and rounded corners.

Surface is a container that applies background color, elevation (shadow), and shape to its content, helping to create material design surfaces.

❓ lifecycle

advanced

How does changing the shape parameter of a Surface affect recomposition?

If you change the shape parameter of a Surface composable dynamically, what happens in the Compose UI lifecycle?

A Nothing changes because shape is not a state

B The Surface recomposes and redraws with the new shape

C The app crashes due to shape mismatch

D The Surface ignores the new shape and keeps the old one

💡 Hint

Changing parameters that affect UI appearance triggers recomposition.

Changing the shape parameter causes Compose to recompose the Surface and redraw it with the new shape, updating the UI accordingly.

📝 Syntax

advanced

Which code snippet correctly applies a circular shape with elevation to a Surface?

Select the Kotlin Compose code that creates a Surface with a circular shape and 12.dp elevation.

A Surface(shape = RoundedCornerShape(50%), elevation = 12.dp) { /* content */ }

B Surface(shape = CircleShape(), elevation = 12) { /* content */ }

C Surface(shape = CircleShape, elevation = 12) { /* content */ }

D Surface(shape = CircleShape, elevation = 12.dp) { /* content */ }

💡 Hint

Check the correct usage of CircleShape and elevation parameter type.

CircleShape is an object, so no parentheses needed. Elevation requires a Dp value, so 12.dp is correct. Options C and D have wrong syntax or types.

🔧 Debug

expert

Why does this Surface not show a shadow despite elevation set?

Given this code, why is the shadow not visible? Surface( modifier = Modifier.size(100.dp), elevation = 8.dp, shape = RoundedCornerShape(12.dp), color = Color.Transparent ) { Box(modifier = Modifier.fillMaxSize().background(Color.Blue)) }

A Because elevation only works with MaterialTheme colors

B Because the Box inside covers the Surface, hiding the shadow

C Because the Surface color is transparent, the shadow is not drawn

D Because RoundedCornerShape does not support shadows

💡 Hint

Surface elevation shadow visibility depends on the color parameter.

Because the Surface color is transparent, the shadow is not drawn. In Jetpack Compose Material Surface, the elevation shadow is rendered based on the surface color; transparent color results in no visible shadow.