Jetpack compose unpacked — 1

I am crafting a series dedicated to Jetpack Compose, the innovative Android UI library that, while no longer brand new, continues to gain rapid adoption within the Android ecosystem.

So today, I will just try to make you understand what is this new library and how is it different from traditional XML approach?

Reading this article will help you in understanding the basics of Jetpack compose, why & how to start using it.

There are two ways we can code UI screens.

1. Imperative way
2. Declarative way

What is this Imperative & Declarative way? The Imperative way, currently prevalent in Android app development, involves using XML to define the user interface and then crafting the corresponding logic in Java or Kotlin.

On the other hand, the Declarative way, exemplified by Jetpack Compose, presents a paradigm shift in UI development. This approach focuses on declaring the desired UI state, allowing the framework to handle the underlying complexities, and streamlining the development process. In the realm of web development, the adoption of the declarative approach to UI development occurred much earlier.

So now first let’s understand what this both fancy word actually means?

Consider the scenario of planning a visit to a mall for shopping, where you have two options for transportation: using your own car or booking a cab. Let’s focus on the imperative approach, such as deciding to use your car. The process involves several manual steps — retrieve your car from the parking, clean and check its fuel, drive to the mall location, find parking, and finally, enter the mall. This entire sequence represents an imperative approach, where you take on the responsibility of executing each step to reach the goal, defining how to achieve the desired outcome of reaching the mall.

Choosing your own method of driving to mall

Now, let’s explore the second method, opting for a cab by booking through a service like Uber. In this scenario, you simply open the Uber app, specify your destination, and the rest unfolds seamlessly. A car arrives at your location, transports you to the mall, and the task is complete. Here, you only need to declare your destination or goal — where you want to go — and the system takes care of the details. This exemplifies the declarative way of achieving desired goals, where you define the outcome without having to manage every step of the process.

Choosing Uber or any other cab services to visit anywhere.

Hope you understood the difference between Imperative and Declarative ways of programming.

Jetpack Compose embodies a declarative approach to building and developing the UI. In this paradigm, the UI hierarchy is constructed through composition, differenct from the Views framework, where inheritance was the key building block. With Compose, you simply declare what you want, and the rest is seamlessly handled by Composable functions. This shift in methodology allows developers to focus on expressing the desired UI state, freeing them from the complexities of managing UI elements through inheritance.

@Composable
fun MyName(){
  Text("My name is Abhas Kumar", color = Color.White)
}

UI is defined as a function of the current state in compose and it is data dependent.

Whenever there’s a change in data, Composable functions are invoked again, ensuring that only the necessary UI elements are rendered. This dynamic approach optimizes app performance and memory utilization by rendering only the components that require modification. The ability to selectively update UI elements through Recomposition is a powerful aspect of Jetpack Compose, enhancing both efficiency and responsiveness in your application.

ComponentActivity() is the base class that enables composition in Compose.

I am going to discuss three important composable functions that is needed to build any kind of basic layout using Jetpack compose.

1. Column() — This Composable function facilitates the vertical arrangement of multiple UI composables.

Arrangement & Aligment of items in Column.

Geometrically, the main axis of Column() is aligned with the Y-axis. This alignment corresponds to the vertical arrangement of composables within the Column(), allowing for a clear definition of their layout in a top-to-bottom manner.

2. Row() — This Composable function is employed to horizontally arrange multiple UI composables.

Arrangement & Aligment of items in Row.

Geometrically, the main axis of Row() aligns with the X-axis. This alignment dictates the horizontal arrangement of composables within the Row(), allowing for a straightforward definition of their layout from left to right.

Arrangement of items in Row & Column

3. Box() — This Composable function is utilized to stack UI composables on top of each other in a layered fashion.

Official depiction of Row, Column & Box Composables

While there are numerous aspects left to explore, such as modifiers, state management, alignment, and various layout arrangements, the primary objective of this article is to initiate a deep dive into the realm of Jetpack Compose. This series will keep going on.

Connect with me on Linkedin — https://www.linkedin.com/in/abhas-kumar-96872b25b/

Connect with me on Twitter — https://twitter.com/heyabhas