How do I build my first Android App with Kotlin and Jetpack Compose?

In this first article of the Android with Kotlin and Jetpack Compose series, you will create Task Notes, a small app for keeping track of daily tasks. Today you will run the starter project and build the screen users see when their task list is empty. You will reuse this project throughout the series, all the way to preparing a release for Google Play.

Kotlin is the language you will use to write the app. Jetpack Compose is the toolkit you will use to describe what appears on the screen. For example, a Compose Text() call adds text to your interface.

1. Install Android Studio

Download the stable version of Android Studio and complete its setup wizard. Let it download the Android SDK and the recommended components. The first setup and build need an internet connection.

You can run the app on an Android emulator or on an Android phone. The emulator is a virtual Android device that runs on your computer.

2. Create the Task Notes project

Select New Project from the welcome screen. If a project is already open, choose File > New > New Project.
Under the phone and tablet templates, choose Empty Activity and click Next.
Enter the following values and click Finish.

Setting	Value
Name	`Task Notes`
Package name	`org.kodejava.tasknotes`
Minimum SDK	API 24 (Android 7.0) for this tutorial
Build configuration language	Kotlin DSL, if the wizard offers a choice

Use a package name under your own namespace if you plan to publish your own version. Android Studio normally uses the package name you enter here as the initial application ID. The minimum SDK determines the oldest Android version on which the app can be installed.

Wait for Gradle sync to finish. Gradle reads the project’s build configuration and downloads the libraries it needs. When the editor opens, find MainActivity.kt in the app module. With the sample package name, its path is app/src/main/java/org/kodejava/tasknotes/MainActivity.kt.

Reference: Create a project with Compose.

3. Run the generated app

To use an emulator, open Tools > Device Manager, create a virtual phone, and select a system image with API 24 or higher. Download the image if prompted. Select the virtual device in the toolbar and click Run.

To use a phone, enable Developer options and USB debugging, connect it with a USB data cable, and accept the debugging prompt on the phone. Select the phone in Android Studio and click Run.

Android Studio builds and installs the app on the selected device. Once the template screen opens, you can move on to editing it.

References: Run apps on the Android Emulator and Run apps on a hardware device.

4. Build the empty task screen

Replace the contents of MainActivity.kt with the following code. If you chose a different package name, keep your original package line and use the theme import and function name from your generated activity.

package org.kodejava.tasknotes

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
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.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import org.kodejava.tasknotes.ui.theme.TaskNotesTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()

        setContent {
            TaskNotesTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    TaskNotesScreen(modifier = Modifier.padding(innerPadding))
                }
            }
        }
    }
}

@Composable
private fun TaskNotesScreen(modifier: Modifier = Modifier) {
    Column(
        modifier = modifier.fillMaxSize().padding(24.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        Text(
            text = "Task Notes",
            style = MaterialTheme.typography.headlineMedium
        )
        Text(
            text = "No tasks yet.",
            style = MaterialTheme.typography.bodyLarge
        )
    }
}

@Preview(showBackground = true)
@Composable
private fun TaskNotesScreenPreview() {
    TaskNotesTheme {
        TaskNotesScreen()
    }
}

When Android creates MainActivity, it calls onCreate(). Inside that method, setContent { ... } supplies the activity’s Compose UI, and TaskNotesTheme provides the app’s colors and text styles.

@Composable marks a function that can describe UI using other composable functions. Here, TaskNotesScreen() uses a Column to stack two Text() elements vertically. The 8.dp value adds space between them. Android uses density-independent pixels, or dp, to keep layout sizes consistent across screens with different pixel densities.

The app draws edge to edge. Passing innerPadding from Scaffold to the screen keeps the text clear of the system bars. The screen adds another 24.dp of padding for its own layout.

5. Check the result

Click Run again. You should see Task Notes near the top of the screen, with No tasks yet. on the line below. To inspect the layout in Android Studio, open the Split or Design view and build or refresh the preview if prompted. The @Preview function renders the screen in the editor.

If the theme import is unresolved, open the generated ui/theme/Theme.kt and check its package and theme function name. If Compose imports are unresolved, check that you selected Empty Activity and that Gradle sync completed successfully.

Practice

Change the message to Your task list is empty. and increase the space between the title and the message from 8.dp to 16.dp. Check the preview, then run the app to see the same changes on your device.

Gradle dependencies

The Empty Activity template sets up the Compose build configuration and dependencies for this example. Keep the generated entries in app/build.gradle.kts and, if the project uses one, gradle/libs.versions.toml. The code uses Activity Compose, Compose Material 3, and Compose UI Tooling Preview. This article requires no additional dependencies.

Next in the series

In the next article, How Do I Use Kotlin to Model Tasks in an Android App?, you will create a Kotlin Task data class with an ID, a title, and a completion flag. You will use that model to create the sample tasks for the list screen.

Learn Java by Examples