Jetpack Compose Basics for Beginners

4 min readDec 11, 2021

Why we need Jetpack Compose?

Before starting learning Jetpack Compose Basics we should know why we need to know about Jetpack Compose Basics as we already have android UI in place?
Reason is there are many android UI development issues which developer face like :

a.) Android UI libraries issues depend on new releases of OS versions.

b.) There are multiple design problems in the legacy code.

Compose overcomes these challenges

You won’t be editing any XML layouts or using the Layout Editor. Instead, you will call Jetpack Compose functions to say what elements you want, and the Compose compiler will do the rest.

Faster and Easier — It makes building Android UI faster and easier
Intuitive — With Compose, you build small, stateless components that are not tied to a specific activity or fragment.
Written in Kotlin — The application written using Jetpack Compose uses 100 % of Kotlin programming language.
With Jetpack Compose, developers can add new features without changing the OS version. You can rely on them working, regardless of the operating system on the user’s device.
Accelerate Development — Compose is compatible with all your existing code: you can call Compose code from Views and Views from Compose. To add to this, the code you’re writing is written only in Kotlin, rather than having it split between Kotlin and XML.
Compatible — It is easily compatible with the existing views present in Android.

Jetpack Compose build native UIs with less code with less developing time than other toolkits.
It simplifies and accelerates UI development on Android, powerful tools, and intuitive Kotlin APIs.
Jetpack Compose describes what the UI should present — not how UI elements should be constructed. The how part is left to the runtime Jetpack Compose library to work out.

Focus on what to do rather how to do…

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.
It is built around composable functions.
You can customize Jetpack Compose implementation of Material Design, if that doesn’t suit your needs, you can build a custom design system using Compose’s public APIs.

Composable functions let you define your app’s UI programmatically by describing how it should look and providing data dependencies, rather than focusing on the process of the UI’s construction.
While Composable functions can call other standard functions, Composables themselves can only be called from other Composables.

Now let’s see how Jetpack Compose works
To create a composable function, just add the @Composable annotation to the function name.
Composable functions are the basic building blocks of Compose
The function takes some input and generates what’s shown on the screen
Let’s understand with code block

We need to add @Composable annotation and Composable functions must have this annotation.
This annotation informs the Compose compiler that this function is intended to convert data into UI.
Compose functions that emit UI do not need to return anything, because they describe the desired screen state instead of constructing UI widgets.
In this code our widget accepts a string so it can greet the user by name.
The function displays text in the UI. It does so by calling the Text() composable function, which actually creates the text UI element. Composable functions emit UI hierarchy by calling other composable functions.

In Compose, you build a UI hierarchy by calling composable functions from other composable functions.
In Composable we use UI as function not as object.

View/XML — — -> UI as Object
Compose — — — -> UI as Function

This code creates two text elements inside the content view.
The Column function lets you arrange elements vertically. Add Column to the Greeting() function.
We can also change text color and font size.

PreviewGreeting() function isn't called anywhere, but Android Studio adds a preview window. This window shows a preview of the UI elements created by composable functions marked with the @Preview annotation. To update the previews at any time, click the refresh button at the top of the preview window.

Wasn’t that easy to understand and implement? Pls try it out yourself and let me know how it goes.
It was only for basic and beginners in next Jetpack Compose series blog we will go through Compose Layout basic in detail.

Happy Reading :)