🚀 Jetpack Compose Layouts

#jetpackcompose #android #design #kotlin

Howdy Android Devs👋, This is my first article for Android 🥰. In this article, we gonna see the basics of Layout in Jetpack compose 📒 & How to use them 💡.

Before jumping 🏃🏻‍♂️ into the topic let's learn about Jetpack compose first!

What is Jetpack Compose 🤔?

Jetpack Compose is Android’s modern toolkit for building native UI.
It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

Some Interesting facts below 👇

Now let's learn about layouts in compose 😋

Jetpack compose have various layouts in this article we gonna the see about standard layouts 👇

Column
Row
Box
Constraint etc...

Now let's see how to use the above standard layout in compose 👍

What is the Column Layout?

Use Column to place items vertically on the screen. It's like a LinearLayout (Vertical Orientation) in Android XML.

Example for Column Layout💡

@Composable
fun ProfileCard() {
  Column {
    Text("Spikey Sanju")
    Text("Android Developer & UI/UX Designer")
  }
}

In this above example, We have added the @Composable annotation to create the Composable function.

Composable functions can be only called from another Composable function.
Composable functions are the functions that we use to draw the UI on the screen. All the widgets written inside it is rendered on the screen.

Now let's take a look inside the sample code 🕵🏻‍♂️

We are placing two text components inside the Column layout. Now the Column layout will place all the items inside the Column Vertically

Now let's see the output 🥳

Okay, this is how the Column works 😄. Now let's take a look at the Row Layout 👍

What is the Row Layout?

Use Row to place items horizontally on the screen. It's like a LinearLayout (Horizontal Orientation) in Android XML.

Example for Row Layout💡

@Composable
fun ProfileCard() {
  Row{

// getting the image from the drawable
            Image(modifier = modifier.preferredSize(60.dp).clip(CircleShape).align(Alignment.CenterVertically),
                    asset = imageResource(id = R.drawable.spikeysanju),
                    contentScale = ContentScale.Crop)


// used to give horizontal spacing between components
            Spacer(modifier = modifier.width(16.dp))

            Column(modifier = modifier.align(Alignment.CenterVertically)) {
                Text(text = "Spikey Sanju", color = Color.Black, style = typography.h6)

// used to give vertical spacing between components
                Spacer(modifier = modifier.height(8.dp))
                Text(text = "Android Developer & UI/UX Designer", color = Color.DarkGray, style = typography.caption)
            }
        }

}

In the above code, we have used Modifiers. Let's explore the modifiers 👨🏻‍💻

What are Modifiers in Compose 😋

Modifiers allow you to tweak how a composable is presented. Modifiers let you do these sorts of things:

Change the composable's behavior and appearance
Add information, like accessibility labels
Process user input
Add high-level interactions, like making an element clickable, scrollable, draggable, or zoomable

Modifiers are standard Kotlin objects. Create a modifier by calling one of the Modifier class functions. You can chain these functions together to compose them:

Now let's see the output for Row Layout 🥳

Let's see the blueprint of the above examples for Rows & Columns ℹ️

Now you can understand how the layout is combined & arranged.
This is how you have to combine Rows & Columns to create various layout according to your needs.

In the next article, we will see how to use Box Layout, Constraint Layout & much more fun kinds of stuff in jetpack compose ... Stay tuned 🥳🤘...

Comment down your thoughts below 👇