Photo by Charles Deluvio on Unsplash

Playing with TextField in Compose — Android Declarative UI

Since the jetpack compose UI is about to get stable. I thought of exploring and trying to get my hands on it.
In this post, we will be learning the different types of text fields we use in any given project.

While creating this project I am using

  • Android Studio Arctic Fox | 2020.3.1 Beta 5
  • Compose Version 1.0.0-beta09

Prerequisite

***Must be familiar with the basics of Jetpack Compose***

Here is the list of the following types of Text fields made with Compose UI

Table of Contents

  1. Basic TextField
  2. Outline TextField
  3. Outline TextField with a single line
  4. Password TextField
  5. Underline TextField
  6. TextField with no underline
  7. Border TextField
  8. Border TextField with background
  9. Border TextField with gradient background
  10. Rounded TextField
  11. Rounded TextField with Gradient Border
  12. Trailing Icon TextField with Gradient Border
  13. Leading Icon TextField with Gradient Border
  14. CutCornerShape TextField
Basic TextField UI
TextField(
value = text,
modifier = inputModifier,
textStyle = inputTextStyle,
onValueChange = {
onValueChange(it)
}
)
OutlinedTextField(
value = text,
modifier = inputModifier,
textStyle = inputTextStyle,
onValueChange = {
onValueChange(it)
}
)
OutlinedTextField(
value = text,
modifier = inputModifier,
textStyle = inputTextStyle,
onValueChange = {
onValueChange(it)
},
singleLine = true
)
Visibility Off
Visibility On
var showPassword by remember { mutableStateOf(false) }
OutlinedTextField(
value = text,
modifier = inputModifier,
textStyle = inputTextStyle,
onValueChange = {
onValueChange(it)
},
visualTransformation = if (showPassword) {
VisualTransformation.None
} else {
PasswordVisualTransformation()
}, trailingIcon = {
if (showPassword) {
IconButton(onClick = { showPassword = false }) {
VectorIcon(imageVector = Icons.Filled.Visibility)
}
} else {
IconButton(onClick = { showPassword = true }) {
VectorIcon(imageVector = Icons.Filled.VisibilityOff)
}
}
}
)
TextField(
value = text,
modifier = inputModifier,
onValueChange = {
onValueChange(it)
},
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
),
textStyle = inputTextStyle
)
TextField(
value = text,
onValueChange = {
onValueChange(it)
},
modifier = inputModifier,
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Purple200,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent
),
textStyle = inputTextStyle
)
TextField(
value = text,
onValueChange = {
onValueChange(it)
},
modifier = inputModifier.border(BorderStroke(width = 2.dp, color = Purple500)),
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent
),
textStyle = inputTextStyle
)
TextField(
value = text,
onValueChange = {
onValueChange(it)
},
modifier = inputModifier.border(BorderStroke(width = 2.dp, color = Purple500)),
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Purple200.copy(alpha = 0.5f),
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent
),
textStyle = inputTextStyle
)
TextField(
value = text,
onValueChange = {
onValueChange(it)
},
modifier = inputModifier
.border(
BorderStroke(
width = 2.dp,
color = Purple500
)
)
.background(
brush = Brush.horizontalGradient(
listOf(Purple200, Purple700)
)
),
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Purple200.copy(alpha = 0.5f),
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent
),
textStyle = inputTextStyle
)
TextField(
value = text,
onValueChange = {
onValueChange(it)
},
modifier = inputModifier.border(
BorderStroke(width = 2.dp, color = Purple500),
shape = RoundedCornerShape(50)
),
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent
),
textStyle = inputTextStyle
)
TextField(
value = text,
onValueChange = {
onValueChange(it)
},
modifier = inputModifier.border(
BorderStroke(
width = 4.dp,
brush = Brush.horizontalGradient(listOf(Purple200, Purple500))
),
shape = RoundedCornerShape(50)
),
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent
),
textStyle = inputTextStyle
)
TextField(
value = text,
onValueChange = {
onValueChange(it)
},
trailingIcon = {
VectorIcon(imageVector = Icons.Default.Clear)
},
modifier = inputModifier.border(
BorderStroke(
width = 4.dp,
brush = Brush.horizontalGradient(listOf(Purple200, Purple500))
),
shape = RoundedCornerShape(50)
),
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent
),
textStyle = inputTextStyle
)
TextField(
value = text,
onValueChange = {
onValueChange(it)
},
leadingIcon = {
VectorIcon(imageVector = Icons.Default.Email)
},
modifier = inputModifier.border(
BorderStroke(
width = 4.dp,
brush = Brush.horizontalGradient(listOf(Purple200, Purple500))
),
shape = RoundedCornerShape(50)
),
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent
),
textStyle = inputTextStyle
)
TextField(
value = text,
onValueChange = {
onValueChange(it)
},
modifier = inputModifier.border(
BorderStroke(
width = 4.dp,
brush = Brush.horizontalGradient(listOf(Purple200, Purple500))
),
shape = CutCornerShape(10)
),
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent
),
textStyle = inputTextStyle
)

Hit 👏 if you have learned something new.You can also check out my other articles.

Self taught Android developer matching the speed of Android advancements thereby integrating into the apps.