Android : Introduction to Jetpack Compose

Introduction to Jetpack Compose

Jetpack Compose is Android's modern toolkit for building native user interfaces. It simplifies UI development on Android by using a declarative approach, where you describe the UI in terms of its state, and the framework takes care of rendering the UI when the state changes. This is a significant improvement over traditional XML-based UI development.

In this article, we will cover the basics of Jetpack Compose, including:

What is Jetpack Compose?
Setting up a Jetpack Compose project.
Basic Compose functions.
Creating a simple UI with Text, Button, and layouts.

What Is Jetpack Compose?

Jetpack Compose is a fully declarative UI toolkit that simplifies Android app development by reducing the need for XML-based layouts and providing a Kotlin-based API. In Compose, you describe your UI by calling composable functions, which return UI elements that are automatically updated when their state changes.

Key Features of Jetpack Compose

Declarative UI: Define UI elements based on state and business logic.
Kotlin-Based: Fully integrates with Kotlin and makes use of Kotlin features such as extension functions and lambdas.
Less Boilerplate: Reduces the amount of code required to build UI, eliminating the need for XML layouts, findViewById(), and separate layout files for the UI.
Easy State Management: Jetpack Compose provides APIs that make handling UI state straightforward.
Composable Functions: Functions marked with the @Composable annotation are used to describe and build UI elements.

Setting Up Jetpack Compose in Android Studio

To get started with Jetpack Compose, follow these steps:

1. Install Android Studio

Install a current version of Android Studio that supports the version of Jetpack Compose you intend to use.

2. Create a New Project

Open Android Studio and create a new project. Select a Compose-based project template, such as Empty Activity, depending on the Android Studio version.

3. Configure Gradle

For a new project, Android Studio configures the required Compose dependencies automatically. If you are configuring Compose manually in an existing project, add the appropriate Compose dependencies according to the current Android and Compose setup.

For example:

dependencies {
    implementation "androidx.activity:activity-compose:<version>"
    implementation "androidx.compose.ui:ui:<version>"
    implementation "androidx.compose.material:material:<version>"
    implementation "androidx.compose.ui:ui-tooling-preview:<version>"

    debugImplementation "androidx.compose.ui:ui-tooling:<version>"
}

Note: Dependency versions change over time. For a new project, it is recommended to use the versions generated by Android Studio or the versions specified in the official Android documentation rather than hard-coding older Compose versions.

4. Sync and Build

Sync the Gradle project and build the application to ensure that the project is configured correctly.

Basic Compose Functions

Jetpack Compose provides composable functions to build user interfaces. These functions use the @Composable annotation.

Here are a few fundamental composables:

Text: Displays text.
Button: Provides a clickable button.
Column: Arranges elements vertically.
Row: Arranges elements horizontally.

Creating a Simple UI

Let's create a simple application that displays a greeting text and a button that changes the text when clicked.

package com.example.jetpackcomposeexample

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.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.tooling.preview.Preview

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            GreetingApp()
        }
    }
}

@Composable
fun GreetingApp() {
    var greeting by remember {
        mutableStateOf("Hello, Jetpack Compose!")
    }

    Column {
        Text(text = greeting)

        Button(
            onClick = {
                greeting = "Hello, World!"
            }
        ) {
            Text("Change Greeting")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    GreetingApp()
}

Explanation

`setContent {}`

The setContent {} function sets the Compose content for the activity. Inside it, we call the GreetingApp() composable function.

State Management

The example uses remember and mutableStateOf to store the greeting text as UI state. When the button is clicked, the value changes. Compose detects the state change and recomposes the affected UI.

The delegated state syntax:

var greeting by remember {
    mutableStateOf("Hello, Jetpack Compose!")
}

allows the state value to be accessed directly through greeting.

UI Components

Column: A layout composable that arranges its children vertically.
Text: Displays text on the screen.
Button: Provides a clickable UI element that changes the greeting when clicked.

Key Concepts in the Example

State Management

The text changes when the button is clicked because the greeting state is updated. This state change causes Compose to recompose the relevant UI.

Composable Function

The GreetingApp() function is a composable function that defines the application's UI.

Preview

The @Preview annotation allows the UI to be previewed directly inside Android Studio without running the application on a device or emulator.