Logo
Jetpack Compose Basics

Introduction to Jetpack Compose

Jetpack Compose represents a revolutionary shift in Android UI development, offering a modern, declarative approach to building native user interfaces. As an Android developer working with Kotlin, embracing Jetpack Compose can significantly streamline your development workflow while enabling you to create more dynamic and responsive applications.

What is Jetpack Compose?

Jetpack Compose is Android's modern toolkit for building native UI. It simplifies and accelerates UI development on Android by using fewer lines of code, powerful tools, and intuitive Kotlin APIs. Unlike the traditional View-based system, Jetpack Compose uses a declarative programming model where you describe your UI based on data states, and the framework handles updating the UI when states change.

Jetpack Compose eliminates the need for XML layout files, findViewById(), View binding, and other boilerplate code that has traditionally made Android UI development complex and error-prone. With Compose, your UI components are created entirely in Kotlin, bringing consistency to your codebase and enabling powerful composition patterns.

Key Benefits of Jetpack Compose

Simplified UI Development

Jetpack Compose dramatically reduces the amount of code required to create beautiful, interactive UIs. The declarative approach means you describe what your UI should look like for different states, and Compose handles the UI updates when your data changes.

Increased Developer Productivity

By eliminating XML layouts and providing real-time previews, Jetpack Compose accelerates development cycles. The hot reload feature allows you to see your changes instantly without rebuilding your entire application.

Powerful Animation Framework

Jetpack Compose includes a built-in animation library that makes it easier to create fluid, responsive animations with minimal code. These animations work seamlessly with state changes, making your app feel more polished.

Interoperability with Existing Code

Jetpack Compose is designed to work alongside your existing View-based UI, allowing for incremental adoption. You can start using Compose in a single screen while maintaining the rest of your application in the traditional View system.

Material Design Integration

Jetpack Compose comes with Material Design components out of the box, helping you create apps that follow Google's design guidelines with minimal effort.

Setting Up a Jetpack Compose Project

Let's walk through the process of setting up a new Android project with Jetpack Compose. This step-by-step guide will ensure you have all the necessary dependencies and configurations to start building with Compose.

Project Setup Requirements

Before diving in, ensure you have:

  • Android Studio Arctic Fox (2021.3.1) or newer
  • Kotlin 1.5.31 or newer (preferably 1.8.0+ for the latest Compose features)
  • JDK 11 or newer

Creating a New Compose Project

  1. Launch Android Studio and select "New Project" from the welcome screen.

  2. Select the "Empty Compose Activity" template from the project templates screen. This template provides a basic Compose application structure with the necessary configurations.

  3. Configure your project by providing:

    • Name: Your application name (e.g., "ComposeDemo")
    • Package name: Your application's package identifier (e.g., "com.example.composedemo")
    • Save location: Where to store your project files
    • Language: Kotlin
    • Minimum SDK: API 21 (Lollipop) or higher is recommended for Compose
    • Click "Finish" to create the project

Understanding the Project Structure

When your project is created with the Compose template, it will have the following key components:

  • MainActivity.kt: Contains the entry point to your application with a basic Compose setup
  • ui.theme package: Contains theme-related files for colors, typography, and shapes
  • build.gradle (Module): Contains the necessary Compose dependencies and configurations

Let's examine the build.gradle file to understand the required dependencies for Jetpack Compose:

plugins {  
    id 'com.android.application'  
    id 'kotlin-android'  
}  
  
android {  
    compileSdk 34  
  
    defaultConfig {  
        applicationId \"com.example.composedemo\"  
        minSdk 21  
        targetSdk 34  
        versionCode 1  
        versionName \"1.0\"  
  
        testInstrumentationRunner \"androidx.test.runner.AndroidJUnitRunner\"  
        vectorDrawables {  
            useSupportLibrary true  
        }  
    }  
  
    buildTypes {  
        release {  
            minifyEnabled false  
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'  
        }  
    }  
    compileOptions {  
        sourceCompatibility JavaVersion.VERSION_11  
        targetCompatibility JavaVersion.VERSION_11  
    }  
    kotlinOptions {  
        jvmTarget = '11'  
    }  
    buildFeatures {  
        compose true  
    }  
    composeOptions {  
        kotlinCompilerExtensionVersion '1.4.3'  
    }  
    packagingOptions {  
        resources {  
            excludes += '/META-INF/{AL2.0,LGPL2.1}'  
        }  
    }  
}  
  
dependencies {  
    implementation 'androidx.core:core-ktx:1.10.1'  
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1'  
    implementation 'androidx.activity:activity-compose:1.7.2'  
    implementation platform('androidx.compose:compose-bom:2023.06.01')  
    implementation 'androidx.compose.ui:ui'  
    implementation 'androidx.compose.ui:ui-graphics'  
    implementation 'androidx.compose.ui:ui-tooling-preview'  
    implementation 'androidx.compose.material3:material3'  
    testImplementation 'junit:junit:4.13.2'  
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'  
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'  
    androidTestImplementation platform('androidx.compose:compose-bom:2023.06.01')  
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'  
    debugImplementation 'androidx.compose.ui:ui-tooling'  
    debugImplementation 'androidx.compose.ui:ui-test-manifest'  
}

Key points to note in the configuration:

  • buildFeatures { compose true }: Enables Compose for the project
  • composeOptions { kotlinCompilerExtensionVersion '1.4.3' }: Specifies the Compose compiler version
  • Compose dependencies: The platform BOM (Bill of Materials) simplifies dependency management by providing a consistent set of versions

Understanding MainActivity.kt

When you create a new Compose project, Android Studio generates a MainActivity.kt file with basic Compose implementation:

package com.example.composedemo  
  
import android.os.Bundle  
import androidx.activity.ComponentActivity  
import androidx.activity.compose.setContent  
import androidx.compose.foundation.layout.fillMaxSize  
import androidx.compose.material3.MaterialTheme  
import androidx.compose.material3.Surface  
import androidx.compose.material3.Text  
import androidx.compose.runtime.Composable  
import androidx.compose.ui.Modifier  
import androidx.compose.ui.tooling.preview.Preview  
import com.example.composedemo.ui.theme.ComposeDemoTheme  
  
class MainActivity : ComponentActivity() {  
    override fun onCreate(savedInstanceState: Bundle?) {  
        super.onCreate(savedInstanceState)  
        setContent {  
            ComposeDemoTheme {  
                // A surface container using the 'background' color from the theme  
                Surface(  
                    modifier = Modifier.fillMaxSize(),  
                    color = MaterialTheme.colorScheme.background  
                ) {  
                    Greeting(\"Android\")  
                }  
            }  
        }  
    }  
}  
  
@Composable  
fun Greeting(name: String, modifier: Modifier = Modifier) {  
    Text(  
        text = \"Hello $name!\",  
        modifier = modifier  
    )  
}  
  
@Preview(showBackground = true)  
@Composable  
fun GreetingPreview() {  
    ComposeDemoTheme {  
        Greeting(\"Android\")  
    }  
}

Let's break down the key components of this file:

  1. setContent { }: This function defines the Compose UI hierarchy for the activity. It's similar to setContentView() in the View system.

  2. ComposeDemoTheme { }: A composable function that applies your app's theme to its content.

  3. Surface: A basic building block that provides a background color and styling to its content.

  4. Greeting function: A custom composable function that displays text.

  5. @Composable annotation: Marks a function as a composable function, which can be used to define UI components.

  6. @Preview annotation: Allows you to see a preview of your composable in Android Studio without running the app.

Fundamental Concepts in Jetpack Compose

To effectively work with Jetpack Compose, it's essential to understand several key concepts:

Composable Functions

Composable functions are the building blocks of your UI in Jetpack Compose. These functions are annotated with @Composable and can be called from other composable functions to build complex UIs through composition.

@Composable  
fun ProfileCard(name: String, status: String) {  
    Card(  
        modifier = Modifier  
            .padding(16.dp)  
            .fillMaxWidth(),  
        elevation = CardDefaults.cardElevation(  
            defaultElevation = 4.dp  
        )  
    ) {  
        Column(  
            modifier = Modifier.padding(16.dp)  
        ) {  
            Text(text = name, style = MaterialTheme.typography.headlineMedium)  
            Spacer(modifier = Modifier.height(8.dp))  
            Text(text = status, style = MaterialTheme.typography.bodyMedium)  
        }  
    }  
}

State Management

State in Compose represents any value that can change over time. When state changes, Compose automatically recomposes the affected parts of the UI.

@Composable  
fun Counter() {  
    // Create a mutable state that holds an integer  
    val count = remember { mutableStateOf(0) }  
      
    Column(horizontalAlignment = Alignment.CenterHorizontally) {  
        Text(  
            text = \"Count: ${count.value}\",  
            style = MaterialTheme.typography.headlineMedium  
        )  
        Spacer(modifier = Modifier.height(16.dp))  
        Button(onClick = { count.value++ }) {  
            Text(\"Increment\")  
        }  
    }  
}

Modifiers

Modifiers are used to decorate or enhance a composable. They control layout, appearance, and behavior of UI elements.

@Composable  
fun ModifierExample() {  
    Text(  
        text = \"Hello Compose!\",  
        modifier = Modifier  
            .background(Color.LightGray)  
            .padding(16.dp)  
            .fillMaxWidth()  
            .clickable { /* Handle click */ }  
    )  
}

Theming

Jetpack Compose provides a powerful theming system that helps maintain consistency across your application:

@Composable  
fun ThemedContent() {  
    MaterialTheme(  
        colorScheme = darkColorScheme(),  
        typography = Typography(  
            bodyLarge = TextStyle(  
                fontFamily = FontFamily.Default,  
                fontWeight = FontWeight.Normal,  
                fontSize = 16.sp  
            )  
        )  
    ) {  
        Surface(  
            modifier = Modifier.fillMaxSize(),  
            color = MaterialTheme.colorScheme.background  
        ) {  
            // Your UI content  
        }  
    }  
}

Creating a Simple Compose UI

Now let's create a simple UI example to demonstrate Jetpack Compose in action:

@Composable  
fun SimpleComposeUI() {  
    Column(  
        modifier = Modifier  
            .fillMaxSize()  
            .padding(16.dp),  
        horizontalAlignment = Alignment.CenterHorizontally  
    ) {  
        Text(  
            text = \"Welcome to Jetpack Compose\",  
            style = MaterialTheme.typography.headlineMedium,  
            textAlign = TextAlign.Center  
        )  
          
        Spacer(modifier = Modifier.height(24.dp))  
          
        Image(  
            painter = painterResource(id = R.drawable.compose_logo),  
            contentDescription = \"Compose Logo\",  
            modifier = Modifier  
                .size(120.dp)  
                .clip(CircleShape)  
        )  
          
        Spacer(modifier = Modifier.height(24.dp))  
          
        Text(  
            text = \"Jetpack Compose is Android's modern toolkit for building native UI. \" +  
                    \"It simplifies and accelerates UI development on Android.\",  
            style = MaterialTheme.typography.bodyMedium,  
            textAlign = TextAlign.Center  
        )  
          
        Spacer(modifier = Modifier.height(24.dp))  
          
        Button(  
            onClick = { /* Handle click */ },  
            modifier = Modifier.padding(8.dp)  
        ) {  
            Text(\"Get Started\")  
        }  
    }  
}

Best Practices for Jetpack Compose Development

As you begin developing with Jetpack Compose, keep these best practices in mind:

Compose by State, Not by Event

In Compose, you describe your UI based on the current state, not in response to events. This state-driven approach simplifies your code and makes it more predictable.

Keep Composable Functions Pure

Composable functions should ideally be pure and free of side effects. They should take inputs and produce UI outputs without modifying external state or performing long-running operations directly.

Extract Reusable Composables

Break down complex UIs into smaller, reusable composable functions. This promotes reusability and makes your code easier to test and maintain.

// Instead of a large, complex composable  
@Composable  
fun ComplexScreen() {  
    Column {  
        Header()  
        Content()  
        Footer()  
    }  
}  
  
// Extract smaller, reusable composables  
@Composable  
fun Header() { /* ... */ }  
  
@Composable  
fun Content() { /* ... */ }  
  
@Composable  
fun Footer() { /* ... */ }

Use Previews Extensively

The @Preview annotation allows you to see your composables in Android Studio without running the app. Use previews to iterate quickly and test different states of your UI.

@Preview(showBackground = true, name = \"Light Theme\")  
@Composable  
fun DefaultPreview() {  
    MyAppTheme {  
        MyScreen()  
    }  
}  
  
@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES, name = \"Dark Theme\")  
@Composable  
fun DarkPreview() {  
    MyAppTheme {  
        MyScreen()  
    }  
}

Leverage State Hoisting

State hoisting is a pattern where state is lifted to a composable's caller, making the composable stateless and more reusable.

// Before hoisting (stateful)  
@Composable  
fun Counter() {  
    var count by remember { mutableStateOf(0) }  
    Column {  
        Text(\"Count: $count\")  
        Button(onClick = { count++ }) { Text(\"Increment\") }  
    }  
}  
  
// After hoisting (stateless)  
@Composable  
fun Counter(count: Int, onIncrement: () -> Unit) {  
    Column {  
        Text(\"Count: $count\")  
        Button(onClick = onIncrement) { Text(\"Increment\") }  
    }  
}  
  
// Usage with hoisted state  
@Composable  
fun CounterScreen() {  
    var count by remember { mutableStateOf(0) }  
    Counter(count = count, onIncrement = { count++ })  
}

Integrating Jetpack Compose with Existing Apps

If you're working with an existing View-based application, you can incrementally adopt Compose:

Adding Compose to an Existing Project

Update your module's build.gradle file to include Compose dependencies and configuration:

android {  
    // Existing configuration...  
      
    buildFeatures {  
        compose true  
    }  
    composeOptions {  
        kotlinCompilerExtensionVersion '1.4.3'  
    }  
}  
  
dependencies {  
    // Existing dependencies...  
      
    implementation platform('androidx.compose:compose-bom:2023.06.01')  
    implementation 'androidx.compose.ui:ui'  
    implementation 'androidx.compose.material3:material3'  
    implementation 'androidx.compose.ui:ui-tooling-preview'  
    debugImplementation 'androidx.compose.ui:ui-tooling'  
}

Using ComposeView in XML Layouts

You can embed Compose UI in your existing XML layouts using ComposeView:

// In your Activity or Fragment  
val composeView = findViewById<ComposeView>(R.id.compose_view)  
composeView.setContent {  
    MaterialTheme {  
        // Your Compose UI here  
        Text(\"Hello from Compose in XML!\")  
    }  
}  

<!-- In your XML layout -->  
<androidx.compose.ui.platform.ComposeView  
    android:id=\"@+id/compose_view\"  
    android:layout_width=\"match_parent\"  
    android:layout_height=\"wrap_content\" />

Using AndroidView in Compose

Conversely, you can embed existing Android Views in your Compose UI using AndroidView:

@Composable  
fun ViewInCompose() {  
    AndroidView(  
        factory = { context ->  
            // Create an Android View  
            TextView(context).apply {  
                text = \"This is an Android TextView in Compose\"  
                textSize = 18f  
                setTextColor(Color.BLUE.toArgb())  
            }  
        },  
        update = { textView ->  
            // Update the view if needed  
            textView.text = \"Updated TextView text\"  
        }  
    )  
}

Performance Considerations

When developing with Jetpack Compose, keep these performance considerations in mind:

Recomposition Scope

Minimize the scope of recomposition by breaking down your UI into smaller composables and managing state efficiently. This ensures that only the necessary parts of your UI are recomposed when state changes.

Remember and Derived State

Use remember to store objects across recompositions and derivedStateOf to compute derived state efficiently:

@Composable  
fun EfficientList(items: List<Item>) {  
    // Remember a scrollable state  
    val listState = rememberLazyListState()  
      
    // Calculate whether the first item is visible efficiently  
    val showButton by remember {  
        derivedStateOf {  
            listState.firstVisibleItemIndex > 0  
        }  
    }  
      
    Box {  
        LazyColumn(state = listState) {  
            items(items) { item ->  
                ItemRow(item)  
            }  
        }  
          
        // Only shown when scrolled past the first item  
        AnimatedVisibility(  
            visible = showButton,  
            modifier = Modifier.align(Alignment.BottomEnd)  
        ) {  
            FloatingActionButton(  
                onClick = {  
                    // Scroll to top  
                    scope.launch {  
                        listState.animateScrollToItem(0)  
                    }  
                }  
            ) {  
                Icon(Icons.Default.ArrowUpward, \"Scroll to top\")  
            }  
        }  
    }  
}

LaunchedEffect and Side Effects

Use LaunchedEffect for performing side effects safely in composables:

@Composable  
fun NetworkScreen(viewModel: MyViewModel) {  
    val uiState by viewModel.uiState.collectAsState()  
      
    // Fetch data when the composable enters composition  
    LaunchedEffect(Unit) {  
        viewModel.fetchData()  
    }  
      
    // Show a loading indicator or data based on state  
    when (uiState) {  
        is UiState.Loading -> LoadingIndicator()  
        is UiState.Success -> DataDisplay((uiState as UiState.Success).data)  
        is UiState.Error -> ErrorMessage((uiState as UiState.Error).message)  
    }  
}