Text composable in Android Kotlin - Mini App: Build & Ship

Build: Simple Text Screen

This screen shows a simple text message centered on the screen using Jetpack Compose Text composable.

Target UI

---------------------
|                   |
|                   |
|   Hello, Compose!  |
|                   |
|                   |
---------------------

Use Text composable to display the message 'Hello, Compose!'

Center the text horizontally and vertically on the screen

Use a font size of 24sp

Use a padding of 16dp around the text

Starter Code

Android Kotlin

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun SimpleTextScreen() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        // TODO: Add Text composable here
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

Android Kotlin

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun SimpleTextScreen() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "Hello, Compose!",
            fontSize = 24.sp,
            modifier = Modifier.padding(16.dp)
        )
    }
}

We use a Box to fill the whole screen and center its content both horizontally and vertically using contentAlignment = Alignment.Center. Inside the Box, we add a Text composable with the string "Hello, Compose!". We set the font size to 24sp for clear visibility and add 16dp padding around the text to keep some space from edges. This creates a simple centered text screen using Jetpack Compose.

Final Result

Completed Screen

---------------------
|                   |
|                   |
|   Hello, Compose!  |
|                   |
|                   |
---------------------

The text 'Hello, Compose!' is displayed centered on the screen.

No interactive elements on this screen.

Stretch Goal

Change the text color to blue and make it bold.

💡 Hint

Use the color parameter with Color.Blue and style parameter with FontWeight.Bold in the Text composable.