Android Jetpack Compose Tutorials

Android Jetpack Compose Tutorials

Welcome to Android Jetpack Compose Tutorials by KotlinAndroid.org.

Android Jetpack Compose is a toolkit used for Android Application development.

Jetpack Compose has composable functions to you define your app’s UI. The following sections takes you through each of the composable functions, or simply called composables.

Scaffold

App bars

  • Android Jetpack Compose – App bar example
  • Android Jetpack Compose – Top App bar
    • Android Jetpack Compose – Small App bar example
    • Android Jetpack Compose – Centered App bar example
    • Android Jetpack Compose – Medium App bar example
    • Android Jetpack Compose – Large App bar example
  • Android Jetpack Compose – Bottom App bar
  • Android Jetpack Compose – App bar title
  • Android Jetpack Compose – App bar navigation icon
  • Android Jetpack Compose – App bar actions
  • Android Jetpack Compose – App bar scroll behavior
    • Android Jetpack Compose – App bar pinned scroll
  • Android Jetpack Compose – App bar colors

Text

The Text composable is used to display text label on the screen.

Android Jetpack Compose Text tutorial gives an introduction to the Text composable.

The following tutorials cover the styling and other aspects of Text composable.

Button

Buttons are used to allow the user to click or press on them and trigger a defined action.

The following tutorials cover different buttons in Jetpack Compose.

  • Android Jetpack Compose – Button
  • Android Jetpack Compose – Filled Tonal Button
  • Android Jetpack Compose – Elevated Button
  • Android Jetpack Compose – Outlined Button
  • Android Jetpack Compose – Text Button

The following tutorials cover the styling and actionable aspects of Buttons.

Switch

Slider

  • Android Jetpack Compose – Slider Example

Chip

  • Android Jetpack Compose – Chip Example

Floating Action Button (FAB)

A Floating Action Button (FAB) is a high-emphasis button that lets the user perform a primary action in an application.

  • Android Jetpack Compose – FAB Example
  • Android Jetpack Compose – Small FAB
  • Android Jetpack Compose – Large FAB
  • Android Jetpack Compose – Extended FAB
  • Android Jetpack Compose – FAB onClick
  • Android Jetpack Compose – FAB container color
  • Android Jetpack Compose – FAB content color

Progress Indicator

  • Android Jetpack Compose – Linear Progress Indicator
  • Android Jetpack Compose – Circular Progress Indicator
  • Android Jetpack Compose – Determinate Progress Indicator
  • Android Jetpack Compose – Indeterminate Progress Indicator
  • Android Jetpack Compose – Current progress
  • Android Jetpack Compose – Progress color
  • Android Jetpack Compose – Progress track color

Card

Card composable is used to portray a single piece of content that distinguishes from other containers.

The following are some of the types of cards based on their appearance.

Dialog

  • Android Jetpack Compose – Dialog Example
    • Android Jetpack Compose – Minimal Dialog
    • Android Jetpack Compose – Dialog with image
  • Android Jetpack Compose – Dialog title
  • Android Jetpack Compose – Dialog text
  • Android Jetpack Compose – Dialog icon
  • Android Jetpack Compose – Dialog on dismiss request
  • Android Jetpack Compose – Dialog dismiss button
  • Android Jetpack Compose – Dialog confirm button

Snackbar

  • Android Jetpack Compose – Snackbar Example
  • Android Jetpack Compose – Snackbar with action

Drawer

  • Android Jetpack Compose – Drawer Example

Lists and Grids

  • Android Jetpack Compose – Display List in Column
  • Android Jetpack Compose – Lazy Lists
  • Android Jetpack Compose – Lazy vertical grid
  • Android Jetpack Compose – Lazy horizontal grid

Image

The Image composable is used to display an image on the screen.

Android Jetpack Compose Image tutorial gives an introduction to Image composable.

The following tutorials cover the styling and other aspects of Image composable.

https://developer.android.com/jetpack/compose/graphics/images/customize

Others