Jetpack Compose Setup: A Beginner’s Guide to Creating Your First Compose Project

Learn how to create your first Jetpack Compose project, understand the project structure, preview composables, and integrate Compose into an existing Android application.

Android development has changed significantly over the last few years, and Jetpack Compose is leading this transformation. Instead of creating layouts using XML and managing UI through Views, developers can now build beautiful, reactive interfaces entirely in Kotlin.

If you’re just getting started with Compose, one of the first questions you’ll have is:

How do I create a Compose project, and how is it different from a traditional Android project?

In this article, we’ll walk through everything you need to know to get started.

Creating Your First Jetpack Compose Project

Creating a Compose project is straightforward.

Open Android Studio and select:

New Project → Empty Compose Activity

This template comes preconfigured with everything needed to start building Compose applications.

Minimum SDK Requirement

One important thing to remember is the minimum Android version.

Jetpack Compose supports:

• Minimum SDK 21 (Android 5.0)

If your project targets anything below API 21, Compose won’t work.

Understanding the Project Structure

One of the first differences you’ll notice is the absence of the familiar layout folder.

Traditional Android projects contain:

res/
   layout/
      activity_main.xml

Compose projects don’t.

Instead, UI is written directly inside Kotlin files using Composable Functions.

You’ll also notice a ui.theme package containing files responsible for:

• Colors
• Typography
• Shapes
• Material Theme

These files define the application’s visual appearance and replace many XML styling concepts.

Required Compose Configuration

When Android Studio creates a Compose project, several Gradle configurations are added automatically.

These include:

• Compose dependencies
• Compose testing libraries
• Build features
• Compose compiler

The most important configuration is enabling Compose:

buildFeatures {
    compose = true
}

Without this setting, Compose code cannot be compiled.

Compose Compiler and Kotlin Version

One thing beginners often overlook is version compatibility.

The Compose Compiler is tightly coupled with the Kotlin version.

For example:

• Compose Compiler X requires Kotlin Version Y.

If these versions don’t match, Gradle will fail during compilation.

Whenever you upgrade Kotlin, always verify that your Compose Compiler version is compatible.

ComponentActivity Replaces AppCompatActivity

In XML-based Android applications, activities usually extend:

AppCompatActivity

In Compose, the recommended base class is:

ComponentActivity

Since Compose manages themes and UI differently, there’s no longer a dependency on many of the traditional AppCompat features.

Goodbye setContentView()

Traditional Android applications use:

setContentView(R.layout.activity_main)

Compose replaces this with:

setContent {
    Greeting()
}

Instead of inflating XML layouts, the setContent {} block becomes the entry point of your UI.

Everything displayed on screen starts from this block

Writing Your First Composable

A composable is simply a Kotlin function annotated with @Composable.

Example:

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

Every UI element in Compose is built by composing these functions together.

Think of composables as reusable building blocks that replace XML Views.

Live Preview Without Running the App

One of Compose’s best productivity features is Preview.

Instead of launching an emulator every time, Android Studio can render your UI directly inside the IDE.

Create a preview like this:

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

The preview window instantly displays your composable.

This dramatically speeds up UI development and iteration.

Useful Preview Features

The @Preview annotation provides several customization options.

Some of the most commonly used are:

@Preview(
    name = "Dark Theme",
    showBackground = true,
    widthDp = 360,
    heightDp = 640
)

You can create multiple previews for different devices, themes, and screen sizes, making UI testing much easier.

Integrating Compose into an Existing Android App

The good news is that migrating to Compose doesn’t require rewriting your application from scratch.

You can gradually adopt Compose by embedding it inside existing XML layouts using ComposeView.

The process is simple:

1. Add Compose dependencies.
2. Enable Compose in Gradle.
3. Add a ComposeView to your XML.
4. Call setContent {} on the ComposeView.
5. Render your composable.

This incremental migration strategy allows teams to modernize applications without disrupting existing features.

Common Issue: Compiler Version Mismatch

A common error during Compose integration looks like:

Compose Compiler requires Kotlin version X, but project uses version Y.

If you encounter this:

• Check your Kotlin version.
• Check the Compose Compiler version.
• Ensure both are compatible according to the official compatibility matrix.

Most integration issues stem from this mismatch rather than coding mistakes.

Best Practices for New Compose Projects

Here are a few recommendations to keep your Compose projects clean and maintainable:

• Keep composables small and reusable.
• Separate UI from business logic.
• Use Material 3 components whenever possible.
• Leverage Preview extensively during development.
• Keep Compose Compiler and Kotlin versions aligned.
• Adopt Compose gradually if you’re migrating an existing application.

Key Takeaways

If you’re transitioning from XML-based Android development, remember these important changes:

Conclusion

Jetpack Compose significantly simplifies Android UI development by eliminating XML, reducing boilerplate code, and enabling a fully declarative approach. Setting up a new Compose project is easier than ever, and thanks to features like @Preview and setContent, developers can build and iterate on interfaces much faster.

The best part is that you don’t need to migrate everything at once. Compose integrates seamlessly with existing Android projects, allowing you to modernize your codebase incrementally while continuing to deliver features.

If you’re beginning your Compose journey, mastering project setup, previews, and Gradle configuration is the perfect foundation before diving into layouts, state management, navigation, and animations.

👏 Thanks for Reading!

If you found this article helpful, consider following me on Medium for more content on:

• 🚀 Android Development
• 📱 Jetpack Compose
• ⚡ Kotlin
• 🏗️ Clean Architecture
• 🎨 Material 3
• 📚 Mobile Development Best Practices

Happy Coding! 💚