LiveData basics in Android Kotlin - Mini App: Build & Ship

Build: LiveData Demo Screen

This screen shows a number that updates every time you press a button. The number is stored in LiveData and observed by the UI to update automatically.

Target UI

---------------------
| LiveData Demo     |
|-------------------|
| Number: 0         |
|                   |
| [Increment]       |
---------------------

Use MutableLiveData to hold an integer number starting at 0

Observe the LiveData in the Activity to update the displayed number

Add a button labeled 'Increment' that increases the number by 1 when clicked

Starter Code

Android Kotlin

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.Observer
import android.widget.Button
import android.widget.TextView

class LiveDataDemoActivity : AppCompatActivity() {
    private val numberLiveData = MutableLiveData<Int>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_live_data_demo)

        val numberTextView = findViewById<TextView>(R.id.numberTextView)
        val incrementButton = findViewById<Button>(R.id.incrementButton)

        // TODO: Initialize LiveData with 0

        // TODO: Observe LiveData and update numberTextView

        // TODO: Set click listener on incrementButton to update LiveData
    }
}

Task 1

Task 2

Task 3

Solution

Android Kotlin

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.Observer
import android.widget.Button
import android.widget.TextView

class LiveDataDemoActivity : AppCompatActivity() {
    private val numberLiveData = MutableLiveData<Int>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_live_data_demo)

        val numberTextView = findViewById<TextView>(R.id.numberTextView)
        val incrementButton = findViewById<Button>(R.id.incrementButton)

        numberLiveData.value = 0

        numberLiveData.observe(this) { number ->
            numberTextView.text = "Number: $number"
        }

        incrementButton.setOnClickListener {
            val current = numberLiveData.value ?: 0
            numberLiveData.value = current + 1
        }
    }
}

We start by setting the initial value of numberLiveData to 0. Then, we observe this LiveData from the Activity, so whenever the number changes, the numberTextView updates automatically. The button click listener increases the current number by 1 and updates the LiveData, triggering the UI update. This shows how LiveData keeps UI and data in sync easily.

Final Result

Completed Screen

---------------------
| LiveData Demo     |
|-------------------|
| Number: 0         |
|                   |
| [Increment]       |
---------------------

When user taps 'Increment', the number increases by 1

The displayed number updates immediately without manual UI refresh

Stretch Goal

Add a 'Reset' button that sets the number back to 0

💡 Hint

Create another Button in the layout and set its click listener to set numberLiveData.value = 0

Practice

1. What is the main purpose of LiveData in Android development?

easy

A. To manage database queries directly

B. To perform background tasks without blocking the UI

C. To store user preferences permanently

D. To hold data that UI components can observe and update automatically

Solution

1. Step 1: Understand LiveData's role

   LiveData is designed to hold data that UI components can observe, so they update automatically when data changes.

2. Step 2: Compare with other options

   Background tasks, storing preferences, and database management are handled by other components, not LiveData.

3. Final Answer:

   To hold data that UI components can observe and update automatically -> Option D

4. Quick Check:

   LiveData = Observable data holder [OK]

Hint: LiveData = data holder that UI watches [OK]

Common Mistakes:

• Confusing LiveData with background task handlers
• Thinking LiveData stores data permanently
• Mixing LiveData with database management

2. Which of the following is the correct way to declare a mutable LiveData variable in Kotlin?

easy

A. val data = MutableLiveData<String>()

B. val data = LiveData<String>()

C. var data = LiveData<String>()

D. var data = MutableLiveData

Solution

1. Step 1: Identify MutableLiveData syntax

   MutableLiveData requires specifying the type with angle brackets and calling its constructor with parentheses.

2. Step 2: Check each option

   val data = MutableLiveData<String>() correctly uses val data = MutableLiveData<String>(). val data = LiveData<String>() uses LiveData which is immutable. var data = LiveData<String>() uses LiveData with var but still immutable. var data = MutableLiveData misses type and parentheses.

3. Final Answer:

   val data = MutableLiveData<String>() -> Option A

4. Quick Check:

   MutableLiveData syntax = val data = MutableLiveData<String>() [OK]

Hint: MutableLiveData needs type and parentheses [OK]

Common Mistakes:

• Using LiveData instead of MutableLiveData to change data
• Omitting parentheses when creating MutableLiveData
• Not specifying the generic type

3. Given the code below, what will be printed when liveData.value = "Hello" is called?

val liveData = MutableLiveData<String>()
liveData.observe(this) { value ->
    println(value)
}

medium

A. Nothing is printed

B. Compilation error

C. Hello

D. null

Solution

1. Step 1: Understand observe behavior

   The observer is set to print the new value whenever liveData changes.

2. Step 2: Assigning value triggers observer

   Setting liveData.value = "Hello" triggers the observer lambda, printing "Hello".

3. Final Answer:

   Hello -> Option C

4. Quick Check:

   Observer prints new value = Hello [OK]

Hint: Setting value triggers observer print [OK]

Common Mistakes:

• Thinking observer triggers only on lifecycle start
• Expecting null because initial value is empty
• Confusing observe with observeForever

4. What is wrong with this code snippet?

val liveData = MutableLiveData<Int?>()
liveData.observe(this) { value ->
    println(value)
}
liveData.value = 10
liveData.value = null

medium

A. LiveData cannot hold null values

B. Nothing is wrong; null is allowed in MutableLiveData

C. Setting liveData.value to null causes a crash

D. Observe must be called after setting value

Solution

1. Step 1: Check if MutableLiveData accepts null

   MutableLiveData can hold null values if the generic type allows it (Int? or nullable type).

2. Step 2: Analyze code behavior

   The code declares MutableLiveData<Int?>(), which allows null since Int? is nullable. Setting to 10 and then null works fine without crash; observer prints both.

3. Final Answer:

   Nothing is wrong; null is allowed in MutableLiveData -> Option B

4. Quick Check:

   MutableLiveData accepts null if type nullable [OK]

Hint: MutableLiveData can hold null if type nullable [OK]

Common Mistakes:

• Assuming LiveData never accepts null
• Thinking observe order matters for value setting
• Confusing runtime crash with compile error

5. You want to update UI only when LiveData has a non-null and non-empty string. Which code snippet correctly observes liveData to achieve this?

val liveData = MutableLiveData<String>()
liveData.observe(this) { value ->
    // What to put here?
}

hard

A. if (value != null && value.isNotEmpty()) { updateUI(value) }

B. if (value == null || value.isEmpty()) { updateUI(value) }

C. updateUI(value ?: "")

D. updateUI(value!!)

Solution

1. Step 1: Define condition for UI update

   We want to update UI only if value is not null and not empty.

2. Step 2: Check each option logic

   if (value != null && value.isNotEmpty()) { updateUI(value) } checks both conditions correctly. if (value == null || value.isEmpty()) { updateUI(value) } updates UI on null or empty, opposite of requirement. updateUI(value ?: "") updates UI always with fallback empty string. updateUI(value!!) forces non-null with !! which can crash.

3. Final Answer:

   if (value != null && value.isNotEmpty()) { updateUI(value) } -> Option A

4. Quick Check:

   Check non-null and non-empty before update [OK]

Hint: Check both null and empty before UI update [OK]

Common Mistakes:

• Updating UI on null or empty values
• Using !! operator risking crash
• Ignoring empty string check