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

Build: Greeting Screen

This screen shows a greeting message using a composable function. It displays a simple text greeting centered on the screen.

Target UI

---------------------
|                   |
|                   |
|    Hello, User!    |
|                   |
|                   |
---------------------

Create a composable function named Greeting that takes a name as a parameter and displays 'Hello, <name>!'

Use the Greeting composable inside the main screen composable to show the greeting message.

Center the text both vertically and horizontally on the screen.

Starter Code

Android Kotlin

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun Greeting(name: String) {
    // TODO: Display greeting text here
}

@Composable
fun GreetingScreen() {
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {
        // TODO: Call Greeting composable here
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingScreenPreview() {
    GreetingScreen()
}

Task 1

Task 2

Task 3

Solution

Android Kotlin

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

@Composable
fun GreetingScreen() {
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Greeting(name = "User")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingScreenPreview() {
    GreetingScreen()
}

We created a composable function Greeting that takes a name parameter and displays a greeting message using Text. In GreetingScreen, we used a Box with contentAlignment = Alignment.Center to center the greeting text both vertically and horizontally. We passed the string "User" to the Greeting composable to show the message "Hello, User!" on the screen.

Final Result

Completed Screen

---------------------
|                   |
|                   |
|    Hello, User!    |
|                   |
|                   |
---------------------

The screen shows the greeting text 'Hello, User!' centered.

No buttons or inputs; static display.

Stretch Goal

Modify the Greeting composable to accept a second parameter for a greeting prefix (e.g., 'Hi', 'Welcome') and display it before the name.

💡 Hint

Add a new parameter with a default value to the Greeting function and update the text to use it.