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

• Android Jetpack Compose – Scaffold example
• Android Jetpack Compose – Scaffold top bar
• Android Jetpack Compose – Scaffold bottom bar
• Android Jetpack Compose – Scaffold FAB (Floating Action Button)

App bars

• Android Jetpack Compose – App bar example
• Android Jetpack Compose – Top App bar
• Android Jetpack Compose – Small App bar example
• Android Jetpack Compose – Center Align TopAppBar
• Android Jetpack Compose – Medium App bar example
• Android Jetpack Compose – Large App bar example
• Android Jetpack Compose – Bottom App bar

TopAppBar

• Android Jetpack Compose – TopAppBar Title
• Android Jetpack Compose – TopAppBar Title Color
• Android Jetpack Compose – TopAppBar Background Color
• 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.

• Android Jetpack Compose – Text size
• Android Jetpack Compose – Text color
• Android Jetpack Compose – Text bold
• Android Jetpack Compose – Text font weight
• Android Jetpack Compose – Text font family
• Android Jetpack Compose – Text italic
• Android Jetpack Compose – Text maximum number of lines
• Android Jetpack Compose – Text overflow
• Android Jetpack Compose – Text selectable
• Android Jetpack Compose – Text letter spacing
• Android Jetpack Compose – Text line height
• Android Jetpack Compose – Text center align
• Android Jetpack Compose – Text underline
• Android Jetpack Compose – Text background color

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.

• Android Jetpack Compose – Button onClick
• Android Jetpack Compose – Button disabled
• Android Jetpack Compose – Button background color
• Android Jetpack Compose – Button text color
• Android Jetpack Compose – Button content padding
• Android Jetpack Compose – Display Toast on Button click

Switch

• Android Jetpack Compose – Switch Example
• Android Jetpack Compose – Switch checked
• Android Jetpack Compose – Switch on checked change
• Android Jetpack Compose – Switch disabled
• Android Jetpack Compose – Switch colors
• Android Jetpack Compose – Switch thumb content
• Android Jetpack Compose – Switch checked thumb content
• Android Jetpack Compose – Switch unchecked thumb content

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 colors

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.

• Android Jetpack Compose – Card Example
• Android Jetpack Compose – Card elevation
• Android Jetpack Compose – Card colors
• Card Composable – Container color
• Card Composable – content color
• Card Composable – Disabled container color
• Card Composable – Disabled content color
• Android Jetpack Compose – Card onClick
• Android Jetpack Compose – Card width and height

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

• Android Jetpack Compose – Filled Card
• Android Jetpack Compose – Elevated Card
• Android Jetpack Compose – Outlined Card
• Android Jetpack Compose – Card vertical scroll

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

• Android Jetpack Compose – Image border
• Android Jetpack Compose – Circular Image
• Android Jetpack Compose – Circular Image with border
• Android Jetpack Compose – Crop image
• Android Jetpack Compose – Image custom aspect ratio
• Android Jetpack Compose – Invert colors of image
• Android Jetpack Compose – Adjust image brightness
• Android Jetpack Compose – Adjust image contrast
• Android Jetpack Compose – Display image as grayscale
• Android Jetpack Compose – Blur image

Others

• How to define a composable function in Android?