loading...
Cover image for ๐Ÿš€ Jetpack Compose Layouts

๐Ÿš€ Jetpack Compose Layouts

sanjay_spikey profile image Spikey sanju ใƒป3 min read

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 ๐Ÿ‘‡

Screenshot 1942-08-02 at 10.43.17

ย 

Now let's learn about layouts in compose ๐Ÿ˜‹

Jetpack compose have various layouts in this article we gonna the see about standard layouts ๐Ÿ‘‡

  1. Column
  2. Row
  3. Box
  4. 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")
  }
}
Enter fullscreen mode Exit fullscreen mode

ย 

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

  1. Composable functions can be only called from another Composable function.

  2. 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 ๐Ÿฅณ

ROWS & COLUMNS

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)
            }
        }

}
Enter fullscreen mode Exit fullscreen mode

ย 

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:

ย 

  1. Change the composable's behavior and appearance
  2. Add information, like accessibility labels
  3. Process user input
  4. 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 ๐Ÿฅณ

ROWS & COLUMNS

ย 

Let's see the blueprint of the above examples for Rows & Columns โ„น๏ธ

ย 

Alt Text

ย 

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 ๐Ÿ‘‡

Discussion

pic
Editor guide
Collapse
levirs565 profile image
Levi Rizki Saputra

Great post๐Ÿ‘

Collapse
sanjay_spikey profile image