Android Jetpack Compose Tutorial

In this series of Android Compose Tutorials, we will learn how to use Compose Design components in Android Applications with examples.

Get Started with Jetpack Compose

Create New Android Studio Project with Jetpack Console

Composables

In Android Jetpack Compose, a composable is a function that describes a part of the user interface. A composable can be thought of as a self-contained unit that takes in input data and returns UI elements as output.

Compose UI Functions

The following tutorials help us to understand basic composables that we can use to display different types of UI elements.

  • Text This composable is used to display text.
  • TextField This composable is used to take text input from user.
  • Button This composable is used to display buttons, and perform an action when user clicks them.
  • Image This composable is used to display images like PNGs, JPGs, drawables, vectors, etc.
  • Row This layout composable is used to display other composables in a row, horizontally.
  • Card This composable is used to display an elevated card like view.
  • Column This layout composable is used to display other composables in a column, vertically.
  • Divider This composable is used to display a divider line.
  • Spacer This composable is used to display some space between two composables.
  • TopAppBar This composable is used to display top application bar.

Text

TextField

Button

Image

The following tutorials cover displaying images, image manipulations, image animations, image interactions, image resources, custom image composables, etc.

Image Basics

  • Android Compose – Image
  • Android Compose Image – Display image in Image composable
  • Android Compose Image – Load image from URL

Image Interactions

  • Android Compose Image – On Click
  • Android Compose Image – On long press
  • Android Compose Image – Display tooltip on click
  • Android Compose Image – Display tooltip on long press

Other Image tutorials

Card

Row

Column

Spacer

TopAppBar

Lists