Jetpack Compose Layouts

Part 1:

Jetpack Compose, is a modern toolkit for building native UI. With this new toolkit, we need no more xmls, We can design the UI of the app using kotlin apart from writing business logic in it.

In compose composable functions create a piece of UI, thus it is used to define all the UI of your app programmatically

@Composable fun AnyUiComponent() { 
    // Code for UI element 
}

Layouts of the screen always have a hierarchy, for hierarchy support small composable functions are created that call another composable function. So every composable can be responsible for a tiny part of the screen and can be edited independently.

Jetpack compose provides the following basic layouts

1. Rows
2. Columns
3. Box

There are two more advanced layouts available in compose

1. Scaffold:

The scaffold layout in compose implements the basic material design layout structure, providing an inbuilt setup to place AppBar, BottomBar, Floating Action Button, Snackbar, and Navigation Drawer for the screen. With inbuilt scaffold composable function, we need to add our custom composables function created for AppBar, BottomBar, Floating Action Button, Snackbar, and all the view components get placed automatically as per material design layout structure

2. Constarintlayout

A Constraintlayout in compose is similar to the existing constraint layout that we use to build the UI of the screen. It is an alternative to using multiple nested Row, Column, and Box layouts required to implement layouts having a complex hierarchy.

Happy Learning !!!