Extension functions in Android Kotlin - Mini App: Build & Ship

Build: Extension Functions Demo

This screen demonstrates how to use Kotlin extension functions to add new behavior to existing classes without modifying them.

Target UI

-------------------------
| Extension Functions Demo |
|-----------------------|
| Enter text:           |
| [______________]      |
|                       |
| [Show Length]         |
|                       |
| Length:               |
|                       |
-------------------------

Add an EditText for user input

Add a Button labeled 'Show Length'

Add a TextView to display the length of the input text

Create a Kotlin extension function on String to return its length as a formatted string

When the button is clicked, use the extension function to show the length in the TextView

Starter Code

Android Kotlin

package com.example.extensiondemo

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

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

        val inputEditText = findViewById<EditText>(R.id.inputEditText)
        val showLengthButton = findViewById<Button>(R.id.showLengthButton)
        val lengthTextView = findViewById<TextView>(R.id.lengthTextView)

        // TODO: Implement button click to show length using extension function
    }
}

// TODO: Create extension function on String here

Task 1

Task 2

Solution

Android Kotlin

package com.example.extensiondemo

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

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

        val inputEditText = findViewById<EditText>(R.id.inputEditText)
        val showLengthButton = findViewById<Button>(R.id.showLengthButton)
        val lengthTextView = findViewById<TextView>(R.id.lengthTextView)

        showLengthButton.setOnClickListener {
            val inputText = inputEditText.text.toString()
            lengthTextView.text = inputText.formattedLength()
        }
    }
}

fun String.formattedLength(): String {
    return "Length: ${this.length}"
}

We created an extension function formattedLength on the String class. This function returns a string showing the length of the string in a friendly format.

In the MainActivity, when the user taps the 'Show Length' button, we get the text from the EditText, call the extension function on it, and display the result in the TextView. This shows how extension functions let us add new behavior to existing classes without changing their code.

Final Result

Completed Screen

-------------------------
| Extension Functions Demo |
|-----------------------|
| Enter text:           |
| [Hello Kotlin!]       |
|                       |
| [Show Length]         |
|                       |
| Length: 13            |
|                       |
-------------------------

User types text in the input field

User taps 'Show Length' button

TextView updates to show 'Length: X' where X is the number of characters typed

Stretch Goal

Add a clear button that resets the input field and length display

💡 Hint

Add another Button labeled 'Clear' and set its OnClickListener to clear the EditText and TextView text