How to Use Jetpack Compose in Android: Simple Guide

To use Jetpack Compose in Android, add the Compose dependencies in your build.gradle file, enable Compose in your module's build features, and create UI with composable functions annotated by @Composable. Compose lets you build UI declaratively using Kotlin code without XML layouts.

Syntax

Jetpack Compose uses composable functions to define UI elements. Each composable function is marked with the @Composable annotation. You build UI by calling these functions inside each other.

Key parts:

• @Composable: Marks a function as a UI component.
• setContent { }: Sets the Compose UI content in an Activity.
• UI elements like Text, Button, and Column are composable functions.

kotlin

import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent

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

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

Output

Displays a text label: Hello, Android!

Example

This example shows a simple app with a greeting message and a button that changes the message when clicked. It demonstrates state management and basic UI layout in Compose.

kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.*

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      var greeting by remember { mutableStateOf("Hello, Android!") }
      Column {
        Text(text = greeting)
        Button(onClick = { greeting = "You clicked the button!" }) {
          Text("Click me")
        }
      }
    }
  }
}

Output

Shows text "Hello, Android!" and a button labeled "Click me". When button is clicked, text changes to "You clicked the button!"

Common Pitfalls

Common mistakes when using Jetpack Compose include:

• Not annotating functions with @Composable, so UI won't render.
• Trying to update UI state without using remember and mutableStateOf, causing UI not to refresh.
• Using XML layouts and Compose UI together incorrectly without proper setup.
• Forgetting to enable Compose in build.gradle with buildFeatures { compose true }.

kotlin

/* Wrong: Missing @Composable annotation */
fun Greeting(name: String) {
  Text(text = "Hello, $name!")
}

/* Right: Add @Composable annotation */
@Composable
fun Greeting(name: String) {
  Text(text = "Hello, $name!")
}

Quick Reference

Concept	Description
@Composable	Marks a function as a UI component
setContent { }	Sets Compose UI content in an Activity
remember	Stores state that survives recompositions
mutableStateOf	Creates observable state for UI updates
Column, Row	Layout composables for vertical/horizontal arrangement
Text, Button	Basic UI elements

Key Takeaways

Jetpack Compose builds UI with Kotlin functions marked @Composable instead of XML layouts.

Use setContent in your Activity to set Compose UI content.

Manage UI state with remember and mutableStateOf to update UI reactively.

Always enable Compose in your build.gradle with buildFeatures { compose true }.

Common errors include missing @Composable annotation and incorrect state handling.