Jetpack compose — Introduction
Jetpack Compose is a modern declarative UI Toolkit for Android. Compose makes it easier to write and maintain your app UI by providing a declarative API that allows you to render your app UI without imperatively mutating frontend views.
So before diving into the new Declarative UI programming approach we need to understand Imperative UI Programming, which is currently following android app development. This means the code reacting to UI events, here design focuses on the how rather than the what. For example, using XML, you declare the look of your UI, but you implement the behavior in a separate program code in Java or Kotlin.
Jetpack compose is clearly articulated as the future of native Android 💡
Jetpack Compose transforms the state into UI by following the Declarative UI concept(No XML similar to SwiftUI). Here your code describes what the Ul should look like for a given state. No need for extra syncing with code block and UI.
The great news is that you can start implementing Compose on your existing code by replacing a simple view and gradually implement the entire app as shown in the picture.
Jetpack compose — Hello World App
Now we can have a look at the practical side. Currently, when the time of writing this article, Compose is not available with the stable Android studio so you need to download Android Studio Arctic Fox from here. If you need you can keep your stable version along with the preview.
Studio -> New Project; choose “Empty Compose Activity”
In the next New Project window, you need to provide the project name and package name. Once you give the same click on the Finish button.
Now once the studio generates the project you can open the “build.gradle” file under HelloWorld -> app. The file contains three new dependencies for the Jetpack compose library. These dependencies help you to use Compose feature in your project. You can also add these dependencies to your existing project if you want to enable Jetpack Compose there(Make sure you’re using Kotlin 1.4.32 or newer in your project).
implementation “androidx.compose.ui:ui:1.0.0-beta07” — Tooling support (Previews, etc.)
implementation “androidx.compose.material:material:1.0.0-beta07” — Material design support
implementation “androidx.compose.ui:ui-tooling:1.0.0-beta07” — Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
Now you may wonder why there is no layout XML file found under the resources, that's the power of Declarative UI programming. Here the UI we are declaring on the MainActivity.java file. When we open the activity class there will be two windows, one is code and the other is the preview of your code. You can toggle between them by using the buttons available in the right top corner.
Now let us have a look at the code
The first thing here may we noted that we are extending ComponentActivity instead of AppCompactActivity/Activity. According to the developer documentation, ComponentActivity is a Base class for activities that enables the composition of higher-level components.
@Compose — All the composable functions are annotated with “@Compose” annotation in this method. This tells the Compose compiler that your function should be treated as a UI component.
@Preview — To get a live preview we need to add @Preview tag before @Composable tag and the function must have something to render.
I have tried to make this intro simple as possible. If you find out something useful in this article, don’t forget to give some👏🏼
What’s next? Widgets(Text, Image, CheckBox) in Android Jetpack compose
