Jetpack Compose layout in android

Piyush Pandey

1 June 2021

Jetpack Compose is a modern toolkit for building native Android app design. Jetpack Compose simplifies and accelerates UI development with less code. It is a powerful tool and intuitive Kotlin APIs.

In Jetpack compose, We can design any screen with the following:-

Column

Row

Box

Modifier

Scrollable Layout

We can read in detail about these layout in the following link

https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary

Column:- With the help of Column, we can place vertical items.

For example, We use it for making a form layout design.

We can create a new jetpack project with a new Arctic Fox android studio. Please refer to the image

Then open Android Studio, select Empty Compose Activity

and Sync your project.

Then we can add an edit text field using material design. And for it, we have to add dependencies on build.gradle file.

package com.example.mydemo

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
import com.example.mydemo.ui.theme.MyDemoTheme

class MainActivity : ComponentActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyDemoTheme {
// A surface container using the 'background' color from the theme
// Surface(color = MaterialTheme.colors.background) {
Greeting()
// }

}
}
}
}

@Composable
fun Greeting() {
Column {
var textF by remember { mutableStateOf("") }
OutlinedTextField(
value = textF,
onValueChange = { textF = it },
label = { Text("First Name") }
)
var textL by remember { mutableStateOf("") }

OutlinedTextField(
value = textL,
onValueChange = { textL = it },
label = { Text("Last Name") }
)


Button(onClick = { /*TODO*/ }) {
Text(text = "Submit")
}
}
}





@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
MyDemoTheme {
Greeting()
}
}

package com.example.mydemo

import android.os.Bundle

import androidx.activity.ComponentActivity

import androidx.activity.compose.setContent

import androidx.compose.foundation.layout.Column

import androidx.compose.material.*

import androidx.compose.runtime.*

import androidx.compose.ui.tooling.preview.Preview

import com.example.mydemo.ui.theme.MyDemoTheme

class MainActivity : ComponentActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContent {

MyDemoTheme {

// A surface container using the 'background' color from the theme

// Surface(color = MaterialTheme.colors.background) {

Greeting()

// }

}

@Composable

fun Greeting() {

Column {

var textF by remember { mutableStateOf("") }

OutlinedTextField(

value = textF,

onValueChange = { textF = it },

label = { Text("First Name") }

)

var textL by remember { mutableStateOf("") }

OutlinedTextField(

value = textL,

onValueChange = { textL = it },

label = { Text("Last Name") }

)

Button(onClick = { /*TODO*/ }) {

Text(text = "Submit")

}

@Preview(showBackground = true)

@Composable

fun DefaultPreview() {

MyDemoTheme {

Greeting()

}

Composable functions

Jetpack Compose is built around composable functions. These functions allow you to define your app’s UI programmatically by describing its shape and data dependencies, rather than focusing on the process of the UI’s construction. To create a composable function, just add the @Composible annotation to the function name.

@Composable
fun Greeting() {
Column {
var textF by remember { mutableStateOf("") }
OutlinedTextField(
value = textF,
onValueChange = { textF = it },
label = { Text("First Name") }
)
var textL by remember { mutableStateOf("") }

OutlinedTextField(
value = textL,
onValueChange = { textL = it },
label = { Text("Last Name") }
)


Button(onClick = { /*TODO*/ }) {
Text(text = "Submit")
}
}
}

@Composable

fun Greeting() {

Column {

var textF by remember { mutableStateOf("") }

OutlinedTextField(

value = textF,

onValueChange = { textF = it },

label = { Text("First Name") }

)

var textL by remember { mutableStateOf("") }

OutlinedTextField(

value = textL,

onValueChange = { textL = it },

label = { Text("Last Name") }

)

Button(onClick = { /*TODO*/ }) {

Text(text = "Submit")

}

Preview your function in Android Studio

Android studio allows you to preview your composable functions within the IDE, instead of needing to download the app to an Android device or emulator. The main restriction is, the composable function must not take any parameters. For this reason, you can’t preview the Greeting() function directly. Instead, make a second function named PreviewGreeting(), which calls Greeting with an appropriate parameter. Add the @Preview annotation before @Composable.

You can get more information about compose layout and animations of the view in details in the following link:-

https://developer.android.com/jetpack/compose/documentation

You can also go through a video workshop on the youtube link

Thanks for reading this blog. Hope you enjoy it!!