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.