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