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.

Practice

1. What is the primary purpose of SurfaceView in Android development?

easy

A. To provide a dedicated drawing surface for custom graphics

B. To handle user input events like clicks and touches

C. To manage app navigation between screens

D. To display static text content

Solution

1. Step 1: Understand SurfaceView role

   SurfaceView provides a special area where you can draw graphics directly on a separate thread.

2. Step 2: Compare with other options

   Handling input, navigation, or static text are not the main roles of SurfaceView.

3. Final Answer:

   To provide a dedicated drawing surface for custom graphics -> Option A

4. Quick Check:

   SurfaceView = Dedicated drawing surface [OK]

Hint: SurfaceView is for drawing graphics, not UI controls [OK]

Common Mistakes:

• Confusing SurfaceView with View for UI controls
• Thinking SurfaceView handles navigation
• Assuming SurfaceView manages text display

2. Which of the following is the correct way to start drawing on a SurfaceView canvas in Kotlin?

easy

A. val canvas = surfaceView.getCanvas()
canvas.drawColor(Color.RED)
surfaceView.postCanvas(canvas)

B. val canvas = surfaceView.lockCanvas()
canvas.fill(Color.RED)
surfaceView.unlockCanvas(canvas)

C. val canvas = surfaceHolder.getCanvas()
canvas.clear(Color.RED)
surfaceHolder.postCanvas(canvas)

D. val canvas = surfaceHolder.lockCanvas()
canvas.drawColor(Color.RED)
surfaceHolder.unlockCanvasAndPost(canvas)

Solution

1. Step 1: Identify correct SurfaceHolder methods

   To draw on SurfaceView, use surfaceHolder.lockCanvas() to get Canvas and unlockCanvasAndPost() to post.

2. Step 2: Check method names and usage

   Only val canvas = surfaceHolder.lockCanvas() canvas.drawColor(Color.RED) surfaceHolder.unlockCanvasAndPost(canvas) uses correct methods: lockCanvas(), drawColor(), unlockCanvasAndPost().

3. Final Answer:

   val canvas = surfaceHolder.lockCanvas()\ncanvas.drawColor(Color.RED)\nsurfaceHolder.unlockCanvasAndPost(canvas) -> Option D

4. Quick Check:

   lockCanvas + unlockCanvasAndPost = correct drawing flow [OK]

Hint: Use lockCanvas() and unlockCanvasAndPost() with SurfaceHolder [OK]

Common Mistakes:

• Using non-existent methods like getCanvas()
• Calling unlockCanvas() instead of unlockCanvasAndPost()
• Trying to draw directly on SurfaceView without Canvas

3. Given the following Kotlin code inside a SurfaceView's drawing thread, what color will fill the canvas?

val paint = Paint()
paint.color = Color.BLUE
val canvas = surfaceHolder.lockCanvas()
canvas.drawRect(0f, 0f, 100f, 100f, paint)
surfaceHolder.unlockCanvasAndPost(canvas)

medium

A. Blue rectangle

B. Red rectangle

C. Transparent rectangle

D. Green rectangle

Solution

1. Step 1: Analyze Paint color setting

   Paint color is set to Color.BLUE, so drawing uses blue color.

2. Step 2: Check drawing command

   drawRect draws a rectangle with the paint color on the canvas.

3. Final Answer:

   Blue rectangle -> Option A

4. Quick Check:

   Paint.color = BLUE means rectangle is blue [OK]

Hint: Paint color sets shape color before drawing [OK]

Common Mistakes:

• Assuming default color is red
• Thinking drawRect clears canvas
• Ignoring paint color setting

4. What is the main issue with this Kotlin SurfaceView drawing code?

val canvas = surfaceHolder.lockCanvas()
canvas.drawCircle(50f, 50f, 30f, paint)

medium

A. Using drawCircle instead of drawOval

B. Missing call to unlockCanvasAndPost(canvas) after drawing

C. Paint object is not initialized

D. Canvas coordinates are out of bounds

Solution

1. Step 1: Check drawing sequence

   After lockCanvas(), you must call unlockCanvasAndPost(canvas) to display the drawing.

2. Step 2: Verify other options

   drawCircle is valid, paint may be initialized, and coordinates are reasonable.

3. Final Answer:

   Missing call to unlockCanvasAndPost(canvas) after drawing -> Option B

4. Quick Check:

   unlockCanvasAndPost needed to show drawing [OK]

Hint: Always unlockCanvasAndPost after lockCanvas [OK]

Common Mistakes:

• Forgetting to post canvas after drawing
• Confusing drawCircle with drawOval
• Assuming drawing appears without unlock

5. You want to draw a red circle with a black border on a SurfaceView. Which Kotlin code snippet correctly achieves this?

hard

A. val canvas = surfaceHolder.lockCanvas()
val paintFill = Paint().apply { color = Color.BLACK; style = Paint.Style.FILL }
val paintStroke = Paint().apply { color = Color.RED; style = Paint.Style.STROKE; strokeWidth = 5f }
canvas.drawCircle(100f, 100f, 50f, paintFill)
canvas.drawCircle(100f, 100f, 50f, paintStroke)
surfaceHolder.unlockCanvasAndPost(canvas)

B. val canvas = surfaceHolder.lockCanvas()
val paint = Paint().apply { color = Color.RED; style = Paint.Style.STROKE; strokeWidth = 5f }
canvas.drawCircle(100f, 100f, 50f, paint)
surfaceHolder.unlockCanvasAndPost(canvas)

C. val canvas = surfaceHolder.lockCanvas()
val paintFill = Paint().apply { color = Color.RED; style = Paint.Style.FILL }
val paintStroke = Paint().apply { color = Color.BLACK; style = Paint.Style.STROKE; strokeWidth = 5f }
canvas.drawCircle(100f, 100f, 50f, paintFill)
canvas.drawCircle(100f, 100f, 50f, paintStroke)
surfaceHolder.unlockCanvasAndPost(canvas)

D. val canvas = surfaceHolder.lockCanvas()
val paint = Paint().apply { color = Color.BLACK; style = Paint.Style.FILL }
canvas.drawCircle(100f, 100f, 50f, paint)
surfaceHolder.unlockCanvasAndPost(canvas)

Solution

1. Step 1: Understand fill and stroke styles

   To draw a filled shape with border, use Paint.Style.FILL for fill and Paint.Style.STROKE for border.

2. Step 2: Check colors and order

   Fill should be red, stroke black with strokeWidth set. Drawing fill first then stroke overlays border correctly.

3. Final Answer:

   Code with red fill and black stroke paints drawn in order -> Option C

4. Quick Check:

   Fill + Stroke paints = red circle with black border [OK]

Hint: Use two Paints: fill red, stroke black with strokeWidth [OK]

Common Mistakes:

• Using stroke style for fill color
• Drawing stroke before fill causing border hidden
• Not setting strokeWidth for border thickness