Replace be aware: 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 growth. In response to a survey of the cell growth ecosystem taken in late 2022 by the Cellular Native Basis, half of Android builders are constructing apps with Jetpack Compose. The opposite half are constructing them “the previous manner.”
Working methods evolve, and Android — the world’s hottest OS — isn’t any exception. When a platform the scale of Android makes a change this huge, 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 varied 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 when you’re acquainted with declarative net frameworks reminiscent of 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 previous desktop UI frameworks and dates to Android’s starting. In Views, you utilize a mechanism reminiscent of findViewById() or view binding to attach UI parts to code. This crucial method is straightforward 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 should context-switch to XML when designing your app’s UI; you do the whole lot in Kotlin.
On this tutorial, you’ll construct two Jetpack Compose apps:
A easy take a look at run app, which you’ll construct from scratch, beginning with File → New.
A extra advanced cookbook app that may show an inventory of recipe playing cards containing pictures and textual content. You’ll construct this utilizing a starter venture.
Your First Jetpack Compose App
Make sure you’re operating the newest secure 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. These days, Google has been upgrading Android Studio at a livid tempo, and the code under may not work on earlier variations.
Observe: “Test for Updates” is your good friend! On the macOS model of Android Studio, you’ll discover it underneath the Android Studio menu. For those who’re a Home windows- or Linux-based Android Studio person, you’ll discover it underneath the Assist menu.
When you’ve confirmed your Android Studio is updated, launch it and choose File → New → New Mission…. Relying on the way you final resized the New Mission window, you’ll both see one thing like this:
or this:
Both manner, you’ll see the primary template within the record is for an Empty Exercise venture with the Jetpack Compose icon:
On this planet of programming, the place you must state issues explicitly so a compiler can perceive them, that is thought of a refined trace. You must infer that Jetpack Compose is anticipated to be the popular manner 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 venture My First Compose App and click on the End button.
Howdy, Android!
As soon as Android Studio completed constructing the venture, run the app. You must see one thing like this:
To see what’s behind this significantly unexciting display, open MainActivity.kt. It nonetheless incorporates a MainActivity class and an onCreate() technique, 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 previous manner — which is known as Views — onCreate() calls the setContentView() technique and passes it the ID of the view’s XML file, which Android makes use of to render the onscreen parts. In Jetpack Compose, onCreate() calls a way named setContent(), and within the default venture, it appears like this:
setContent {
MyFirstComposeAppTheme {
// A floor container utilizing the ‘background’ colour from the theme
Floor(
modifier = Modifier.fillMaxSize(),
colour = MaterialTheme.colorScheme.background
) {
Greeting(“Android”)
}
}
}
setContent() takes a lambda as its parameter, and close to the top of that lambda is a name to a way referred to as Greeting(). You’ll discover its definition instantly after the MainActivity class:
@Composable
enjoyable Greeting(identify: String, modifier: Modifier = Modifier) {
Textual content(
textual content = “Howdy $identify!”,
modifier = modifier
)
}
As you see, Greeting() is the strategy that determines what seems onscreen once you run the app. You also needs to discover the next parts of this technique:
It’s annotated with @Composable. This informs the compiler that Greeting() is a composable operate (or composable for brief), which suggests it receives information and generates a UI aspect in response. One motive to make it clear {that a} operate is composable is that composable capabilities can solely be referred to as by different composable capabilities. setContent() which calls Greeting() is a composable.
It has parameters. As a operate, it has parameters (or, when you favor, it takes arguments). That makes composables versatile, permitting you to move state to them. For those who’re conversant in programming in React, composable parameters are Jetpack Compose’s model of props.
It’s a Unit operate. It has no return worth. As an alternative, it causes a person interface aspect to be drawn onscreen. Useful programming language purists would name this a facet impact; we Jetpack Composers favor to say that composables emit UI parts.
Its identify is a CapitalizedNoun. The conference is that composable operate names are nouns capitalized in PascalCase. It helps distinguish composables from extraordinary capabilities and strategies, the place the conference is to make their names verbs that use camelCase capitalization.
It incorporates a name to a way referred to as Textual content(). Textual content() is certainly one of Jetpack Compose’s built-in composables, and given a string, it emits a textual content view containing that string.