Getting Started with Jetpack Compose: An Introduction

Jetpack Compose is a modern Android UI toolkit that makes it easy for developers to create beautiful, natively compiled applications for mobile, web, and desktop. If you’re new to Jetpack Compose, this article will provide you with an introduction to the toolkit and some tips on getting started.

First, let’s talk about what Jetpack Compose is and why you might want to use it. Jetpack Compose is a declarative, reactive UI framework for Android that allows developers to build beautiful, responsive user interfaces quickly and easily. Unlike traditional Android UI frameworks, which use XML to define the layout and appearance of an app, Jetpack Compose uses a Kotlin-based DSL (Domain Specific Language) to define the UI. This makes it easy for developers to create complex UI layouts without having to write a lot of boilerplate code.

One of the biggest advantages of Jetpack Compose is that it allows developers to build responsive UIs that automatically adapt to different screen sizes and device configurations. This means that your app will look great on phones, tablets, and even TVs, without you having to do any extra work. Additionally, Jetpack Compose has built-in support for accessibility, so your app will be accessible to users with disabilities.

Since we saw the advantages of Jetpack compose, we will see disadvantages in using xml layouts
1. All ui components extend a base class called view, which contains 30000 lines.
2. Strange inheritance structure, in the below image see that Button is extended by TextView

3. When coding a page with the view based design approach, we usually code a xml layout, collect various common behaviours for views around styles.xml, and finally we set our ui logic in an activity and or fragment (.kt or .java) file. This approach inevitably causes us to write many lines of code. We also use two different languages ​​while doing this coding (java|kotlin & xml).

One of the other advantage in compose is that, compose uses composition (has — a relationship) while View based system uses (is-a relationship), you can read about a lot in composition vs inheritance in online.

Now that you know a little bit about Jetpack Compose, let’s talk about how to get started. The first thing you’ll need to do is set up your development environment. You’ll need to have the latest version of Android Studio installed, as well as the latest version of the Android SDK. Once you have those installed, we can create a new empty compose activity, Android studio will create a new compose project.

Next, you’ll need to create a Composable function that defines your UI. A Composable function is a special Kotlin function that takes in the current Context and returns a @Composable value that represents your UI. Here's an example of a simple Composable function:

@Composable
fun HelloWorld(name: String) {
    Text(text = "Hello $name!")
}

In this example, the HelloWorld function is a Composable function that returns a Text widget with the text "Hello, World!". This Text widget will be rendered on the screen when the HelloWorld function is called.

Once you have your Composable function, you'll need to call it from your Activity or Fragment to render it on the screen. Here's an example of how you might do that:

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DemoTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    HelloWorld("World")
                }
            }
        }
    }

In this example, the HelloWorld Composable function is called from the onCreate method of the MainActivity class. This will cause the HelloWorld function to be executed, and the Text widget will be rendered on the screen.

As you can see, getting started with Jetpack Compose is fairly straightforward. With just a few lines of code, you can create a simple, responsive UI that automatically adapts to different screen sizes and device.

By using Preview annotation we can polish our UI without need to running the app.