Android — Create a Jetpack Compose and Data Binding App Part 2
In this tutorial, we will create an App that uses Jetpack Compose and the Data Binding library.
1. Create a new Jetpack Compose Application
First, open Android Studio and then click on New so you should see this screen.
After choosing Empty Compose Activity, we need to click Next and then we will see this screen.
I called our app hello_compose and I chose Android 7.0 as the minimum SDK, but you can choose a newer version.
Click on Finish e we will see this screen.
The MainActivity class is the principal class where we are going to create our screen.
2. Start to Code our UI
First, we need to create two Text components that will contain the Counter label and the Value of the counter.
We created a @Composable function in which we have defined our Texts.
This function has, as an input parameter, a string value (Line 2) which will be used by the Text component (Line 4),
Let’s include this Composable in our MainActivity’s onCreate function.
In the myCounterRow Composable function, we’ve passed “0” as the input parameter, so this will be our first counter value.
If you run our App, you will see this:
3. Using Row Component
To have a better UI we should put our Text components inside a Row.
We’ve defined a Row component in which we have inserted (inside brackets) our Text components.
In its modifier, we’ve defined the style of this Row component:
- The width will cover the width of the screen (Line 4).
- The height has a 0.5f value, covering half of the screen's height (Line 5).
- The background has a green color (Line 6).
- By placing Arrangement.SpaceAround in the horizontal arrangement we can have the two texts equally spaced centrally (Line 7).
- By setting Alignment.CenterVertically we align our elements, that are inside Row, centrally on the vertical axis (row 8).
4. Adding Buttons
Let’s add two Button components, one to increase the counter value and one that will reset it.
These two Composable functions accept a function as an input parameter, and because of that, these two Buttons are Stateless functions that have a Callback function.
5. Create the mutable Counter variable
Create a Composable function in which we define the Counter variable and the function that will modify it.
In Line 3, we’ve created a variable Counter which uses remember API.
The variable is an Integer Mutable, whose initial value is 0.
In Line 4 we’ve defined the onResetClicket function which will set the value of the Counter as 0.
In Line 5 we’ve defined the onIncreaseClicked function which will increase the value of the counter by 1.
6. Let’s Merge all Components
Put inside the ourScreen function all out Composable components that we’ve defined previously.
In Line 7 we’ve passed, as the input parameter of myCounterRow composable, the value of the counter which can be mutable.
When the value change, Android will recreate myCounterRow automatically with the new value.
In Lines 15 and 16 we’ve passed the onIncreaseClicked and onResetClicked functions to their relative composable.
So we’ve defined that when we click on one of these buttons they will call the relative callback function that we’ve passed as a parameter.
In the other Lines, we’ve defined a little layout to have a better UI 🧐 🧐 🧐.
END! 👏 👏 👏
We’ve finished the application which uses Jetpack Compose and Data Binding.
Here is the Final Code :
https://gist.github.com/munsra/87a891c976b5cfc96272c7d1c87d10e6
If you want to see the first part, click here!
You can follow me for more tutorials like this!
If you have any questions or suggestions, just write in the comment session!
See you soon! Thank you! 😃
