Introduction to Jetpack Compose

What is Jetpack Compose?

It is a modern toolkit for building native UI for Android.

Advantages of Using Jetpack Compose:

• It is written in Kotlin so we don’t need to work with XML layouts anymore.
• It is intuitive and it takes care of the app state changes.

Basic Components of Jetpack Compose:

Composable : functions are the fundamental building blocks for building any user interface. They have an annotation @Composable.

Set Content : is similar to the set Content() method we use onCreate() to pass an XML layout. The difference here is it takes a composable function in order to display the UI.

Preview: is function represented using an annotation @Preview. By using this function you can see the preview of the Composable function.

Modifier : allow us to augment a Composable. We can change the size, behavior. It is basically styling the composable.

Row: will show each child next to the previous child. It is similar to the Linear Layout.

Column: will show each child below the previous child. It is similar to the Linear Layout.

Text: is a built in composable provided by jetpack compose. It allows us to print text on screen. It is like the Textview we use .

These are some of the basic attributes of Compose.

Basic code for Hello Android using compose

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ExerciseTheme {
                Greeting("Android")

            }
        }
    }
}

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

This is the first part in the compose series. In the next part we will go into more detail about the jetpack compose.