Surface and shape in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a rounded corner shape with 16.dp radius.

Android Kotlin

val shape = RoundedCornerShape([1])

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

A24.dp

B8.dp

C16.dp

D32.dp

Attempts:

3 left

💡 Hint

Common Mistakes

Using a plain number without dp causes errors.

Using too small or too large values changes the shape unexpectedly.

The RoundedCornerShape constructor takes a corner radius. Using 16.dp creates a shape with 16 density-independent pixels rounded corners.

2fill in blank

medium

Complete the code to set a background color and shape to a Box composable.

Android Kotlin

Box(modifier = Modifier.background(color = Color.Blue, shape = [1]))

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

ACutCornerShape(4.dp)

BRectangleShape

CRoundedCornerShape(8.dp)

DCircleShape

Attempts:

3 left

💡 Hint

Common Mistakes

Using RectangleShape will not round the corners.

Using RoundedCornerShape requires specifying the radius.

CircleShape creates a circular shape for the background of the Box.

3fill in blank

hard

Fix the error in the code to clip a composable with a rounded shape.

Android Kotlin

Modifier.[1](RoundedCornerShape(12.dp))

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

Aborder

Bclip

Cpadding

Dbackground

Attempts:

3 left

💡 Hint

Common Mistakes

Using background only sets color but does not clip.

Using padding or border does not clip the shape.

The clip modifier is used to apply a shape mask to a composable, clipping its content to that shape.

4fill in blank

hard

Fill both blanks to create a Box with a red background and a cut corner shape of 10.dp.

Android Kotlin

Box(modifier = Modifier.background(color = [1], shape = [2]))

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

AColor.Red

BColor.Green

CCutCornerShape(10.dp)

DRoundedCornerShape(10.dp)

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing rounded and cut corner shapes.

Using wrong color constants.

Using Color.Red sets the background color to red, and CutCornerShape(10.dp) creates a shape with cut corners of 10.dp size.

5fill in blank

hard

Fill all three blanks to create a Surface with a blue color, rounded corners of 20.dp, and elevation of 8.dp.

Android Kotlin

Surface(color = [1], shape = [2], elevation = [3]) {
    // content here
}

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

AColor.Blue

BRoundedCornerShape(20.dp)

C8.dp

DCutCornerShape(20.dp)

Attempts:

3 left

💡 Hint

Common Mistakes

Using cut corner shape instead of rounded.

Forgetting to add elevation or using wrong units.

The Surface composable uses Color.Blue for background color, RoundedCornerShape(20.dp) for smooth corners, and 8.dp for elevation to cast a 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