Jetpack Compose Tutorial: Learn to Build Android UIs Easily
Find how to create modern and beautiful Android apps with our Jetpack Compose tutorial, designed to make learning UI development simple and enjoyable for everyone
Google introduced Jetpack Compose at its I/O 2019 developer conference.
Compose is a modern UI toolkit for Android that utilizes a declarative approach. It replaces the traditional view-based system, becoming an integral part of the Android development landscape.
This guide provides a collection of Compose examples designed for beginners with prior Android experience who are eager to learn and utilize Compose in their projects.
What is a Composable?
Composable functions are the fundamental building blocks of Jetpack Compose. They are standard Kotlin functions enhanced with the @Composable
annotation.
While superficially they may appear to accept input and produce output, their true nature involves registering actions that contribute to the construction of an in-memory representation of the UI tree. This process of registering actions is referred to as "emitting."
Properties of Composable Functions
Implicit Context:
- Every
@Composable
function receives an implicit instance of theComposable
context as a parameter. - This context is crucial for managing and rendering the UI tree.
- The context is automatically passed down to child composables within the hierarchy
@Composable fun DisplayName(name: String, sirname: String) { Column(modifier = Modifier.padding(16.dp)) { Text(text = name) Text(text = sirname, style = MaterialTheme.typography.subtitle2) } } |
Let's take a simple function with @Composable annotation, for this composable function jetpack compose compiler will add Composable parameter implicitly for each composable call on composable tree
So this will be internally looks like below
fun DisplayName(name: String, sirname: String, $composer: Composer<*>) { $composer.start(111) Column(modifier = Modifier.padding(16.dp), $composer) { Text( text = name, $composer ) Text( text = sirname, style = MaterialTheme.typography.subtitle2, $composer ) } $composer.end() } |
Learn more: RRTutors | Flutter | Python | Android