Jetpack Compose Basics

When we talk basics of Jetpack Compose, we need to understand the building blocks. What small pieces help to build a composable function?

There are so many blocks like Box, Column, Row, LazyColumn, etc. Let’s list all of them in order so we can learn about them in depth.

• How to make a composable function

• Building blocks Box, Column, Row.

• How to create previews

• Build your first compose UI

• 
  

There are very basic ones. In the coming blog, we will talk about more. So let’s get started

How to make a composable function

Composable functions are similar to normal function

fun example() {
  // write your code here
}

the only difference is they are annotated with @Composable , any function with annotation @Composable become composable functions.

Note: You can call composable functions inside the scope of the composable function.

@Composable
fun example() {
  // write your compose UI
}

Hey, You have completed the first step of building composable UI. Let’s go explore the next step.

Building blocks Box, Column, Row

I mentioned in Day 2 blog about the composable blocks and how should we approach and make the Design into Composable function.

It is not possible to learn everything about the building blocks but we can at least go through basic implementation and what are their significance because having basic knowledge gives you a strong base. So let’s see each of them one by one.

Box gives us the ability to stack the UI components on each other. When we convert the design into compose. It is very common we have to stack the components on each other and align them top, bottom, left, or right according to available box space.

let’s understand with an example

In the above design, we have two UI component - Thumbnail — Image - Status — Image

If we have to implement this design so let’s apply 1, 2 3 D Rule we learnt in previous blog - We already found the components - Let’s put this in a 2D plan as you will learn more and more about the compose layout you can easily guess what layout is best for the 2D plan. here Box is the best because we have two Images and both stack on each other and status image has right bottom alignment that can be easily achievable using Box.

@Composable
fun BoxScreen(artist: Artist) {
    Box {
        Image(bitmap = thumbnail.image, contentDescription = "Thumnail image")
        Icon(Icons.Filled.Check, contentDescription = "Check mark")
    }
}

So here we learned that if we need to stack the components on each other Box what we need.

Column

Jetpack compose column

Use Column, When we want to place components on our 2D plan vertically, and mainly every component is uniquely designed.

Let’s see an Example

@Composable
fun ColumnScreen() {
    Column {
        Text("Alfred Sisley")
        Text("3 minutes ago")
    }
}

Wherever you have to put the compose component vertically we go with Column.

Row

Use Row whenever we want to place components horizontally. Whenever you are writing on 2D plan and you have place sub-component parts horizontally then Row is your friend.

Let’s see an example

@Composable
fun RowScreen() {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Image(bitmap = thumnail.image, contentDescription = "thumbnail image")
        Column {
            Text("Alfred Sisley")
            Text("3 minutes ago")
        }
    }
}

Wherever you see the horizontal alignment of components, Row is your friend.

How to create @Preview

Whenever you create any UI using any software or language, The most important part is How it gonna look on the physical real device. Yes, I am talking about testing the ui real device so you can make sure whatever you built is the best.

In compose @Preview annotation is the GOD. This feature gives us the superpower of building previews on runtime, yes you heard right on runtime. Here you added a component in your compose function here on the right side you can see how it gonna look.

is it cool? Yes, it is because it saves us a lot of development time.

Let’s see an example

To create a preview of any composable function we only need to create another function and annotate it with @Preview and we are done.

While creating a preview, Usually we add a postfix preview on the function name and create new function but you can give any name.

@Preview
@Composable
fun RowScreenPreview() {
    RowScreen()
}

and We are done it will generate the preview for us.

Build your first compose UI

Congratulations You have created your first composable function and also generated the preview of the composable.

@Composable
fun RowScreen() {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Image(bitmap = thumnail.image, contentDescription = "thumbnail image")
        Column {
            Text("Alfred Sisley")
            Text("3 minutes ago")
        }
    }
}

@Preview
@Composable
fun RowScreenPreview() {
    RowScreen()
}