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.
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 Composable Topics
Android Compose – Create a Text Composable
Android Compose Text – Font size
Android Compose Text – Italic content
Android Compose Text – Bold content
Android Compose Text – Padding
Android Compose Text – Font weight
Android Compose Text – Font family
Android Compose Text – AnnotatedString
Android Compose Text – Selectable text
TextField Composable Topics
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 Composable Topics
Android Compose Button Tutorial
Android Compose Button – Height
Android Compose Button – onClick
Android Compose Button – Background color
Android Compose Button – Text color
Android Compose Button – Shape
Android Compose Button – Elevation
Android Compose Button – Disabled
Android Compose Button – Padding
Android Compose Button – Border
Image
The following tutorials cover displaying images, image manipulations, image animations, image interactions, image resources, custom image composables, etc.
Image Basics
Android Compose Image – Display image in Image composable
Android Compose Image – Load image from URL
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
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
Android Compose Card – Set elevation
Android Compose Card – Set background color
Android Compose Card – Set image as background
Android Compose Card – Set content color
Android Compose Card – Set corner radius
Row Composable Topics
Android Compose Row – Fill maximum width
Android Compose Row – Right align content
Android Compose Row – Centre align content
Column Composable Topics
Android Compose Column – Center align content
Android Compose Column – Vertical scroll
Android Compose Column – Fill maximum width
Android Compose Column – Background color
Spacer
TopAppBar Topics
Android Compose TopAppBar – Set background color
Android Compose TopAppBar – Set content color