Fix Jetpack Compose Not Working in Kotlin

Jetpack Compose is the modern toolkit for building native UI in Android apps using Kotlin. However, developers sometimes encounter an issue where Jetpack Compose is not working as expected. This can manifest in different ways: preview not rendering, composables not recognized, or build errors. In this guide, we’ll walk through the most common causes and step-by-step solutions to fix Jetpack Compose not working in Kotlin.

Common Symptoms

1. Preview not showing in Android Studio
2. Red underlines in composable functions
3. Build failing with errors like: “Unresolved reference: Composable”
4. Jetpack Compose functions not recognized
5. No UI changes visible on device

Step-by-Step Solutions

1. Check Kotlin and Compose Version Compatibility

Jetpack Compose requires specific Kotlin versions to work properly. Ensure the Kotlin version matches the version required by Compose.

Example:

// In build.gradle (Project level)
ext {
    compose_version = '1.6.0'
    kotlin_version = '1.9.10'
}

2. Apply Correct Plugins

Ensure you have these plugins applied in your build.gradle (App level):

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

Also, include this in android {} block:

buildFeatures {
    compose true
}

composeOptions {
    kotlinCompilerExtensionVersion = '1.6.0'
}

3. Ensure Compose Dependencies Are Correct

Double-check your dependencies. Missing or wrong versions will break Compose functionality.

Example dependencies:

dependencies {
    implementation "androidx.activity:activity-compose:1.8.0"
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material3:material3:1.1.0"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
}

4. Use @Composable Annotation Properly

All composable functions must be annotated with @Composable.

Wrong:

fun MyScreen() {
    Text("Hello")
}

Correct:

@Composable
fun MyScreen() {
    Text("Hello")
}

5. Invalidate Caches and Restart

Sometimes, Android Studio caches cause problems with Compose rendering.

Steps:

• Go to File > Invalidate Caches / Restart
• Click Invalidate and Restart
• Clean project (Build > Clean Project)
• Rebuild project

6. Enable Jetpack Compose Compiler Reports (Optional)

To debug issues with the compiler, enable Compose compiler metrics:

kotlin {
    compilerOptions {
        freeCompilerArgs += [
            "-P",
            "plugin:androidx.compose.compiler.plugins.kotlin:reportsDestination=/path/to/reports",
            "-P",
            "plugin:androidx.compose.compiler.plugins.kotlin:metricsDestination=/path/to/metrics"
        ]
    }
}

7. Sample Case: Composable Not Recognized

Problem:

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

fun MainScreen() {
    Greeting("Compose") // ERROR: "Unresolved reference: Greeting"
}

Fix:
Call the Composable inside a Composable or inside setContent block:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting("Compose")
        }
    }
}

8. Upgrade Android Studio

Use the latest stable version of Android Studio (preferably Giraffe or newer). Compose features may not work properly in outdated IDE versions. Download from: https://developer.android.com/studio

9. Check Compose Preview Setup

Make sure you add @Preview and @Composable annotations and use correct imports.

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

And import correctly:

import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

10. Avoid Mixing Compose and XML Incorrectly

Compose and XML can co-exist using ComposeView, but improper use can lead to crashes or UI not appearing.

Safe usage inside Activity or Fragment:

composeView.setContent {
    MyComposable()
}

Summary

Problem	Cause	Solution
Preview not working	Outdated Android Studio	Update IDE
@Composable not recognized	Wrong Kotlin or Compose version	Update versions
UI doesn’t render	Missing setContent block	Wrap composables in setContent {}
Red lines in code	Missing dependencies or wrong imports	Fix dependencies and check import paths
Build fails with compose errors	Kotlin plugin version mismatch	Sync version with Compose compiler

Final Thoughts

Jetpack Compose is powerful, but it’s version-sensitive and still evolving. Keeping dependencies aligned, IDE updated, and following proper Compose practices can eliminate 90% of “Jetpack Compose Not Working” problems.