Loading your workspace…

Beginner 30 min Kotlin Full project

Jetpack Compose for Beginners: Your First Compose App

Start Jetpack Compose from zero: create a Compose project, write your first composable, and build a small app screen by screen. The first lesson in a beginner-friendly Compose series.

Download project ZIP View on GitHub Watch on YouTube

1.8Kviews38likes

What you'll learn

Create a Jetpack Compose project
Write and preview composable functions
Lay out screens with Column and Row
Handle input and move between screens

Before you start

Android Studio (any recent version)
Basic Kotlin: functions and variables
An emulator or an Android phone

How it fits together

1setContent { }
2NavHost
3HomeScreen: Column, Row, state
4navigate("greeting/name")
5GreetingScreen

Build it step by step

1. Create the project

In Android Studio choose New Project → Empty Activity (the one with the Compose logo). Set Minimum SDK to API 24. The project comes with Compose, Material 3 and a theme ready to use.

2. Add Navigation Compose

In app/build.gradle.kts, inside dependencies { }, add:

kotlin

implementation("androidx.navigation:navigation-compose:2.10.2")
implementation("androidx.compose.material:material-icons-extended")

The icons line needs no version: the Compose BoM already in your project picks it. Press Sync Now.

3. What is a composable?

A composable is a Kotlin function marked @Composable that describes part of the screen. Text("Hello") shows text, Button shows a button. You build screens by putting composables inside each other, and setContent { } in MainActivity shows the first one.

4. See it without running

Add a function marked @Preview that calls your composable. Open the Split or Design view and Android Studio draws it straight away.

5. Stack things with Column

A Column places its children top to bottom. verticalArrangement = Arrangement.spacedBy(20.dp) puts even gaps between them, and a Modifier adds padding, size and scrolling.

6. Side by side with Row

ProfileCard uses a Row: a round Box with an initial, then a Column with the name and role. verticalAlignment lines them up in the middle.

7. Remember state

var taps by rememberSaveable { mutableIntStateOf(0) } creates a value Compose watches. When Tap me changes it, Compose redraws only the text that shows it. rememberSaveable also keeps it when the phone rotates.

8. Read input

An OutlinedTextField shows name and calls onValueChange on every key press, which updates name. Say hello is enabled only when the box isn't empty.

9. Move to another screen

In MainActivity, a NavHost lists the screens by route: "home" and "greeting/{name}". Say hello calls navController.navigate("greeting/Asha"); the greeting screen reads the name from the route, and Back calls popBackStack().

10. Run it

Tap the counter, rotate the phone (the count stays), type your name and tap Say hello.

What's improved over the video

Built with the latest Compose BOM and Navigation, state that survives rotation, previews for every screen, light and dark colours, and edge-to-edge layouts that stay clear of the system bars.

Files affected

Check what to add and what to replace before copying code.

app/build.gradle.ktsAdd these lines
app/src/main/java/com/example/composebasics/MainActivity.ktReplace file
app/src/main/java/com/example/composebasics/GreetingScreen.ktAdd these lines
app/src/main/java/com/example/composebasics/HomeScreen.ktAdd these lines
app/src/main/java/com/example/composebasics/Theme.ktAdd these lines

Required setup

These are additions to an existing project—not replacement project files.

Add Navigation Compose and icons

Add these lines

Where: app/build.gradle.kts

The new Empty Activity project already includes Compose and its BoM. Add these two lines, then press Sync Now.

app/build.gradle.kts

// app/build.gradle.kts, inside dependencies { ... }
implementation("androidx.navigation:navigation-compose:2.10.2")
implementation("androidx.compose.material:material-icons-extended")

Application code

Select a file to see its code and where it belongs.

This code uses package com.example.composebasics. Change that first line to your own package, the one at the top of your MainActivity.

Replace fileapp/src/main/java/com/example/composebasics/MainActivity.kt

Sets the content and the NavHost with two screens.

MainActivity.kt

package com.example.composebasics

import android.net.Uri
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.runtime.Composable
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

/** The only activity. Compose draws everything inside setContent. */
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposeBasicsTheme {
                App()
            }
        }
    }
}

/** Two screens. The NavHost shows one at a time; "greeting/{name}" carries the name across. */
@Composable
fun App() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home") {
        composable("home") {
            HomeScreen(onSayHello = { name -> navController.navigate("greeting/" + Uri.encode(name)) })
        }
        composable("greeting/{name}") { entry ->
            GreetingScreen(
                name = entry.arguments?.getString("name").orEmpty(),
                onBack = { navController.popBackStack() },
            )
        }
    }
}

Full source code

Download project ZIP View on GitHub