April
4th,
2022
For this tutorial, we will be looking at text fields.
Text fields allow users to enter text into a UI. Text fields in Material design come in two types: Filled text fields or Outlined text fields. Outlined text fields are what we shall look at here.
Compose includes an OutlinedTextField composable to fulfill the Material specification of outlined text field.
Lets Look at Some Code
Here I have created a composable that shows some different variations of how OutlinedTextField could be used.
@Composable
fun textFields() {
var text by remember { mutableStateOf("") }
var textone by remember { mutableStateOf("") }
var texttwo by remember { mutableStateOf("") }
var password by rememberSaveable { mutableStateOf("") }
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center
) {Row(
horizontalArrangement = Arrangement.Center,
modifier = Modifier
.fillMaxWidth()
.height(100.dp)
) {
OutlinedTextField(
value = text,
onValueChange = { text = it },
singleLine = true,
label = { Text("Label") },
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor = White,
unfocusedBorderColor = White,
focusedLabelColor = White,
unfocusedLabelColor = White,
textColor = White
)
)
}
Row(
horizontalArrangement = Arrangement.Center,
modifier = Modifier
.fillMaxWidth()
.height(100.dp)
) {
OutlinedTextField(
value = textone,
onValueChange = { textone = it },
singleLine = true,
label = { Text("Label") },
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor = Green,
unfocusedBorderColor = Yellow,
focusedLabelColor = Green,
unfocusedLabelColor = Yellow,
textColor = Green,
),
shape = RoundedCornerShape(50)
)
}
Row(
horizontalArrangement = Arrangement.Center,
modifier = Modifier
.fillMaxWidth()
.height(100.dp)
) {
OutlinedTextField(
value = texttwo,
onValueChange = { texttwo = it },
singleLine = true,
label = { Text("Email", color = White) },
leadingIcon = { Icon(imageVector = Icons.Default.Email,contentDescription = "", tint = White) },
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor = Red,
unfocusedBorderColor = White,
textColor = White
),
shape = RoundedCornerShape(50)
)
}
Row(
horizontalArrangement = Arrangement.Center,
modifier = Modifier
.fillMaxWidth()
.height(100.dp)
) {
OutlinedTextField(
value = password,
onValueChange = { password = it },
label = { Text("Enter password") },
leadingIcon = { Icon(imageVector = Icons.Default.Lock,contentDescription = "", tint = Red) },
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor = White,
unfocusedBorderColor = Red,
focusedLabelColor = White,
unfocusedLabelColor = Red,
textColor = White,
),
visualTransformation = PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
)
}
}
}
Let's See It in Action
