Overlay and background modifiers in iOS Swift - Mini App: Build & Ship

Build: OverlayBackgroundDemo

This screen shows how to use overlay and background modifiers in SwiftUI to layer views and add backgrounds.

Target UI

-------------------------
|                       |
|   [Blue Rectangle]     |
|   with white Text      |
|   and red Circle       |
|                       |
-------------------------

Create a blue rectangle of size 200x100 points.

Add white text "Hello SwiftUI" centered inside the rectangle using overlay.

Add a small red circle (30x30 points) as an overlay aligned to the top-right corner of the rectangle.

Add a light gray rounded rectangle as the background behind the blue rectangle with corner radius 15.

Starter Code

iOS Swift

import SwiftUI

struct OverlayBackgroundDemo: View {
    var body: some View {
        // TODO: Add your code here
        Text("")
    }
}

struct OverlayBackgroundDemo_Previews: PreviewProvider {
    static var previews: some View {
        OverlayBackgroundDemo()
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

iOS Swift

import SwiftUI

struct OverlayBackgroundDemo: View {
    var body: some View {
        Rectangle()
            .fill(Color.blue)
            .frame(width: 200, height: 100)
            .overlay(
                Text("Hello SwiftUI")
                    .foregroundColor(.white)
                    .font(.headline)
            )
            .overlay(
                Circle()
                    .fill(Color.red)
                    .frame(width: 30, height: 30)
                    .offset(x: 85, y: -35), alignment: .topTrailing
            )
            .background(
                RoundedRectangle(cornerRadius: 15)
                    .fill(Color(white: 0.9))
                    .frame(width: 220, height: 120)
            )
    }
}

struct OverlayBackgroundDemo_Previews: PreviewProvider {
    static var previews: some View {
        OverlayBackgroundDemo()
    }
}

We start with a blue rectangle sized 200x100 points. We add the white text "Hello SwiftUI" centered on top using the overlay modifier. Then, we add a small red circle as another overlay aligned to the top-right corner by using alignment: .topTrailing and offsetting it slightly to position it nicely. Finally, we add a light gray rounded rectangle as the background behind the blue rectangle using the background modifier with a corner radius of 15 and slightly larger size to frame the blue rectangle visually.

This layering shows how overlays and backgrounds can be stacked to create rich UI designs in SwiftUI.

Final Result

Completed Screen

-------------------------
|  (red circle)          |
|       ●               |
|   -----------------   |
|  |                 |  |
|  |  Hello SwiftUI  |  |
|  |                 |  |
|   -----------------   |
|                       |
-------------------------

The screen shows a blue rectangle with white text centered.

A small red circle is visible at the top-right corner overlapping the rectangle.

A light gray rounded rectangle frames the blue rectangle as background.

Stretch Goal

Add a shadow to the blue rectangle to make it stand out more.

💡 Hint

Use the .shadow modifier on the blue rectangle with radius and offset parameters.

Practice

1. What does the .overlay() modifier do in SwiftUI?

easy

A. Removes the existing view

B. Adds a view behind the existing view

C. Adds a view on top of the existing view

D. Changes the size of the existing view

Solution

1. Step 1: Understand the purpose of .overlay()

   The .overlay() modifier places a new view on top of the original view, layering it above.

2. Step 2: Compare with other modifiers

   .background() adds behind, but .overlay() adds on top, so it does not add behind or remove views.

3. Final Answer:

   Adds a view on top of the existing view -> Option C

4. Quick Check:

   Overlay = on top [OK]

Hint: Overlay means 'on top', background means 'behind' [OK]

Common Mistakes:

• Confusing overlay with background
• Thinking overlay removes views
• Assuming overlay changes size

2. Which of the following is the correct syntax to add a red circle as a background to a Text view in SwiftUI?

easy

A. Text("Hello").circle().background(Color.red)

B. Text("Hello").background(Circle().fill(Color.red))

C. Text("Hello").background(Color.red).circle()

D. Text("Hello").overlay(Circle().fill(Color.red))

Solution

1. Step 1: Identify correct modifier usage

   To add a shape behind a view, use .background() with the shape view inside.

2. Step 2: Check syntax correctness

   Text("Hello").background(Circle().fill(Color.red)) correctly adds a red circle behind the text. Other options misuse modifiers or order.

3. Final Answer:

   Text("Hello").background(Circle().fill(Color.red)) -> Option B

4. Quick Check:

   Background with shape inside = correct syntax [OK]

Hint: Background wraps shape inside parentheses after .background() [OK]

Common Mistakes:

• Using overlay instead of background for behind view
• Calling .circle() on Text (no such modifier)
• Placing background after shape incorrectly

3. What will be the visible result of this SwiftUI code?

Text("Hi")
  .background(Color.yellow)
  .overlay(Text("Overlay"))

medium

A. Text "Hi" with yellow background and "Overlay" text on top

B. Text "Hi" with yellow background only, no overlay text

C. Text "Overlay" with yellow background, "Hi" hidden

D. Only yellow background visible, no text

Solution

1. Step 1: Understand modifier order

   The .background(Color.yellow) adds a yellow color behind "Hi" text. Then .overlay(Text("Overlay")) places "Overlay" text on top.

2. Step 2: Visual layering result

   Both texts are visible: "Hi" with yellow behind, and "Overlay" layered above.

3. Final Answer:

   Text "Hi" with yellow background and "Overlay" text on top -> Option A

4. Quick Check:

   Background behind, overlay on top = layered views [OK]

Hint: Background is behind, overlay is on top, both visible [OK]

Common Mistakes:

• Thinking overlay replaces original text
• Ignoring modifier order effects
• Assuming background covers overlay

4. Identify the error in this SwiftUI code snippet:

Image(systemName: "star")
  .overlay(Circle().stroke(Color.blue))
  .background(Circle().fill(Color.yellow))
  .background(Color.red)

medium

A. Circle cannot be used inside overlay

B. Overlay must come after all backgrounds

C. Image cannot have background or overlay modifiers

D. Multiple background modifiers cause only the first to apply

Solution

1. Step 1: Analyze multiple background modifiers

   Applying .background() twice stacks backgrounds, but only the first background modifier applies directly behind the view, later ones get layered behind that.

2. Step 2: Understand layering order

   The last .background(Color.red) will be behind the yellow circle background, so the red color might be hidden or layered behind unexpectedly.

3. Final Answer:

   Multiple background modifiers cause only the first to apply -> Option D

4. Quick Check:

   Last background behind earlier ones visually [OK]

Hint: Multiple backgrounds stack but first is closest behind view [OK]

Common Mistakes:

• Thinking overlay must be last
• Believing Circle can't be overlay
• Assuming Image can't have modifiers

5. You want to create a button with a blue rounded rectangle background and a white checkmark icon overlay on top. Which SwiftUI code correctly achieves this layering?

hard

A. Image(systemName: "checkmark")
.background(RoundedRectangle(cornerRadius: 10).fill(Color.blue))
.overlay(Image(systemName: "checkmark").foregroundColor(.white))

B. Image(systemName: "checkmark")
.background(Color.blue.cornerRadius(10))
.overlay(Color.white.opacity(0.5))

C. Image(systemName: "checkmark")
.overlay(Color.blue.cornerRadius(10))

D. Image(systemName: "checkmark")
.background(Image(systemName: "checkmark"))
.overlay(Color.blue.cornerRadius(10))

Solution

1. Step 1: Add blue rounded rectangle background

   Use .background(RoundedRectangle(cornerRadius: 10).fill(Color.blue)) to create a blue rounded rectangle behind the icon.

2. Step 2: Overlay white checkmark icon

   Use .overlay(Image(systemName: "checkmark").foregroundColor(.white)) to place a white checkmark on top of the background.

3. Step 3: Verify layering and colors

   This layering ensures the blue shape is behind and the white icon is visible on top.

4. Final Answer:

   Image(systemName: "checkmark") .background(RoundedRectangle(cornerRadius: 10).fill(Color.blue)) .overlay(Image(systemName: "checkmark").foregroundColor(.white)) -> Option A

5. Quick Check:

   Background shape + overlay icon = correct layering [OK]

Hint: Background for shape, overlay for icon on top [OK]

Common Mistakes:

• Using overlay for background shape
• Overlaying color instead of icon
• Background with icon instead of shape