Jetpack Compose uses the declarative paradigm of programming and thus it converts our app state to UI and this happens as first it listens to the app state and then does the composition of elements. Once the composition is done, it creates the layout of elements composed and then finally draws the element which results in creating of the UI of you app.
Composable functions are the basic building block of Compose. A composable function is a function emitting Unit that describes some part of your UI. The function takes some input and generates what’s shown on the screen and do not return anything because they describe the desired screen state instead of constructing UI widgets as explained above.
When the user interacts with the UI, the UI raises events such as onClick(). Those events should notify the app logic, which can then change the app’s state. When the state changes, the composable functions are called again with the new data. This causes the UI elements to be redrawn — this process is called recomposition and it is described in the graphical representation below.
Now to let you get started, the Jetpack Compose uses only 3 basic layouts or say, the building blocks. And those are —
- Column layout — It arranges the UI defined in it vertically.
- Row layout — It arranges the UI defined in it horizontally.
- Box layout — You can compare this with a frame layout of Android XMLs. In this each Composable will be stacked one above the other.
Conclusion
In this section, we saw that how Jetpack Compose works and how it actually transforms our app state to UI. Also, we saw that how Composables emits the units and noticed how the interaction works in Jetpack Compose. And finally we learnt the basic building blocks on Jetpack Compose.
Now that we are all set, if you want to know about the Advantages of using Jetpack Compose or How to start building your Android application using Jetpack Compose, please refer to my other articles on Jetpack Compose.
