Scaffold and TopAppBar in Android Kotlin - Mini App: Build & Ship

Build: Main Screen

This screen shows a basic layout with a top app bar and a centered greeting message.

Target UI

┌─────────────────────────────┐
│        TopAppBar            │
│  Title: "Welcome Screen"    │
├─────────────────────────────┤
│                             │
│       Hello, User!           │
│                             │
└─────────────────────────────┘

Use Scaffold as the main layout container

Add a TopAppBar with the title 'Welcome Screen'

Center a Text widget in the body with the message 'Hello, User!'

Starter Code

Android Kotlin

import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: android.os.Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // TODO: Add your Scaffold with TopAppBar here
        }
    }
}

@Composable
fun MainScreen() {
    // TODO: Implement Scaffold with TopAppBar and centered Text
}

@Preview(showBackground = true)
@Composable
fun PreviewMainScreen() {
    MainScreen()
}

Task 1

Task 2

Task 3

Solution

Android Kotlin

import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: android.os.Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MainScreen()
        }
    }
}

@Composable
fun MainScreen() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = "Welcome Screen") }
            )
        },
        content = { paddingValues ->
            Box(
                modifier = Modifier
                    .fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "Hello, User!")
            }
        }
    )
}

@Preview(showBackground = true)
@Composable
fun PreviewMainScreen() {
    MainScreen()
}

This solution uses Scaffold as the main layout container, which provides slots for common UI elements like the TopAppBar. The TopAppBar displays the title "Welcome Screen" at the top. The body content uses a Box with fillMaxSize() to take all available space and centers the Text widget with the greeting message "Hello, User!". This layout is simple and follows Android Compose best practices for a basic screen structure.

Final Result

Completed Screen

┌─────────────────────────────┐
│        TopAppBar            │
│  Title: "Welcome Screen"    │
├─────────────────────────────┤
│                             │
│       Hello, User!           │
│                             │
└─────────────────────────────┘

The TopAppBar remains fixed at the top.

The greeting text is centered and static.

No additional interactions on this screen.

Stretch Goal

Add a FloatingActionButton with a '+' icon that shows a Snackbar with message 'FAB clicked!' when tapped.

💡 Hint

Use Scaffold's floatingActionButton parameter and remember to use SnackbarHostState with rememberSnackbarHostState() to show the Snackbar.