LazyColumn with items in Android Kotlin - UI Render Trace

Component - LazyColumn with items

This UI component shows a vertical list that only creates the visible items on screen. It helps apps run smoothly by loading items as you scroll.

Widget Tree

LazyColumn
└── items (list of Text)

The LazyColumn is the main vertical scrolling list. Inside it, each item is a Text composable showing a string from the list.

Render Trace - 2 Steps

Step 1: LazyColumn

Step 2: items

State Change - Re-render

Trigger:User scrolls the list

Before

Only first few items are composed and displayed

→

After

New items come into view and are composed; old items go out of view and are disposed

Re-renders:Only the visible items inside LazyColumn recompose

UI Quiz - 3 Questions

What does LazyColumn do when you scroll?

A It creates only the items visible on screen

B It creates all items at once

C It stops scrolling automatically

D It hides the list

Key Insight

Using LazyColumn helps apps handle long lists efficiently by only creating what the user sees, saving memory and improving performance.

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()