Jetpack Compose Tutorial for Android: Getting Began


Replace notice: Joey deVilla up to date this tutorial for Android Studio Giraffe, Kotlin 1.9 and Android 14. Alex Sullivan wrote the unique.

We’re at an thrilling level in Android improvement. Based on a survey of the mobile development ecosystem taken in late 2022 by the Mobile Native Foundation, half of Android builders are constructing apps with Jetpack Compose. The opposite half are constructing them “the outdated means.”

Working techniques evolve, and Android — the world’s most popular OS — is not any exception. When a platform the scale of Android makes a change this large, the primary builders who embrace the change acquire a big benefit. With half the Android builders nonetheless ready to make the leap, the time to study Jetpack Compose is now.

What’s Jetpack Compose?

Launched in July 2021, Jetpack Compose is a UI toolkit that updates the method of constructing Android apps. As an alternative of XML, you utilize Kotlin code to declaratively specify how the UI ought to look and behave in numerous states. You don’t have to fret how the UI strikes amongst these states — Jetpack Compose takes care of that. You’ll discover it acquainted in the event you’re acquainted with declarative net frameworks akin to React, Angular or Vue.

The Jetpack Compose method is a big departure from Android’s authentic XML UI toolkit, now referred to as Views. Views was modeled after outdated desktop UI frameworks and dates to Android’s starting. In Views, you utilize a mechanism akin to findViewById() or view binding to attach UI components to code. This crucial method is easy however requires defining how this system strikes amongst states and the way the UI ought to look and behave in these states.

Jetpack Compose is constructed with Kotlin, and it takes benefit of the options and design philosophy of Kotlin language. It’s designed to be used in purposes written in Kotlin. With Jetpack Compose, you now not must context-switch to XML when designing your app’s UI; you do every part in Kotlin.

On this tutorial, you’ll construct two Jetpack Compose apps:

  • A easy check run app, which you’ll construct from scratch, beginning with FileNew.
  • A extra advanced cookbook app that can show a listing of recipe playing cards containing pictures and textual content. You’ll construct this utilizing a starter undertaking.

Your First Jetpack Compose App

Make sure you’re working the most recent steady model of Android Studio. Each apps on this tutorial — the easy app you’re about to construct and the cookbook app you’ll construct afterward — had been constructed utilizing the Flamingo model of Android Studio. Recently, Google has been upgrading Android Studio at a livid tempo, and the code under may not work on earlier variations.

Observe: “Verify for Updates” is your good friend! On the macOS model of Android Studio, you’ll discover it underneath the Android Studio menu. When you’re a Home windows- or Linux-based Android Studio consumer, you’ll discover it underneath the Assist menu.

When you’ve confirmed your Android Studio is updated, launch it and choose FileNewNew Mission…. Relying on the way you final resized the New Mission window, you’ll both see one thing like this:

A small version of Android Studio’s New Project window

or this:

A wide version of Android Studio’s New Project window

Both means, you’ll see the first template within the listing is for an Empty Exercise undertaking with the Jetpack Compose icon:

On the planet of programming, the place it’s a must to state issues explicitly so a compiler can perceive them, that is thought-about a delicate trace. It is best to infer that Jetpack Compose is predicted to be the popular means for constructing Android UIs going ahead, and the earlier you study it, the higher.

Choose the Jetpack Compose Empty Exercise template and click on Subsequent. Within the following New Mission window, identify the undertaking My First Compose App and click on the End button.

Hey, Android!

As soon as Android Studio completed constructing the undertaking, run the app. It is best to see one thing like this:

Android phone emulator displaying the Hello Android! screen

To see what’s behind this notably unexciting display screen, open MainActivity.kt. It nonetheless incorporates a MainActivity class and an onCreate() methodology, and onCreate() nonetheless calls on its counterpart in MainActivity’s superclass, ComponentActivity.

What’s completely different is the remainder of the code in onCreate(). When constructing Android UIs the outdated means — which is named ViewsonCreate() calls the setContentView() methodology and passes it the ID of the view’s XML file, which Android makes use of to render the onscreen components. In Jetpack Compose, onCreate() calls a technique named setContent(), and within the default undertaking, it appears to be like like this:

setContent {
  MyFirstComposeAppTheme {
  // A floor container utilizing the 'background' colour from the theme
      modifier = Modifier.fillMaxSize(),
      colour = MaterialTheme.colorScheme.background
    ) {

setContent() takes a lambda as its parameter, and close to the tip of that lambda is a name to a technique referred to as Greeting(). You’ll discover its definition instantly after the MainActivity class:

enjoyable Greeting(identify: String, modifier: Modifier = Modifier) {
 Textual content(
   textual content = "Hey $identify!",
   modifier = modifier

As you see, Greeting() is the tactic that determines what seems onscreen if you run the app. You must also discover the next components of this methodology:

  • It’s annotated with @Composable. This informs the compiler that Greeting() is a composable perform (or composable for brief), which implies it receives information and generates a UI ingredient in response. One cause to make it clear {that a} perform is composable is that composable features can solely be referred to as by different composable features. setContent() which calls Greeting() is a composable.
  • It has parameters. As a perform, it has parameters (or, in the event you favor, it takes arguments). That makes composables versatile, permitting you to move state to them. When you’re accustomed to programming in React, composable parameters are Jetpack Compose’s model of props.
  • It’s a Unit perform. It has no return worth. As an alternative, it causes a consumer interface ingredient to be drawn onscreen. Purposeful programming language purists would name this a side effect; we Jetpack Composers favor to say that composables emit UI components.
  • Its identify is a CapitalizedNoun. The conference is that composable perform names are nouns capitalized in PascalCase. It helps distinguish composables from odd features and strategies, the place the conference is to make their names verbs that use camelCase capitalization.
  • It incorporates a name to a technique referred to as Textual content(). Text() is one in every of Jetpack Compose’s built-in composables, and given a string, it emits a textual content view containing that string.


Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button