Surface and shape in Android Kotlin - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Surface in Android development?

A Surface is a drawing area that holds pixels to be displayed on the screen. It acts like a canvas where you can draw shapes, images, or text.

beginner

How do you create a Shape drawable in Android?

You create a Shape drawable by defining an XML file in the res/drawable folder using the <shape> tag. You can specify properties like solid color, corners radius, and stroke width.

intermediate

What is the difference between Canvas and SurfaceView?

Canvas is an object used to draw on a bitmap or surface. SurfaceView provides a dedicated drawing surface embedded inside a view hierarchy, allowing drawing on a separate thread for better performance.

beginner

Why use ShapeDrawable instead of bitmap images for shapes?

ShapeDrawable is scalable and lightweight. It uses vector shapes defined in XML, so it looks sharp on all screen sizes and reduces app size compared to bitmap images.

beginner

How can you make a rounded rectangle shape in Android XML?

Use the <shape> tag with shape="rectangle" and add <corners android:radius="10dp" /> inside it to round the corners.

Which Android class provides a dedicated drawing surface for custom drawing on a separate thread?

A ViewGroup

B Canvas

C SurfaceView

D Drawable

SurfaceView provides a separate drawing surface that can be updated on a different thread for better performance.

What XML tag is used to define a shape drawable in Android?

A <bitmap>

B <shape>

C <vector>

D <drawable>

The tag defines a shape drawable in XML.

Which property in a shape drawable XML controls the corner rounding?

A corners

B stroke

C padding

D gradient

The corners tag controls the radius of the shape's corners.

Why is ShapeDrawable preferred over bitmap images for simple shapes?

A It can only be used in SurfaceView

B It supports animations by default

C It loads faster from the internet

D It uses less memory and scales well

ShapeDrawable is vector-based, so it uses less memory and scales without losing quality.

What does the Canvas class in Android do?

A Provides methods to draw shapes and text

B Handles user input events

C Manages app navigation

D Stores app data

Canvas provides drawing methods to render shapes, text, and images.

Explain how SurfaceView and Canvas work together for custom drawing in Android.

Think about how you would draw moving shapes smoothly.

Describe how to create and use a shape drawable XML to make a button background with rounded corners.

Imagine styling a button with a colored background and smooth edges.

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