Jetpack Compose Tutorial for Android: Getting Started

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 @Composables.

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 ViewHolders or Adapters 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 RecipeCards. 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:

1. Just like before you’re using a Column, but this time you’re telling it to fill all available spacing by specifying a Modifier with fillMaxSize().
2. You’re then using the TopAppBar @Composable to add a toolbar. Note that instead of just passing a String 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 simple Text will suffice for the content of your toolbar.
3. Finally, you’re adding your RecipeList to the column to sit below the TopAppBar

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.