Jetpack Compose Tutorial

Introduction to Jetpack Compose Composable Functions & Preview Key Concepts State & remember Introduction Layouts: Column, Row & Box Modifiers Lists with LazyColumn State Hoisting & ViewModel Navigation in Compose Material 3 & Theming Side Effects (LaunchedEffect & more) Networking & Loading State in Compose Animations in Compose

Introduction to Jetpack Compose

June 02, 2026 • 1 min read

Jetpack Compose is the modern, recommended way to build Android UI. Instead of writing XML layouts and updating views manually, you describe your UI as Kotlin functions that automatically re-draw when your data changes.

Declarative vs the old XML way

Old way (imperative): create a TextView in XML, then in code call textView.text = "Hi" whenever it changes. Compose way (declarative): you write Text(message) and when message changes, Compose redraws it for you. Less code, fewer bugs.

Your first composable

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

// Host it in an Activity
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme { Greeting("Android") }
        }
    }
}
  • A composable is a function marked @Composable that emits UI.
  • setContent { } replaces setContentView(R.layout...).
  • No XML, no findViewById, no view binding.
Tip: Enable Compose in Gradle (buildFeatures { compose = true }) and add the Compose BOM dependency. New Android Studio templates do this for you.

Summary

Compose is declarative UI in pure Kotlin. You describe the UI for your data and Compose keeps the screen in sync. You wrote your first composable and hosted it with setContent.