Foundations of Jetpack Compose and Kotlin

Your First Modern Android App: An Intro to Kotlin & Jetpack Compose

Welcome to the world of modern Android development! If you're completely new to Android, Kotlin, or Jetpack Compose, you're in the right place. This guide will walk you through the absolute basics, explaining what these technologies are, why they matter, and how you can use them to build beautiful, functional Android apps in 2025 and beyond.

What is Kotlin?

Kotlin is a modern, statically-typed programming language developed by JetBrains. In 2019, Google announced that it was making Kotlin its preferred language for Android development. It was designed to be better than Java, but fully compatible with it.

  • Concise: It drastically reduces the amount of boilerplate code you have to write compared to Java.
  • Safe: Its built-in null safety system helps prevent the infamous NullPointerException, a common cause of app crashes.
  • Interoperable: You can have Kotlin and Java code in the same project, and they work together seamlessly.
  • Modern: It offers powerful features like coroutines, extension functions, and a clean, expressive syntax.
// Defining a function in Kotlin is clean and simple.
fun greet(name: String) {
    println("Hello, $name!")
}

What is Jetpack Compose?

Jetpack Compose is Android’s modern toolkit for building native User Interfaces (UI). It allows you to build your entire UI directly in Kotlin, completely replacing the old XML-based system. This approach is known as declarative UI.

  • Declarative: You describe what the UI should look like for a given state, not how to change it step-by-step.
  • Unified: Your UI layout, logic, and state management can all live together in Kotlin code.
  • Powerful: It comes with built-in support for animations, theming (Material Design), and interactive previews.
// The @Composable annotation tells the compiler this is a UI function.
@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

Getting Started: Your First Project

Step 1: Create a New Project

Everything starts in Android Studio. Open it and follow these steps:

  • Click New Project → Select the Empty Activity template (with the little Compose icon).
  • Language: Kotlin
  • Minimum SDK: API 24 (Android 7.0). This is a great choice as it covers the vast majority of active devices today.

Step 2: Understand the Project Structure

Open the MainActivity.kt file. An Activity is a core Android component that represents a single screen in your app. Your MainActivity is the main screen that launches when the user opens the app.

Inside, you'll see the setContent block. This is the entry point for your Jetpack Compose UI, replacing the old "setContentView(R.layout.activity_main)" system.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // This block is where your Compose UI lives.
        setContent {
            // We are calling our Greeting composable function here.
            Greeting("World")
        }
    }
}

The Core Building Blocks: Composables, "Surface", and "MaterialTheme"

Building a Composable

A function marked with @Composable is a UI building block. You can combine them to create complex layouts. Let's enhance our Greeting by applying a style from our theme.

@Composable
fun Greeting(name: String) {
    Text(
        text = "Hello, $name!",
        style = MaterialTheme.typography.headlineSmall // Apply a pre-defined text style
    )
}

What is "MaterialTheme"?

MaterialTheme is a wrapper that provides styling principles from Google's Material Design system. It gives your app a consistent look and feel by providing default colors, typography, and shapes.

What is "Surface"?

Surface is a container composable that's great for controlling the background color, elevation (shadow), and shape of its children. It's common to wrap your entire screen's content in a Surface to apply the theme's background color.

@Composable
fun MyApp() {
    // Surface provides a background from the MaterialTheme
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {
        Greeting("Android")
    }
}

Previewing Your UI

One of the best features of Compose is the ability to preview your UI components without running the app on an emulator or device. You do this with the @Preview annotation.

@Preview(showBackground = true) // showBackground helps visualize component boundaries
@Composable
fun GreetingPreview() {
    // It's a good practice to wrap your preview in your app's theme
    YourAppNameTheme { // Replace with your actual theme name
        Greeting("Preview User")
    }
}

Key Concepts Recap

  • Kotlin: The modern, preferred language for Android development.
  • Jetpack Compose: The modern, declarative UI toolkit for building native Android UIs with Kotlin.
  • @Composable: An annotation that marks a function as a UI component.
  • setContent: The function that hosts your Compose UI within an Activity.
  • @Preview: An annotation that lets you see your composables in Android Studio without running the app.
  • MaterialTheme: Provides a consistent styling system (colors, text) for your app.
Creating Horizontal Layouts with Row in Jetpack Compose
Building Vertical Layouts with Column in Jetpack Compose
Layering Composables with the Box Layout in Jetpack Compose
Core Interactive Components in Jetpack Compose: Buttons, Images, and More
Introduction to State and Recomposition in Jetpack Compose
Structuring App Screens with Scaffold in Jetpack Compose
Building Efficient Lists with LazyColumn in Jetpack Compose
Visual Grouping with Card and Surface in Jetpack Compose