Jetpack Compose Tutorial for Android: Getting Started
In this Jetpack Compose tutorial, you’ll learn to use the new declarative UI framework being developed by the Android team by creating a cookbook app. By Alex Sullivan.
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Contents
Jetpack Compose Tutorial for Android: Getting Started
30 mins
- Why Build With Jetpack Compose?
- It’s Declarative
- It’s Independent
- It’s, Ahem, Composable
- Getting Started
- Getting Up and Running With Jetpack Compose
- Dipping Your Toes Into Jetpack Compose
- Creating a Composable Function
- Previewing a Composable
- Laying Out Composables
- Using the Column Composable
- Introducing ComposableCookBook
- Creating a Recipe Composable
- Adding an Image to the RecipeCard
- Listing Ingredients
- Rounding the RecipeCard’s Corners
- Improving the Recipe Card’s Look
- Adding Padding to the Recipe Card
- Creating a List of Recipes
- Wiring Everything Up
- Adding a Toolbar
- Where to Go From Here?
Adding Padding to the Recipe Card
To add the padding to your card, wrap the title and ingredient Text()
inside another Column()
and add the following modifier:
Column(modifier = Modifier.padding(16.dp)) {
Text(recipe.title, style = MaterialTheme.typography.h4)
for (ingredient in recipe.ingredients) {
Text("• $ingredient")
}
}
In addition to using modifiers to control width and height, you can also use them to add padding to different @Composable
s.
Rebuild the preview. You should see a beautiful recipe card:
Your recipe card looks great now. It’s time to give your users the ability to make lists of their favorite recipes.
Creating a List of Recipes
Normally, to make a list you’d use something like a RecyclerView
. In Jetpack Compose, you can use the LazyColumnFor
@Composable
to achieve a scrolling list of lazily instantiated items just like you would with a RecyclerView
, but in only a fraction of the code!.
To start putting together your list of recipes, right-click on the root code package once more, and select New ▸ New Kotlin File/Class. Then select File from the list and type the name RecipeList. Finally, add RecipeList()
to the file:
@Composable
fun RecipeList(recipes: List<Recipe>) {
LazyColumnFor(items = recipes) { item ->
RecipeCard(item)
}
}
Make sure to import the missing references. The LazyColumnFor
@Composable
accepts a list of items and an @Composable
lambda that takes one argument – a single item within your list. You can then use that item to build up your scrolling list. No ViewHolder
s or Adapter
s to be found here!
Now that you have a composable to show your list of recipes, it’s time to wire everything up in your MainActivity
and see your hard work on a device!
Wiring Everything Up
Navigate to MainActivity and replace the contents of setContent()
with the following:
RecipeList(defaultRecipes)
Build and run. You’ll see a mouth-watering list of delicious foods.
The app is looking good, but you can’t really differentiate the individual recipe cards. To clean this UI up, you’ll need to add some padding between items.
Open the RecipeCard file again and update the RecipeCard
function to pass a Modifier
in to your Surface
:
fun RecipeCard(recipe: Recipe, modifier: Modifier) {
Surface(shape = RoundedCornerShape(8.dp), elevation = 8.dp, modifier = modifier) {
...
}
}
Then update the DefaultRecipeCard
preview method to pass in a modifier:
@Composable
@Preview
fun DefaultRecipeCard() {
RecipeCard(defaultRecipes[0], Modifier.padding(16.dp))
}
Next up, open the RecipeList file and add a 16dp padding modifier to your RecipeCard
s. The RecipeList
method should now look like this:
@Composable
fun RecipeList(recipes: List<Recipe>) {
LazyColumnFor(items = recipes) { item ->
RecipeCard(item, Modifier.padding(16.dp))
}
}
Run the app again. You should see a well spaced list of delicious foodstuffs.
The only thing the app is now missing is a toolbar! You’ll add one as your final step.
Adding a Toolbar
Having a Toolbar is the default behavior of Android applications, so it’s important to include it! Replace the contents of setContent()
in the MainActivity file with the following:
// 1
Column(modifier = Modifier.fillMaxSize()) {
// 2
TopAppBar(title = {
Text("ComposableCookBook")
})
// 3
RecipeList(defaultRecipes)
}
Here’s a breakdown of the code:
-
Just like before you’re using a
Column
, but this time you’re telling it to fill all available spacing by specifying aModifier
withfillMaxSize()
. -
You’re then using the
TopAppBar
@Composable
to add a toolbar. Note that instead of just passing aString
to the toolbar, you instead pass another@Composable
. This gives you a huge amount of control over how to display content in your toolbar! For this app, a simpleText
will suffice for the content of your toolbar. -
Finally, you’re adding your
RecipeList
to the column to sit below theTopAppBar
Build and run and you’ll see a fancy new toolbar at the top of ComposeableCookBook.
Congratulations! You’ve built your first app using Jetpack Compose.
Where to Go From Here?
You’ve now experienced some of the latest and greatest changes coming to the world of UI on Android. But you’ve only scratched the surface of what Compose has to offer, and many of these APIs are bound to change dramatically before the library is stable.
In this tutorial, you learned about:
- The philosophy and motivation behind Jetpack Compose.
- How to build a composable using the
@Composable
annotation. - How to preview a composable using the
@Preview
annotation. - The basics of laying out composables using the
Column
composable. - How to add theme styling to your components using MaterialThemes.
To learn more about Jetpack Compose, check out our video course on this topic.
You can also see some of the latest and great elements in action by browsing the (JetNews sample app, which some of the authors of Jetpack Compose develop and maintain.
We hope that you’ve enjoyed this tutorial! If you have any questions or comments, feel free to join the forum discussion below.