Jetpack Compose Basics UI Example
In this article, we are going to create login screen UI by jetpack compose basics instead of layout xml file in android application. You can also check out android jetpack related articles.
Jetpack Compose is modern UI toolkit to create application layout programmatically instead of using xml layouts. The main advantage of using jetpack compose is to reduce code and easy to maintain. Whenever app state changes, UI is automatically updated. We need to add @Composable annotation to our method to declare it as composable function.
Android Studio Requirements
There are some requirements to use jetpack compose in android app. First we need to update our android studio to arctic fox version(2020.3.1). We also need to use following gradle plugin version due to our new updated android studio.
dependencies {
classpath “com.android.tools.build:gradle:7.0.0”
}
}
We also need to check kotlin version 1.5.31 in our code. To use jetpack compose layout in android app, we must set our minimum api level 21 or higher. We also need to enable jetpack compose in our app level build.gradle file as below.
buildFeatures {
compose true
}
}
Jetpack Compose Dependecies
We also need to add following jetpack compose toolkit libraries in our app level build.gradle file under dependencies section as below.
implementation ‘androidx.activity:activity-compose:1.3.1’
implementation ‘androidx.compose.material:material:1.0.5’
implementation ‘androidx.compose.animation:animation:1.0.5’
implementation ‘androidx.compose.ui:ui-tooling:1.0.5’
implementation ‘androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07’
androidTestImplementation ‘androidx.compose.ui:ui-test-junit4:1.0.5’
}
Start a new Jetpack Compose Project
Composable Functions
We can initialize our layout using setContent as below. JetpackComposeLoginLayoutSample is name of sample project. Using JetpackComposeLoginLayoutSampleTheme, we can customize our activity layout. To use preview in android studio, we need to add @Preview annotation to composable function DefaultPreview(). We can also add multiple previews in single file by giving them different names in @Preview annotation.
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
JetpackComposeLoginLayoutSampleTheme {
Surface(color = MaterialTheme.colors.background) {
LoginLayout()
}
}
}
}
}
@Composable
fun LoginLayout() {
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
JetpackComposeLoginLayoutSampleTheme {
LoginLayout()
}
}
Jetpack Compose Basics UI
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.codingwithdhrumil.jetpackcomposeloginlayoutsample.ui.theme.JetpackComposeLoginLayoutSampleTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
JetpackComposeLoginLayoutSampleTheme {
Surface(color = MaterialTheme.colors.background) {
LoginLayout()
}
}
}
}
}
@Composable
fun LoginLayout() {
var emailValue by remember { mutableStateOf(“”) }
var passwordValue by remember { mutableStateOf(“”) }
Column(
modifier = Modifier.padding(horizontal = 25.dp, vertical = 20.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = “Login”, fontSize = 40.sp, color = Color.Red)
Spacer(modifier = Modifier.padding(vertical = 25.dp))
OutlinedTextField(value = emailValue, onValueChange = {emailValue = it}, label = {Text(“Email”)}, modifier = Modifier.fillMaxWidth())
Spacer(modifier = Modifier.padding(vertical = 5.dp))
OutlinedTextField(value = passwordValue, onValueChange = {passwordValue = it}, label = {Text(“Password”)}, modifier = Modifier.fillMaxWidth())
Spacer(modifier = Modifier.padding(vertical = 20.dp))
Button(onClick = { }, colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Red,
contentColor = Color.White
)) {
Text(text = “SUBMIT”, fontSize = 25.sp, modifier = Modifier.padding(horizontal = 20.dp))
}
Spacer(modifier = Modifier.padding(vertical = 10.dp))
Text(text = “Forgot Password?”, fontSize = 18.sp)
Spacer(modifier = Modifier.padding(vertical = 15.dp))
Text(text = “No account yet? Create one”, fontSize = 18.sp)
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
JetpackComposeLoginLayoutSampleTheme {
LoginLayout()
}
}
