Saving instance state in Android Kotlin - Mini App: Build & Ship

Build: Counter Screen

A simple screen with a button that increases a counter. The counter value should be saved and restored when the screen is recreated, such as during device rotation.

Target UI

---------------------
|   Counter Screen   |
|-------------------|
|                   |
|   Count: 0        |
|                   |
|   [Increase +1]   |
|                   |
---------------------

Display a counter starting at 0

Add a button labeled 'Increase +1' that increments the counter

Save the counter value when the activity is destroyed

Restore the counter value when the activity is recreated

Starter Code

Android Kotlin

package com.example.savingstate

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

class MainActivity : AppCompatActivity() {
    private var count = 0

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

        val countTextView: TextView = findViewById(R.id.countTextView)
        val increaseButton: Button = findViewById(R.id.increaseButton)

        // TODO: Restore count from savedInstanceState if available

        countTextView.text = "Count: $count"

        increaseButton.setOnClickListener {
            count++
            countTextView.text = "Count: $count"
        }
    }

    // TODO: Override onSaveInstanceState to save the count
}

Task 1

Task 2

Solution

Android Kotlin

package com.example.savingstate

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

class MainActivity : AppCompatActivity() {
    private var count = 0

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

        val countTextView: TextView = findViewById(R.id.countTextView)
        val increaseButton: Button = findViewById(R.id.increaseButton)

        if (savedInstanceState != null) {
            count = savedInstanceState.getInt("COUNT_KEY", 0)
        }

        countTextView.text = "Count: $count"

        increaseButton.setOnClickListener {
            count++
            countTextView.text = "Count: $count"
        }
    }

    override fun onSaveInstanceState(outState: Bundle) {
        super.onSaveInstanceState(outState)
        outState.putInt("COUNT_KEY", count)
    }
}

We save the current count value in onSaveInstanceState by putting it into the Bundle with a key "COUNT_KEY". When the activity is recreated, onCreate receives the savedInstanceState bundle, from which we retrieve the saved count value. This way, the counter value is preserved across configuration changes like screen rotation.

This is a simple and common way to save small pieces of UI state in Android apps.

Final Result

Completed Screen

---------------------
|   Counter Screen   |
|-------------------|
|                   |
|   Count: 3        |
|                   |
|   [Increase +1]   |
|                   |
---------------------

User taps 'Increase +1' button, count increments by 1 and updates on screen

If user rotates device, the count value stays the same and is displayed correctly

Stretch Goal

Add a reset button to set the counter back to zero and update the display

💡 Hint

Add another Button in the layout and set its onClickListener to reset count to 0 and update the TextView