Jetpack Compose Tutorial for Android: Getting Started

Update notes: Joey deVilla updated this tutorial for Android Studio Giraffe, Kotlin 1.9, and Android 14. Originally written by Alex Sullivan.

We’re at an exciting stage in Android development. According to Mobile Native Foundation’s Mobile Development Ecosystem Survey conducted in late 2022, half of Android developers use Jetpack Compose to build apps. The other half is built “the old-fashioned way.”

Operating systems are evolving, and Android, the world’s most popular OS, is no exception. When a platform as big as Android makes such a big change, the developers who embrace it first have a big advantage. With half of Android developers still waiting to make the leap, it’s time to learn Jetpack Compose. now.

What is Jetpack Compose?

Jetpack Compose, released in July 2021, is a UI toolkit that updates the process of building Android apps. Instead of XML, use Kotlin code to declaratively specify how your UI looks and behaves in different states. You don’t have to worry about how the UI moves between these states. Jetpack Compose takes care of that for you. If you’re used to declarative web frameworks like React, Angular, or Vue, you’ll find this familiar.

The Jetpack Compose approach is very different from Android’s original XML UI toolkit (as it is now called). view. Views is modeled after older desktop UI frameworks, dating back to the beginnings of Android. Views use the following mechanisms: findViewById() Or view bindings to connect UI elements to your code. This imperative approach is simple, but requires defining how the program moves between states and how the UI should appear and behave in those states.

Jetpack Compose is built with Kotlin and leverages the features and design philosophy of the Kotlin language. Designed for use with applications written in Kotlin. With Jetpack Compose, you no longer need to context switch to XML when designing your app’s UI. Everything is done in Kotlin.

In this tutorial, you’ll build two Jetpack Compose apps.

• A simple test execution app. Build from scratch. File → new.
• A more complex cookbook app that displays a list of recipe cards with images and text. Build this using the starter project.

Your first Jetpack Compose app

Make sure you’re running the latest stable version of Android Studio. Both apps in this tutorial (the simple app you’ll build and the cookbook app you’ll build later) were built using the Flamingo version of Android Studio. Recently, Google has been upgrading Android Studio at a breakneck pace, so the code below may not work in earlier versions.

Note: “Check for updates” is your friend! In the macOS version of Android Studio, you can find it here: android studio menu. For Windows or Linux-based Android Studio users, you can find it here: help menu.

Once Android Studio is up to date, launch it and select File → new → New project…. Depending on how you last resized it, new project You should see something like this in the window:

or this:

In any case, here’s what you’ll find: beginning The templates in the list are sky activities Create a project using the Jetpack Compose icon.

In the programming world, this is considered a subtle hint because you need to explicitly state the problem for the compiler to understand. Jetpack Compose is expected to become the preferred way to build Android UI in the future, and the sooner you learn it, the better.

Select Jetpack Compose sky activities Click on the template Next.In the following new project Name your project in the window My first music composition app and, finish button.

Hello, Android!

After Android Studio finishes building your project, run your app. You should see something like this:

To see what’s behind this particularly uninteresting screen, open the following steps: MainActivity.kt.still included MainActivity class and onCreate() method, and onCreate() still call the other person MainActivitysuper class of, ComponentActivity.

What’s different is the rest of the code. onCreate(). If you build your Android UI the old way, this is called view — onCreate() call setContentView() Create a method and pass it the ID of the view XML file that Android uses to render the elements on the screen. With Jetpack Compose, onCreate() calls a method named setContent()The default project looks like this:

setContent 
  MyFirstComposeAppTheme 
  // A surface container using the 'background' color from the theme
    Surface(
      modifier = Modifier.fillMaxSize(),
      color = MaterialTheme.colorScheme.background
    ) 
     Greeting("Android")
    
  

setContent() There is a method call that takes a lambda as a parameter and near the end of that lambda. Greeting(). Its definition is MainActivity class:

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

As you can see, Greeting() is a method that determines what is displayed on the screen when the app runs. Also notice the following elements of this method:

• is annotated with @Composable. This tells the compiler that: Greeting() Composable functions (or configurable ), which means receiving data and generating UI elements accordingly. One reason to make it clear that a function is composable is: Composable functions can only be called by other composable functions. setContent() which one will call Greeting() It’s composable.
• There are parameters. As a function, it has parameters (or optionally receives arguments). This makes composables flexible and allows you to pass state to them. If you’re familiar with programming in React, you’ll know that composable parameters are the props version of Jetpack Compose.
• it is Unit function. There is no return value. Instead, user interface elements are drawn on the screen. Functional programming language purists would call this a side effect. Here at Jetpack composers, we mean composable. Output UI elements.
• Its name is Capitalized Noun. PascalCase has a convention that composable function names have nouns in uppercase. This helps distinguish composables from regular functions and methods. Typically, their names will be verbs using camel case capitalization.
• Contains a method call. Text(). Text() A built-in composable in Jetpack Compose that, given a string, outputs a text view containing that string.