Introduction

Android Jetpack Compose is a modern toolkit designed to simplify and accelerate UI development on Android. Moving away from traditional XML layouts, Compose introduces a declarative approach to building UIs, similar to frameworks like React or SwiftUI. With Compose, developers can create complex, beautiful, and responsive UIs with less boilerplate code.

If you’re new to the concept of declarative UI, Jetpack Compose represents this modern approach perfectly by allowing developers to define what the UI should look like and behave under specific conditions, rather than describing how to achieve that result step-by-step. For a broader perspective on declarative and imperative paradigms in UI development, you can explore my post, “Imperative vs Declarative UI: A Deep Dive into UIKit and SwiftUI”. It provides a detailed comparison and showcases how declarative frameworks like Jetpack Compose and SwiftUI are revolutionizing the way we build user interfaces.

Getting Started with Jetpack Compose

Setup

To start using Jetpack Compose in your Android project, you need to update two build.gradle files:

build.gradle (Project-level)

Ensure that your project uses the correct Kotlin plugin. Update the buildscript and plugins sections in the project-level build.gradle file:

buildscript {
    ext.kotlin_version = "1.9.0"
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath "com.android.tools.build:gradle:8.1.0"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

allprojects {
    repositories {
        google()
        mavenCentral()
    }
}

build.gradle (Module-level, e.g., app/build.gradle)

Update your module-level build.gradle file to enable Jetpack Compose and add the necessary dependencies.
Add the buildFeatures section under android and specify the Compose compiler version using composeOptions:

android {
    compileSdk 33
    defaultConfig {
        applicationId "com.example.jetpackcompose"
        minSdk 21
        targetSdk 33
        versionCode 1
        versionName "1.0"
    }

    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion '1.4.0'
    }
}

Add Dependencies

Include the necessary Compose libraries in the dependencies block in the same module level build.gradle file:

dependencies {
    implementation "androidx.compose.ui:ui:1.4.0"
    implementation "androidx.compose.material:material:1.4.0"
    implementation "androidx.compose.ui:ui-tooling-preview:1.4.0"

    // Optional testing libraries
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:1.4.0"
    debugImplementation "androidx.compose.ui:ui-tooling:1.4.0"
}

Sync the Project

After updating the build.gradle files, sync your project in Android Studio to download the necessary dependencies.

Ready to Compose

Once your project is synced, you’re ready to start building user interfaces with Jetpack Compose.

Basic Structure

Jetpack Compose introduces a declarative way of building UIs. Instead of defining the UI in XML, you use Kotlin functions annotated with @Composable. These composable functions define the look and behavior of your app’s UI.

Create a Composable Function

In Jetpack Compose, all UI elements are built using composable functions. These are marked with the @Composable annotation and can be reused throughout your app.

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

The Text composable is used to display simple text on the screen. You can pass data like name into the function to make it dynamic.

Preview Your Composable

Jetpack Compose allows you to preview your UI directly in Android Studio without running the app. Annotate your function with @Preview to see how it looks in the IDE.

@Preview
@Composable
fun PreviewGreeting() {
    Greeting(name = "Compose")
}

When you open the preview in Android Studio, it will render the UI in the design editor, giving you instant feedback.

Set Content in Your Activity

To use Compose in your app, update the onCreate method of your main activity to set the content using setContent.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // Call your composable here
            Greeting(name = "Jetpack Compose")
        }
    }
}

The setContent block acts as the entry point for your Compose UI. You can call any composable function here to display it on the screen.

Add Modifiers for Styling

Compose uses Modifier to style, size, and position elements. For example:

@Composable
fun StyledGreeting(name: String) {
    Text(
        text = "Hello, $name!",
        modifier = Modifier.padding(16.dp),
        style = MaterialTheme.typography.h6
    )
}

In this example:

• Modifier.padding(16.dp) adds padding around the text.

• MaterialTheme.typography.h6 applies a predefined style from Material Design.

What’s Happening Here?

• @Composable: Marks functions as composables to be used in the UI.

• @Preview: Allows you to preview the UI in the IDE.

• setContent: Replaces traditional XML layouts, serving as the entry point for the Compose UI.

• Modifier: A flexible way to style and position elements in Compose.

With this structure, you’re now ready to build UIs quickly and effectively using Jetpack Compose!

Key Concepts and Components

Composable Functions

Every UI element in Compose is created using a @Composable function:

@Composable
fun WelcomeScreen() {
    Column {
        Text("Welcome to Jetpack Compose!")
        Button(onClick = { /* Handle click */ }) {
            Text("Click Me")
        }
    }
}

State Management

Manage state with remember and mutableStateOf:

@Composable
fun CounterApp() {
    var count by remember { mutableStateOf(0) }

    Column {
        Text("Count: $count")
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

Layouts

Compose offers flexible layouts like Column, Row, and Box:

@Composable
fun LayoutExample() {
    Row(modifier = Modifier.padding(16.dp)) {
        Text("Item 1")
        Spacer(modifier = Modifier.width(8.dp))
        Text("Item 2")
    }
}

Building a Simple App

Create a simple app that displays a greeting and a counter:

@Composable
fun SimpleApp() {
    var count by remember { mutableStateOf(0) }

    Column(modifier = Modifier.padding(16.dp)) {
        Text("Hello, Jetpack Compose!")
        Spacer(modifier = Modifier.height(8.dp))
        Button(onClick = { count++ }) {
            Text("Click Me: $count")
        }
    }
}

Theming and Styling

Customize your app’s theme with Compose:

@Composable
fun MyAppTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colors = lightColors(
            primary = Color.Blue,
            secondary = Color.Green
        ),
        typography = Typography(
            h1 = TextStyle(fontSize = 30.sp, fontWeight = FontWeight.Bold)
        ),
        shapes = Shapes(
            small = RoundedCornerShape(4.dp)
        )
    ) {
        content()
    }
}

Advanced Features

Animations

@Composable
fun AnimatedVisibilityExample(visible: Boolean) {
    AnimatedVisibility(visible) {
        Text("This text fades in and out!")
    }
}

LazyColumn

@Composable
fun ItemList(items: List<String>) {
    LazyColumn {
        items(items) { item ->
            Text(item)
        }
    }
}

Testing in Jetpack Compose

Write tests with Compose Testing Library:

@get:Rule
val composeTestRule = createComposeRule()

@Test
fun testButtonClick() {
    composeTestRule.setContent {
        CounterApp()
    }

    composeTestRule.onNodeWithText("Increment").performClick()
    composeTestRule.onNodeWithText("Count: 1").assertExists()
}

Conclusion

Jetpack Compose is transforming how Android UIs are built. With its declarative approach, rich feature set, and seamless integration with Kotlin, Compose empowers developers to create dynamic, responsive, and modern apps faster. Dive in today and embrace the future of Android development!

Further Reading and Useful Links

To deepen your understanding of Jetpack Compose and related concepts, explore the following resources:

1. Official Jetpack Compose Documentation

Comprehensive guide from the Android team, covering the basics, advanced topics, and API references.

2. Jetpack Compose Pathway

A curated learning pathway with codelabs and videos to master Jetpack Compose.

3. Compose Codelabs

Hands-on tutorials that walk you through building UIs and learning key concepts interactively.

4. Jetpack Compose Samples on GitHub

A collection of open-source sample apps showcasing the capabilities of Jetpack Compose.

5. Material Design in Jetpack Compose

Learn how to apply Material Design principles to your app using Jetpack Compose’s built-in theming system.

6. JetBrains: Kotlin for Jetpack Compose

A guide from JetBrains about leveraging Kotlin features with Jetpack Compose.

7. Declarative vs Imperative UI

Read my blog post “Imperative vs Declarative UI: A Deep Dive into UIKit and SwiftUI” for a broader understanding of declarative paradigms, which underpin Jetpack Compose.

These resources will provide a mix of theory, practical examples, and real-world use cases to help you master Jetpack Compose and modern Android development.