02 Compose - Overview

What is Jetpack Compose?

It is a modern native declarative UI for Android like flutter.

How it works?

It works by conceptually regenerating the entire screen from scratch, then applying only the necessary changes. This approach avoids the complexity of manually updating a stateful view hierarchy.

How to build UI by Jetpack Compose?

you can build your user interface by defining a set of composable functions that take in data and emit UI elements. For example:
a Greeting Composable function, which takes in a String and emits a Text widget which displays a greeting message:

class MainActivity : ComponentActivity()
{
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "World")
        }
    }
}

@Composable
fun Greeting(name: String)
{
    Text(text = "Hello $name")
}

What is Composable function?

1. All Composable functions must have @Composable, this annotation informs the Compose compiler that this function is intended to convert data into UI.
2. Composable functions can accept parameters, which allow the app logic to describe the UI.
3. Composable functions emit UI hierarchy by calling other composable functions.
4. The function doesn't return anything. Compose functions that emit UI do not need to return anything, because they describe the desired screen state instead of constructing UI widgets.
5. In Compose's declarative approach, widgets are relatively stateless and do not expose setter or getter functions. In fact, widgets are not exposed as objects. You update the UI by calling the same composable function with different arguments.
6. Because composable functions are written in Kotlin instead of XML, they can be as dynamic as any other Kotlin code. For example, suppose you want to build a UI that greets a list of users:

@Composable
fun Greeting(names: List<String>)
 {
    for (name in names) 
{
        Text("Hello $name")
    }
}

Composable functions can be quite sophisticated. You can use if statements to decide if you want to show a particular UI element. You can use loops. You can call helper functions. You have the full flexibility of the underlying language. This power and flexibility is one of the key advantages of Jetpack Compose.

What is Recomposition?

It is calling the composable function again with new data. Doing so causes the function to be recomposed--the widgets emitted by the function are redrawn, if necessary, with new data. The Compose framework can intelligently recompose only the components that changed.

Must know when you program in Compose:

1. Composable functions can execute in any order.
2. Composable functions can execute in parallel.
3. Recomposition skips as many composable functions and lambdas as possible.
4. Recomposition is optimistic and may be canceled.
5. A composable function might be run quite frequently, as often as every frame of an animation.

================================================

You can join us in the discord server
https://discord.gg/TWnnBmS
and ask me any questions in (#kotlin-and-compose) channel.

Table of Contents

Previous Class

Next Class