Hello Compose: your first screen

Declarative UI

In the old Android way, you designed screens in XML files and then changed them from code ("find this TextView, set its text"). Jetpack Compose is declarative: you write Kotlin functions that describe what the screen should look like for the current data, and Compose updates the screen when the data changes. Less code, fewer bugs where the screen and the data disagree.

What the template gives you

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            HelloIndiaTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(name = "Android", modifier = Modifier.padding(innerPadding))
                }
            }
        }
    }
}

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

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    HelloIndiaTheme { Greeting("Android") }
}

• enableEdgeToEdge() lets the app draw behind the status and navigation bars; Scaffold's innerPadding keeps your content clear of them. Apps targeting Android 15 (API 35) are edge-to-edge by default.
• setContent { } replaces the old setContentView: it shows Compose content.
• HelloIndiaTheme applies your colours and fonts (Material 3, module 9).
• @Composable marks a function that describes UI. Composables are named with a capital letter, like classes.
• Modifier customises size, padding, clicks and more (module 6). Passing modifier as a parameter is a convention that keeps composables flexible.

@Preview

A function marked @Preview (and @Composable) is drawn in the Split or Design view of the editor, without installing the app. You can have several previews for different states, sizes, fonts or dark mode. Previews make UI work much faster, but they cannot run real network or database code, so pass them sample data.

String resources

// res/values/strings.xml:  <string name="welcome">Welcome, %1$s!</string>

@Composable
fun Welcome(name: String) {
    Text(stringResource(R.string.welcome, name))
}

Logcat and crashes

Logcat is the window in Android Studio that shows log messages from the device. Write your own with Log.d(TAG, "message"). When the app crashes, Logcat shows a stack trace: the exception type, the message, and the chain of function calls. Read it from the top: find the first line that mentions your own package and file, and click it to jump to the code.

FATAL EXCEPTION: main
Process: com.example.helloindia, PID: 12345
java.lang.NumberFormatException: For input string: "12a"
    at java.lang.Integer.parseInt(Integer.java:...)
    at com.example.helloindia.MainActivityKt.parseQty(MainActivity.kt:42)
    ...

Common mistakes

• Calling a @Composable function from a normal function or a click handler: "@Composable invocations can only happen from the context of a @Composable function". Change state instead, and let the UI react.
• Naming composables in lowercase. The convention is PascalCase (Greeting, ProfileCard).
• Previews that call real repositories and fail to render. Pass sample data.
• Ignoring the stack trace and guessing. The answer is usually in the first lines that mention your code.