Requires a pro subscription Pro

Jetpack Compose Primer

2 versions

Get an early introduction to the Jetpack Compose toolkit for creating Android user interfaces in Kotlin code using Android Studio 4.0 Canary 6. By Joe Howard.

Login to leave a rating/review
Save for later

Who is this for?

This course is for Android developers who are interested in getting an early start with the Developer Preview of the Jetpack Compose toolkit from Google for building user interfaces in Kotlin code. It expects you to be familiar with the basics of Android development, Android Studio, and Kotlin programming.

Covered concepts

  • Composable functions
  • Compose preview
  • Compose layouts
  • Flexible rows
  • Using @model for state
  • Adding an App Bar
  • Showing a list of items using Compose

Part 1: Jetpack Compose Primer

Toggle description

Learn about the origins of the new modern toolkit for building Android UI, Jetpack Compose, including comparisons with Flutter and SwiftUI.

Toggle description

See the sample project that will be built using Jetpack Compose, and explore and run the starter project.

Toggle description

Use the @composable annotation to write your first composable function, and learn about MaterialTheme.

Toggle description

See how to preview your Jetpack Compose user interfaces right in Android Studio, without the need to build and run your app on a device or emulator.

Toggle description

Use Row to place separate items along a horizontal axis, and also learn about using images, containers, alignment, and spacing.

Toggle description

Switch to FlexRow for greater control over how the items in a horizontal layout expand to fill the available horizontal space.

Toggle description

See how to manage state in your Jetpack Compose user interfaces using the Model annotation, and display real data in the running app.

Toggle description

Refactor the members screen to a more standard set of composable functions, then add a TopAppBar to the layout.

Toggle description

See how to use VerticalScroller and Column to display multiple items in a list, and add a divider between the items.