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

TextField in Compose
Read value entered in TextField in Android Compose
Set label for TextField in Android Compose
Disable Autocorrect for TextField in Android Compose
Enable Autocorrect for TextField in Android Compose
Set TextField for Password in Android Compose

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 Manipulation

Image Styling

Android Compose Image – Set rounded corners
Android Compose Image – Set cut corners
Android Compose Image – Set circular shape
Android Compose Image – Border
Android Compose Image – Gradient border
Android Compose Image – Custom aspect ratio
Android Compose Image – Scale image

TutorialKart

Android Jetpack Compose Tutorial