Setting Up Project for Jetpack Compose

Jetpack Compose is Android’s modern toolkit for building native UI using a declarative approach. Unlike the traditional XML-based UI, Compose allows you to define your entire interface in Kotlin code, making it concise, reactive, and easier to manage as your app scales.

1. What You’ll Need

• Minimum SDK version: 21 (Android 5.0)
• Compose Compiler compatible with your Kotlin version

2. Creating a New Compose Project

The easiest way to start is by using the built-in template in Android Studio:

1. Open Android Studio → New Project → Empty Compose Activity.
2. Give your project a name, choose Kotlin, and finish setup.
3. Android Studio automatically adds all necessary dependencies.

// MainActivity.kt
package com.example.mycomposeapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Text
import androidx.compose.material3.MaterialTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Text(text = "Hello Compose!")
            }
        }
    }
}
  

3. Manual Setup (For Existing Projects)

If you want to add Compose to an existing Android project, follow these steps:

a) Enable Compose in Gradle

// build.gradle (Module-level)
android {
    namespace "com.example.mycomposeapp"
    compileSdk 34

    defaultConfig {
        minSdk 21
        targetSdk 34
    }

    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.3"
    }
}
  

b) Add Compose Dependencies

dependencies {
    implementation platform('androidx.compose:compose-bom:2024.10.00')
    implementation 'androidx.compose.ui:ui'
    implementation 'androidx.compose.material3:material3'
    implementation 'androidx.activity:activity-compose'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx'
    implementation 'androidx.compose.ui:ui-tooling-preview'
    debugImplementation 'androidx.compose.ui:ui-tooling'
}
  

4. Verifying the Setup

Once Gradle syncs successfully, create your first composable:

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

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

Click the Preview tab or the ▶️ Run Preview button to see your UI instantly rendered inside Android Studio — no emulator needed.

5. Common Setup Errors

• Unresolved reference: @Composable → Check that buildFeatures.compose = true is enabled.
• Preview not showing → Use the correct @Preview import from androidx.compose.ui.tooling.preview.
• Gradle sync failed → Verify your Kotlin and Compose compiler versions are compatible.

6. Folder Structure (Recommended)

  app/
  ├── java/com/example/mycomposeapp/
  │   ├── MainActivity.kt
  │   └── ui/
  │       ├── theme/ (Color.kt, Typography.kt, Theme.kt)
  │       ├── components/ (Reusable composables)
  │       └── screens/ (HomeScreen.kt, DetailsScreen.kt)
  └── res/
      └── values/ (colors.xml, strings.xml)
  

Keeping a clear folder structure helps organize composables as your app grows — separating themes, components, and screens.

7. Next Steps

Now that your project is ready, the next article will explore how Composable functions work — the building blocks of all UI in Jetpack Compose.