Android & Compose Setup

Code

MainActivity.kt — the first screen

Every Android app has an entry point — MainActivity. The template creates it; let's read what it does, because with Compose everything starts here.

class MainActivity : ComponentActivity() — the screen the system launches first.
setContent { ... } — "from here the UI is drawn by Compose, not the old XML".
PicaTheme { ... } — the Material 3 theme (colors, typography). The template generates it in core/theme/Theme.kt; it uses the phone's dynamic color on Android 12+.
Surface { Greeting("Pica") } — the first visible content.
@Composable fun Greeting(...) — a function that returns UI. @Preview lets you see it in Android Studio without running.

The key idea: UI in Compose is functions, not XML files. Greeting is the simplest example of that.

Verify. Run the app (Run ▶) on an emulator or phone. The screen should show:

Hello Pica!

A single screen with one line of text. That's all for now — but it's YOUR app, live on a device.

Tip. In the real Pica, this Greeting("Pica") becomes PicaNavHost() in lesson 4 — the whole navigation graph (menu → detail → cart → checkout). For now we keep one screen: first we need content (the menu), and we build that next lesson. The theme (PicaTheme) and the entry point (MainActivity) stay the same all course — only what they show changes.

MainActivity.kt CREATE

Create this file in app/src/main/java/eif/viko/lt/pica/

package eif.viko.lt.pica

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import eif.viko.lt.pica.core.theme.PicaTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            PicaTheme {
                Surface(modifier = Modifier.fillMaxSize()) {
                    // The app's first screen. In lesson 4 this single call
                    // becomes PicaNavHost() — the real navigation graph.
                    Greeting("Pica")
                }
            }
        }
    }
}

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

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    PicaTheme {
        Greeting("Pica")
    }
}