Introduction to Jetpack Compose

Jetpack Compose is a modern way to build UI for Android apps. Compose uses a Declarative UI approach. You declare everything about how your UI should look using composable functions.

Compose makes it simple to build lists, customize your app using themes, add animation, and test the Ul. How your app looks i.e. the user interface is made possible using the Jetpack Compose, which is designed by the Android team and is open source.

Compose is a part of Jetpack which is a swift library developed by the Android team for mobile app development. With Compose you write your user interfaces with Kotlin. Compose has made it easier to write your user interface with much less code.

In compose the UI component is a composable function that is annotated with compose and it describes how the UI should look like. It comes with built-in layouts which enables developers to build their user interfaces. You can also use built-in composable such as buttons, text fields, text, etc. depending on what you want to build. Composable functions can also receive parameters that can also be used to build the app UI.

In compose, UI compose are immutable meaning there is no way to update them once they are created, instead when the app data has changed and the UI needs to be refreshed, compose automatically executes the composable functions and transfers the new state into a new UI representation. This process is called RECOMPOSITION. To update the UI you need to pass any information as input into a composable. The UI elements are completely controlled by the inputs you pass to a composable function.

Compose is smarted to optimize and skip any work for elements that haven't changed. In this article, you will learn some beautiful concepts about the Jetpack Compose UI and how to implement rows, columns, and basic sizing in Jetpack Compose as a beginner.

Prerequisite

• You must have an Android Studio IDE installed on your personal computer.

• You must have basic knowledge of the Kotlin programming language.

• An emulator running on your Android studio or a USB debugging device.

The Significance of jetpack compose

Unlike the traditional XML approach we formerly used in explicitly building the UI of applications, another reformer which is compose has upped the system by adopting a declarative style of building UI elements. It involves describing how your UI would look based on the current state of your application.

The paradigm in this approach offers several important benefits:

1. Readability and Simplicity

Compose code resembles a description of the UI written in everyday language. This significantly lessens the cognitive strain needed to work with complex UIs and makes it much simpler to understand. Developers can concentrate on the final result rather than the minute intricacies of how to get there.

2. Effective UI Updates

The basic foundation of Compose effectively determines the smallest number of changes required to update the UI. With this optimization, performance and responsiveness are increased because only the essential components are recomposed.

3. Quick iteration and prototyping

Compose declarative architecture enables developers to easily prototype and test out various UI concepts. The iteration process is sped up by making changes to the UI as easy as updating the state or altering a few lines of code.

4. Enhanced testing

With Compose, testing UI components becomes simpler. Writing tests to verify various UI scenarios is made easier because the UI is created based on the application's state.

Exploring the Row and column Components as fundamental layouts in Jetpack Compose

Before diving in, let's understand the concept of the row and column components as fundamental layouts in Jetpack Compose. Rows and columns are composable functions that allow you to position children's composables e.g. text, images, etc. horizontally and vertically.

Similar to linear layouts and relative layouts in XML, rows and columns in compose serve the same function. They handle the positioning, spacing, and arrangement of the UI of your application. If you come from Android XML layouts then what rows and columns do here is just the same as we could do with linear layout in XML.

However, jetpack compose handles the nesting of layout more efficiently using rows and columns.

Row Component and Alignment

The row component positions the child composable such as text, button, image, etc horizontally. The row component is customizable, it distributes the available space evenly among its children by default. Android Studio auto imports the row function for you.

Row {
Text(text = "Hello")
Text(text = "world")
}

We applied two text composables in a row function in the above code. When you run this code, after execution, it will position the text composable horizontally.

The output of the code is shown below

In the image above, the text Composable is positioned horizontally.

Composable elements can also be aligned using the modifier. I will explain more about modifiers in the next unit. We have the vertical alignment and horizontal arrangement for the row component.

• vertical alignment: positions the children's element vertically inside the row component.

• horizontal arrangement: Arrange the children's element horizontally inside the row component.

see the example below:

Row(
modifier = Modifier
.fillMaxSize()
.background(Color.Magenta),
horizontalArrangement = Arrangement.SpaceBetween,


verticalAlignment = Alignment.CenterVertically

){
Text(text = "Hello")
Text(text = "World")
Text(text = "Welcome!!")
}

In the above code, we applied horizontal arrangement and which is set to "Arrangement.SpaceBetween" and the vertical alignment to "Alignment.CenterVertically"

The result after launching the app is below you can see that there is space in between the three texts Composable and they are centered vertically.

Note: There are other properties that we can use for the alignment and arrangement of the row component in Android Studio. You can also play around with other properties Android Studio will display them for you.

It is crucial to understand this arrangement and alignment because you will need these two all the time when creating layouts in compose.

Column Component and Alignment

The column component positions its child element or composables vertically. Like the row component, it disperses space equally among its children by default.

Android Studio automatically imports the column function but if it doesn't, click on the Column function and press alt + enter to import. The column component elements are stacked from top to bottom.

Below is a practical example of the implementation of the Composable column function

Column{
Text(text = "hello")
Text(text = "world")
}

In the above code, we have two text elements that will be positioned vertically on your mobile device. Here is a screenshot of the output when you launch it on your Android studio.

Elements in the column component can also be aligned using the horizontal alignment and the vertical arrangement The alignment of the Column component is just like swapping its properties with the row component.

• horizontal Alignment: positions the children elements horizontally

• vertical arrangement: arranges the children element or items in the vertical direction.

Column(
modifier = Modifier
.fillMaxSize()
.background(Color.Magenta),
horizontalAlignment = Alignment.End,
verticalArrangement = Arrangement.Center


){
Text(text = "Hello")
Text(text = "World")
Text(text = "Welcome!!")
}

In the above code, the horizontal alignment of the column component is set to "Alignment.End" which positions the text elements to the end of the parent layout. Also the vertical arrangement is set to "Arrangement.Center" which positions the text elements to the center. The output after launching the app is shown below.

Basic sizing in Jetpack Compose Android

In compose basic sizing is achieved using the modifier function which is applied in the UI component of your application. Modifiers can be applied to any composable in Jetpack Compose such as text, columns, rows, etc It changes the appearance of your UI elements not just including the sizing. We can also add information with modifiers, for example, some kind of accessibility labels.

You can also make our composable interactable which means clickable, draggable, zoomable, and scrollable.

Using Modifier in Jetpack Compose

Modifiers are functions that are used to modify and design beautiful UIs for your mobile application. Modifiers allow you to make adjustments to the appearance, behavior, and layout components of your app.

Like we have the margin, padding, onclick, font size, style, and text appearance attributes in XML for designing your app UI so modifiers in compose perform the same function. Here are some basic modifiers you will come across as you begin your journey in learning to compose.

• width(): used to set the width of a UI component. This function accepts values in dp(density-independent pixels).

Column(
modifier = Modifier

.width(80.dp) //sets the width of column component to 80dp
.background(Color.Magenta)


){
Text(text = "Hello")
Text(text = "World")
Text(text = "Welcome!!")

}

In the above, code the "width" of the column component is set to "80.dp" and you can also see the text elements positioned vertically inside the “Column Component”

Output

• height(): used to set the height of a UI component. It also accepts values in dp (density-independent pixels). To understand it more clearly let's check the following code.

Column(
modifier = Modifier
.height(150.dp)//sets the height of the column component
.background(Color.Magenta)

){
Text(text = "Hello")
Text(text = "World")
Text(text = "Welcome!!")
}

In the above, code the "height" modifier is set to "150.dp". After launching the app you will get this result.

• background(): used to set the background color of the row or column component as well as the children element or items.

Column(
modifier = Modifier
.width(80.dp)
.height(150.dp)
.background(Color.Red)//this modifier equally set the background of the column component to red

){
Text(text = "Hello")
Text(text = "World")
Text(text = "Welcome!!")
}

In the above code, the "background" color of the column component is set to "Color.Red". After launching the application you will get the result below.

• fillMaxHeight() and fillMaxWidth: The fillMaxHeight() makes the text which is the child element fill the entire available space height. This modifier is useful when you want your elements to expand vertically. The fllMaxWidth() modifier is useful when you want your element to expand horizontally and fill all the remaining space within its parent. Both functions accept values in fractions(f).

    Column(
    modifier = Modifier
    .fillMaxWidth(0.5f)
    .fillMaxHeight(0.5f)
    .background(Color.Magenta)
  
    ){
    Text(text = "Hello")
    Text(text = "World")
    Text(text = "Welcome!!")
    }
  

  In the above code, we set the "fillMaxWidth" and "fillMaxHeight" of the column component to 0.5f which is directly proportional to 50%

• padding(): if you already have some experience with Android XML layout then padding would not be a problem. It is a very known content in building UIs. It pushes the content(column) of the container into the middle. we can of course set padding to one side or two sides. we also have the option to set it just for horizontal or vertical.

Column(
modifier = Modifier
.padding(top = 200.dp, start = 150.dp)
.background(Color.Magenta)

){
Text(text = "Hello")
Text(text = "World")
Text(text = "Welcome!!")
}

In the above code, we set the padding "top = 200.dp" and "start = 150.dp". The column component will move away from the parent with the space of 200.dp and it will also start with the space of 150.dp from the left corner of the parent layout. Here is the output after launching your app.

• offset: which is similar to margin in XML but not the same in jetpack compose. There is no margin in Compose as it is known in XML. You can recreate it with a margin just with padding. offset will offset the element just like the margin does but won't push away from other elements. it always starts from the top left corner of a composable.

• border(): the border modifier is used to add a border around a composable element. The appearance of the border can be customized by specifying its color.

Column(
modifier = Modifier
.padding(top = 200.dp, start = 150.dp)
.background(Color.Magenta)
.fillMaxHeight(0.5f)
.fillMaxWidth(0.5f)
.border(3.dp, Color.Red)// set the width

){
Text(text = "Hello")
Text(text = "World")
Text(text = "Welcome!!")
}

In the above code, the border modifier takes two values which is the "width set to 3.dp" and a custom color set to "Color.Red".

Note: the cool thing about modifiers' properties is they can be applied sequentially ie we can apply the same function multiple times on the same modifier and it will lead to different results (chaining of modifiers)

• spacer: the spacer modifier is used to add space between composable. You can specify the desired amount of space using the dp parameter when applying the spacer modifier.

Column(
modifier = Modifier
.background(Color.Magenta)
.fillMaxHeight(0.5f)
.fillMaxWidth(0.5f)


){
Text(text = "Hello")
Spacer(modifier = Modifier.height(50.dp))
Text(text = "World")
Spacer(modifier = Modifier.height(50.dp))
Text(text = "Welcome!!")
}

In the above code, we added a spacer modifier between three texts Composable by setting the "height" to "50.dp". The output after launching your app is shown below

• clickable: use to make our composables interactable. clickable comes with a lambda function. it is just like our normal click listener in Java, but we also have a click effect. when we click on the element you will see a click effect.

Column(

){
Text(text = "hello", modifier = Modifier.clickable { })
Text(text = "world", modifier = Modifier.clickable { })
}

We also have zoomable, scrollable, draggable, and lots more. you can explore so much more about these when you apply what you have learned.

Conclusion

Jetpack compose has made the development of Android UIs effortlessly using its declarative approach.

In this article, I have exhaustively explained some basic concepts you will come across as a beginner in Jetpack Compose.

Understanding this concept is very crucial as they are fundamental in building UIs using the modern UI Compose. Putting these basic concepts into practice over time will enable you to build beautiful and swift UIs for your Android application.

Resources

Android Jetpack Compose Course

Kotlin Basic Documentataion