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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
@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!!
Be the first to comment.