Android Jetpack Compose Quick Overview

Jetpack Compose is a native UI toolkit for Android. It is built to accelerate development. It is faster and easier with less code. We will see how to set up the compose, a basic styling example, and how easily we could create a list in Android using Compose UI. 

Let’s start with creating a new project and ensure you have the latest version of Android Studio (Artic Fox or the latest). Now select the “Empty Compose Activity.” 





Now notice the Main Activity, you will find two composable functions that are annotated with @Composable. These are the compose functions, you can call the compose function either created by you or from Jet Pack Compose library from the compose functions.





Now, also notice in onCreate method we are not passing the XML but passing the compose function.

How to preview a compose function

We can see the compose preview in two ways: running an application on an emulator or annotating a compose function with @Preview annotation. You can see the preview by clicking on the Design or Spit tab on the top right corner.





You can see the preview instantly if that didn’t work click on the Build Fresh button .

Basic styling

Modifier is used to add padding and background etc. Column is used like Liner Layout with vertical orientation.





Android Jetpack



Modifiers are an important part of the Compose framework. They will allow you to decorate, add information to Composables, process user input and add a high level of interaction like making it scrollable, clickable etc. Also there are many other JetPack compose functions from JetPack compose framework that will help you alot to create and style the UI. Also may create your own composable and easy use them across the application.

Listing in Compose

Check the code snippet below that. We can create a listing in Compose with only a few lines of code. We used Lazy Column to create the listing. Lazy Column does not recycle the view as recycler view. Still, it emits newly composable as you scroll up, because it is relatively cheap to create an android view from composable.

Recomposition

Once the UI is drawn on screen, we need to redraw it to change the data on the UI. To do so you have to call the composable function again. Composable functions only recompose the changed component. It doesn’t redraw the whole composable view tree, because it is very costly. 





Check the above code, where we update the count on button text every time a button is clicked.

But on button click, you may notice that count didn’t increase because when the state changes, UI does not update, for this compose provides the tools; you have to use mutableStateOf with remember keyword; remember keyword is used so that compose keeps the counter value in memory and does not reassign back to the variable’s initial value. 

Check the final code below :





Now when you click the button, the text counter also updates to the UI as well. Because when the counter value changes, compose automatically updates the UI.





This is the basic introduction and some necessary concepts of Android JetPack Copomse. JetPack Compose solves many complexities of Android UI creating in whole new ways. It not only robust the development process make UI creation easy but it also come up with new ways that developers need to learn to jump in to create UI with JetPack Compose to get its incredible benefits.