LazyColumn with items 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 names.

Android Kotlin

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

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

AmutableListOf()

BarrayListOf()

ClistOf()

Dnames

Attempts:

3 left

💡 Hint

Common Mistakes

Using an empty list like listOf() instead of the actual list variable.

Forgetting to pass any list to items().

The items function takes a list to display each element. Here, names is the list variable.

2fill in blank

medium

Complete the code to add a padding modifier of 16.dp to each Text item inside LazyColumn.

Android Kotlin

LazyColumn {
    items(names) { name ->
        Text(text = name, modifier = Modifier.[1](16.dp))
    }
}

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

Asize

Bmargin

Cpadding

DfillMaxWidth

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin which does not exist in Compose.

Using size which changes the size instead of padding.

The padding modifier adds space inside the composable's bounds. Here, 16.dp padding is added around the Text.

3fill in blank

hard

Fix the error in the LazyColumn code by completing the missing parameter to uniquely identify each item.

Android Kotlin

LazyColumn {
    items(items = names, key = [1]) { name ->
        Text(text = name)
    }
}

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

Anames

B{ it }

Cname

D{ index -> index }

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the whole list names as key.

Passing the variable name which is undefined in this scope.

The key parameter expects a lambda that returns a unique key for each item. { it } returns the item itself as the key.

4fill in blank

hard

Fill both blanks to create a LazyColumn that displays a list of numbers doubled.

Android Kotlin

val numbers = listOf(1, 2, 3, 4)
LazyColumn {
    items([1]) { number ->
        Text(text = (number [2] 2).toString())
    }
}

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

Anumbers

B*

C+

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using addition instead of multiplication.

Passing a wrong list to items.

The items function takes the numbers list. The expression number * 2 doubles each number.

5fill in blank

hard

Fill both blanks to create a LazyColumn that filters names longer than 3 characters and displays them in uppercase.

Android Kotlin

val names = listOf("Amy", "John", "Kate", "Bob")
LazyColumn {
    items(names.filter { it.length [1] 3 }) { name ->
        Text(text = name.[2]())
    }
}

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

A>

Buppercase

Clowercase

DtoUpperCase

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase() or toUpperCase() instead of uppercase().

Using < instead of > in the filter.

The filter uses it.length > 3 to select names longer than 3 characters. The uppercase() function converts the name to uppercase.

Practice

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

easy

A. To display a vertically scrolling list efficiently by loading only visible items

B. To create a horizontal scrolling list

C. To display a static grid layout

D. To handle user input events

Solution

1. Step 1: Understand LazyColumn's role

   LazyColumn is designed to show vertical lists efficiently by loading only the items visible on screen.

2. Step 2: Compare options

   Options A, B, and C are incorrect: A handles input events, B creates horizontal lists, C is for grids.

3. Final Answer:

   To display a vertically scrolling list efficiently by loading only visible items -> Option A

4. Quick Check:

   LazyColumn = Efficient vertical list [OK]

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

Common Mistakes:

• Confusing LazyColumn with LazyRow (horizontal list)
• Thinking LazyColumn creates grids
• Assuming it handles input events

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

easy

A. LazyColumn { item(names) { name -> Text(name) } }

B. LazyColumn { items(names) { name -> Text(name) } }

C. LazyColumn { itemsOf(names) { name -> Text(name) } }

D. LazyColumn { itemsList(names) { name -> Text(name) } }

Solution

1. Step 1: Recall correct function name

   The function to display each element in a list inside LazyColumn is items, not item, itemsOf, or itemsList.

2. Step 2: Check lambda syntax

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

3. Final Answer:

   LazyColumn { items(names) { name -> Text(name) } } -> Option B

4. Quick Check:

   Use items() with list and lambda [OK]

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

Common Mistakes:

• Using item() instead of items() for lists
• Wrong function names like itemsOf or itemsList
• Incorrect lambda parameter usage

3. What will be displayed by this code snippet?

val fruits = listOf("Apple", "Banana", "Cherry")
LazyColumn {
  items(fruits) { fruit ->
    Text(text = fruit)
  }
}

medium

A. No output because of syntax error

B. A horizontal list showing Apple, Banana, Cherry

C. Only the first fruit 'Apple' is shown

D. A vertical list showing Apple, Banana, Cherry each on its own line

Solution

1. Step 1: Understand items usage

   The items function iterates over the fruits list and displays each element inside the LazyColumn.

2. Step 2: Check UI behavior

   LazyColumn shows a vertical scrolling list, so each fruit appears on its own line vertically.

3. Final Answer:

   A vertical list showing Apple, Banana, Cherry each on its own line -> Option D

4. Quick Check:

   items() + LazyColumn = vertical list [OK]

Hint: LazyColumn with items shows vertical list of all elements [OK]

Common Mistakes:

• Thinking LazyColumn creates horizontal lists
• Assuming only first item shows
• Confusing syntax causing no output

4. Identify the error in this LazyColumn code:

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

medium

A. Text() expects a String, but number is Int causing a type mismatch

B. items() cannot accept a list of integers

C. LazyColumn must use item() not items() for lists

D. No error, code works fine

Solution

1. Step 1: Check Text() parameter type

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

2. Step 2: Confirm correct usage of items()

   The items function accepts lists of any type, so no error there.

3. Final Answer:

   Text() expects a String, but number is Int causing a type mismatch -> Option A

4. Quick Check:

   Text() needs String, not Int [OK]

Hint: Convert Int to String inside Text() to fix [OK]

Common Mistakes:

• Assuming items() rejects Int lists
• Using item() instead of items() for lists
• Ignoring type mismatch in Text()

5. You want to display a list of user names with their index number in a LazyColumn. Which code correctly shows the index and name together?

hard

A. LazyColumn { items(users) { index, user -> Text("$index: $user") } }

B. LazyColumn { items(users) { user -> Text("$index: $user") } }

C. LazyColumn { itemsIndexed(users) { index, user -> Text("$index: $user") } }

D. LazyColumn { itemsIndexed(users) { user -> Text(user) } }

Solution

1. Step 1: Identify function for index and item

   To get both index and item, use itemsIndexed which provides both parameters in the lambda.

2. Step 2: Check lambda parameters and usage

   LazyColumn { itemsIndexed(users) { index, user -> Text("$index: $user") } } correctly uses index, user and displays them with string interpolation.

3. Final Answer:

   LazyColumn { itemsIndexed(users) { index, user -> Text("$index: $user") } } -> Option C

4. Quick Check:

   Use itemsIndexed() for index + item [OK]

Hint: Use itemsIndexed() to get index and item in LazyColumn [OK]

Common Mistakes:

• Using items() when index is needed
• Wrong lambda parameters count
• Trying to access index without itemsIndexed()