Compose UI Android Constraint Layout
In this article, we are going to create responsive compose ui in android application using constraint layout. You can also check out jetpack compose related articles.
First we need to add constraint layout library in our app level build.gradle file. Using this compose ui, we dont need to create multiple layouts for different screens like layout-small, layout, layout-large, layout-xlarge.
Add dependency in build.gradle file
Compose UI Android
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
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 androidx.constraintlayout.compose.ConstraintLayout
import com.codingwithdhrumil.jetpackcomposeconstraintlayout.ui.theme.JetpackComposeConstraintLayoutTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
JetpackComposeConstraintLayoutTheme {
Surface(color = MaterialTheme.colors.background) {
LoginLayout()
}
}
}
}
}
@Composable
fun LoginLayout() {
var emailValue by remember { mutableStateOf(“”) }
var passwordValue by remember { mutableStateOf(“”) }
ConstraintLayout(
modifier = Modifier.padding(horizontal = 25.dp),
) {
val (headerText, emailBox, passwordBox, submitForgotBox, noAccountText) = createRefs()
Box(modifier = Modifier
.fillMaxHeight(.3f)
.constrainAs(headerText) {
start.linkTo(parent.start)
end.linkTo(parent.end)
top.linkTo(parent.top)
},
contentAlignment = Alignment.Center){
Text(text = “Login”, fontSize = 40.sp, color = Color.Red,)
}
Box(modifier = Modifier
.fillMaxHeight(.125f)
.constrainAs(emailBox) {
start.linkTo(parent.start)
end.linkTo(parent.end)
top.linkTo(headerText.bottom)
}) {
OutlinedTextField(value = emailValue, onValueChange = {emailValue = it}, label = {Text(“Email”)}, modifier = Modifier.fillMaxWidth())
}
Box(modifier = Modifier
.fillMaxHeight(.125f)
.constrainAs(passwordBox) {
start.linkTo(parent.start)
end.linkTo(parent.end)
top.linkTo(emailBox.bottom)
}) {
OutlinedTextField(value = passwordValue, onValueChange = {passwordValue = it}, label = {Text(“Password”)}, modifier = Modifier.fillMaxWidth())
}
Column(modifier = Modifier
.fillMaxHeight(.35f)
.constrainAs(submitForgotBox) {
start.linkTo(parent.start)
end.linkTo(parent.end)
top.linkTo(passwordBox.bottom)
},
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally) {
Button(onClick = { }, colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Red,
contentColor = Color.White),
modifier = Modifier.fillMaxWidth()
) {
Text(text = “SUBMIT”, fontSize = 25.sp, modifier = Modifier.padding(horizontal = 20.dp, vertical = 10.dp))
}
Spacer(modifier = Modifier.height(25.dp))
Text(text = “Forgot Password?”, fontSize = 18.sp,)
}
Box(modifier = Modifier
.fillMaxHeight(.1f)
.constrainAs(noAccountText) {
start.linkTo(parent.start)
end.linkTo(parent.end)
top.linkTo(submitForgotBox.bottom)
},
contentAlignment = Alignment.Center) {
Text(text = “No account yet? Create one”, fontSize = 18.sp)
}
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
JetpackComposeConstraintLayoutTheme {
LoginLayout()
}
}
