Android — Create a Jetpack Compose and Data Binding App Part 1

This tutorial will show the basics of Jetpack Compose and Data Binding.

What is Jetpack Compose?

Jetpack Compose is a declarative framework we can use to create a Composable Function to render UI components.
It replaces the XML language as a UI component builder.

The idea winks the Dart language which is used to create Cross Platform applications in Flutter. In addition to Google, Apple introduced SwiftUI, a very similar structure language.

What are the benefits?

Every graphics component is a @Composable Function(just like widgets in Flutter).
They are methods within which we describe our component.

In this way, we can reuse our components also in other projects by just copying them.

Comparison with the XML layout

Using XML we can describe a Text using this code:

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World" />

Using Jetpack Compose we will have instead:

Text("Hello World")

As you can see, the code in Jetpack Compose is more short and simple.

Reusability of code

Using XML we can use the tag <include> to reuse the layout of the file hello_world.xml which has the code of the previous example.

<androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is an old layout" />

        <include
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            layout="@layout/hello_world" />

</androidx.appcompat.widget.LinearLayoutCompat>

Using Jetpack Compose we will have instead:

Column() {
  Text("This is the new layout")
  helloWorldText()
}

Here, the helloWorldText() function contains the code that we’ve described in the previous example including it inside a @Composable function.

@Composable
fun helloWorldText(){
    Text("Reset")
}

Also in this case we can see that Jetpack Compose is helpful to reuse the code.

What’s Data Binding?

Data Binding is a library that allows you to bind UI components in your layouts to data sources in your app.

Which are the benefit?

When we bind a UI component to a variable, we can see any updates without updating the value programmatically because we’ve already linked our variable to the component.

In this example, we’ve created a variable counter, which is mutable and linked to a Text component (line 5).
Below this component, we have a Button where its click event will increase by one the value of the counter variable and we can see the new value directly to the Text component.

State in Jetpack Compose

The state of a @Composable function changes when we change a value inside it.

In the previous example, we created a Stateful Composable Function, because inside it we manage the representation and value change of a variable.

In this approach, our code IS NOT 100% REUSABLE, because it can manage only the variable described inside it.

This goes against the principle of Jetpack Compose which is useful when the code is more reusable than before.

To change the function into a Stateless Composable Function (which IS 100% REUSABLE), we can do this:

We’ve extracted the counter variable and the onClick function to move the logic outside our @Composable component.

So the onClick event will increase the value of the counter in this example or can decrease the value for example, but the Composable function mutableExample will remain the same so it’s more REUSABLE.

CONGRATULATIONS! 👏 👏 👏

In this example, we’ve seen the basics of a Jetpack Compose application which uses Data Binding.

In the next part, we are going to create a Jetpack Compose application that uses Data Binding from Scratch.
Just click below here!

Android — Create a Jetpack Compose and Data Binding App Part 2

If you have any questions or suggestions, just write me!
See you in the next tutorial!