LazyColumn for lists in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a LazyColumn that displays a list of items.

Android Kotlin

LazyColumn {
    items([1]) { item ->
        Text(text = item)
    }
}

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

AlistOf("Apple", "Banana", "Cherry")

BColumn

CRow

DBox

Attempts:

3 left

💡 Hint

Common Mistakes

Using layout components like Column or Row instead of a list.

Forgetting to pass a list to items.

The items function inside LazyColumn takes a list to display each item.

2fill in blank

medium

Complete the code to add padding around each item in the LazyColumn.

Android Kotlin

LazyColumn {
    items(listOf("Dog", "Cat", "Bird")) { item ->
        Text(text = item, modifier = Modifier.[1](8.dp))
    }
}

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

Amargin

Bpadding

CfillMaxSize

Dbackground

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin which is not a Compose modifier.

Using fillMaxSize which changes size but not padding.

The padding modifier adds space around the Text composable inside each item.

3fill in blank

hard

Fix the error in the LazyColumn code by completing the blank with the correct parameter name for the item key.

Android Kotlin

val items = listOf("Red", "Green", "Blue")
LazyColumn {
    items(items, [1] = { it }) { color ->
        Text(text = color)
    }
}

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

Akey

Bid

Cindex

Dtag

Attempts:

3 left

💡 Hint

Common Mistakes

Using id or index which are not valid parameters here.

Omitting the key parameter causing recomposition issues.

The key parameter helps Compose identify each item uniquely for efficient updates.

4fill in blank

hard

Fill both blanks to create a LazyColumn that displays numbers from 1 to 5 with each number doubled.

Android Kotlin

LazyColumn {
    items([1]) { number ->
        Text(text = "Number: ${number [2] 2}")
    }
}

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

AlistOf(1, 2, 3, 4, 5)

B*

C+

DlistOf(5, 4, 3, 2, 1)

Attempts:

3 left

💡 Hint

Common Mistakes

Using addition instead of multiplication.

Using a reversed list which changes the order.

The list contains numbers 1 to 5, and each number is multiplied by 2 to double it.

5fill in blank

hard

Fill all three blanks to create a LazyColumn that filters a list of words to show only those longer than 4 letters, displaying the word in uppercase.

Android Kotlin

val words = listOf("apple", "bat", "carrot", "dog", "elephant")
LazyColumn {
    items(words.filter { [1] [2] 4 }) { word ->
        Text(text = word.[3]())
    }
}

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

Aword.length

B>

Cuppercase

Dlowercase

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase instead of uppercase.

Using less than operator which filters wrong words.

The code filters words with length greater than 4 and converts them to uppercase before displaying.

Practice

1. What is the main purpose of using LazyColumn in Android Jetpack Compose?

easy

A. To efficiently display a vertical list by creating only visible items

B. To create a horizontal scrolling list

C. To load all list items at once for faster access

D. To display a grid layout of items

Solution

1. Step 1: Understand LazyColumn behavior

   LazyColumn creates only the visible items on screen, not all at once.

2. Step 2: Compare with other list types

   Unlike loading all items, LazyColumn keeps the app smooth by loading items lazily.

3. Final Answer:

   To efficiently display a vertical list by creating only visible items -> Option A

4. Quick Check:

   LazyColumn = efficient vertical list [OK]

Hint: LazyColumn creates only visible items for smooth scrolling [OK]

Common Mistakes:

• Thinking LazyColumn loads all items at once
• Confusing LazyColumn with horizontal lists
• Assuming LazyColumn creates grid layouts

2. Which of the following is the correct syntax to display a list of strings named items using LazyColumn?

easy

A. LazyColumn { itemsList(items) { Text(it) } }

B. LazyColumn { item(items) { Text(it) } }

C. LazyColumn { items(items) { Text(it) } }

D. LazyColumn { list(items) { Text(it) } }

Solution

1. Step 1: Identify correct function name

   The function to iterate over a list in LazyColumn is items, not item, itemsList, or list.

2. Step 2: Check lambda usage

   The lambda receives each element as it and displays it with Text(it).

3. Final Answer:

   LazyColumn { items(items) { Text(it) } } -> Option C

4. Quick Check:

   Use items() inside LazyColumn [OK]

Hint: Use items() to loop list inside LazyColumn [OK]

Common Mistakes:

• Using item() instead of items() for lists
• Misspelling items as itemsList or list
• Not passing the list variable correctly

3. What will be displayed by this code snippet?

val names = listOf("Anna", "Bob", "Cara")
LazyColumn {
  items(names) { name ->
    Text(text = name)
  }
}

medium

A. A vertical list showing Anna, Bob, and Cara

B. A horizontal list showing Anna, Bob, and Cara

C. An empty screen with no text

D. A runtime error due to missing item count

Solution

1. Step 1: Analyze the list and items call

   The list contains three names: Anna, Bob, and Cara. The items function iterates over them.

2. Step 2: Understand LazyColumn behavior

   LazyColumn displays items vertically by default, so each name will appear as a separate Text item vertically.

3. Final Answer:

   A vertical list showing Anna, Bob, and Cara -> Option A

4. Quick Check:

   LazyColumn + items = vertical list [OK]

Hint: LazyColumn shows items vertically by default [OK]

Common Mistakes:

• Thinking LazyColumn creates horizontal lists
• Expecting no output without explicit item count
• Confusing runtime errors with missing parameters

4. Identify the error in this LazyColumn code:

val numbers = listOf(1, 2, 3)
LazyColumn {
  items(numbers) { number ->
    Text(number)
  }
}

medium

A. Missing parentheses after numbers list

B. items should be replaced with item

C. LazyColumn cannot display numbers

D. Text expects a String, but number is an Int

Solution

1. Step 1: Check Text parameter type

   The Text composable expects a String, but number is an Int, causing a type mismatch.

2. Step 2: Fix by converting Int to String

   Use Text(number.toString()) to convert the number to a String before displaying.

3. Final Answer:

   Text expects a String, but number is an Int -> Option D

4. Quick Check:

   Text needs String, not Int [OK]

Hint: Convert numbers to String before passing to Text [OK]

Common Mistakes:

• Using items instead of item for single element
• Assuming LazyColumn can't show numbers
• Forgetting to convert Int to String for Text

5. You want to display a list of user names with a header "Users" above the list using LazyColumn. Which code correctly achieves this?

hard

A. LazyColumn {
items(userList + "Users") { Text(it) }
}

B. LazyColumn {
item { Text("Users") }
items(userList) { user -> Text(user) }
}

C. LazyColumn {
items(userList) { user -> Text(user) }
item { Text("Users") }
}

D. LazyColumn {
Text("Users")
items(userList) { user -> Text(user) }
}

Solution

1. Step 1: Add header as a single item

   Use item { Text("Users") } to add a single header before the list.

2. Step 2: Add list items after header

   Use items(userList) { user -> Text(user) } to display each user below the header.

3. Final Answer:

   LazyColumn { item { Text("Users") } items(userList) { user -> Text(user) } } -> Option B

4. Quick Check:

   Use item() for header, items() for list [OK]

Hint: Use item() for header, items() for list in LazyColumn [OK]

Common Mistakes:

• Placing header after list items
• Trying to combine header and list in one items call
• Placing Text outside LazyColumn scope