Build Your First Android App with Kotlin and Compose

Build Your First Android App with Kotlin and Compose

Your first Android app should be small enough to finish in one sitting and complete enough to teach the core idea. We will build a counter app: a number on screen and a button that increases it. Along the way you will learn what a composable is, how state works in Jetpack Compose, and how to run the app. The full working code is below.

Before You Begin

Make sure Android Studio is installed and you can run a project on an emulator or a real device. If not, follow Setting Up Android Studio first. We are using Kotlin and Jetpack Compose, the modern way to build Android UI by describing what the screen should look like in code.

Step 1: Create the Project

Open Android Studio, choose New Project, select Empty Activity, set the language to Kotlin, and finish. Android Studio generates a MainActivity.kt file and syncs the project with Gradle. Wait for the sync to complete.

Step 2: Understand the Building Blocks

In Compose, the UI is made of composable functions, ordinary Kotlin functions marked with @Composable that describe a piece of screen. When data changes, Compose re-runs the affected functions and updates the display. That changing data is called state.

To hold state that survives re-runs, you use remember together with mutableStateOf. When the value changes, Compose automatically redraws the parts that use it.

Step 3: Write the Counter

Replace the body of MainActivity.kt with this:

package com.example.counterapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CounterScreen() // host our composable
        }
    }
}

@Composable
fun CounterScreen() {
    // 'count' is state. remember keeps it across recompositions.
    // When count changes, Compose redraws what depends on it.
    var count by remember { mutableStateOf(0) }

    // Column stacks children vertically and centres them
    Column(
        modifier = Modifier.fillMaxSize().padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "Count: $count") // shows the current value

        Button(onClick = { count++ }) { // increase count on tap
            Text(text = "Add one")
        }
    }
}

Step 4: Run It

Press the green Run arrow. The app launches with "Count: 0" and a button. Tap the button and the number increases. You just built a stateful Android UI.

What Just Happened

• setContent told the activity to display Compose UI.
• CounterScreen is a composable describing the layout.
• remember { mutableStateOf(0) } created state that persists while the screen is shown.
• Tapping the button ran count++, which changed the state, which made Compose redraw the Text with the new number.

This pattern, state plus composables that react to it, is the heart of modern Android UI.

Common Mistakes

• Forgetting remember. If you write var count = mutableStateOf(0) without remember, the value resets to 0 every time the screen redraws and the counter never moves.
• Putting heavy work inside a composable body. Composables can run many times. Do not perform network calls or long loops directly in them.
• Not importing getValue and setValue. The by delegate for state needs these imports, or the code will not compile.
• Editing the wrong file. Make sure you are editing MainActivity.kt, not the auto-generated preview or theme files.
• Ignoring Gradle sync. If the project has not finished syncing, your new imports will appear unresolved.

FAQ

Do I need XML layouts? No. Jetpack Compose builds the UI in Kotlin. XML layouts are the older approach; you can learn them later for legacy projects.

Why does my app redraw the whole screen? Compose is smart about redrawing only what depends on changed state. Small apps redraw quickly; you will rarely notice.

Can I run this on my phone? Yes. Enable USB debugging, connect the phone, and select it as the run target.

Keep Going

Next, learn how to arrange more complex screens in Layouts and UI in Android, and how to move between screens in Activities and Navigation. See the full path at the Android learning hub.

---

Want feedback on your first apps from an instructor? Join the waitlist for the Android Development course at Infoplanet in Jalgaon.