Add Outlined TextField in Jetpack Compose with Material 3

Jetpack Compose, Google’s modern UI toolkit for building native Android apps, continues to revolutionize UI development with its declarative approach. With the adoption of Material 3 (also known as Material You), Compose provides enhanced tools for creating dynamic, theme-driven designs. One such essential component is the Outlined TextField, a versatile input widget commonly used in forms and other user input scenarios.

In this post, we’ll explore how to effectively use the Outlined TextField in Jetpack Compose with Material 3. We’ll dive into its configuration, customization, best practices, and advanced use cases to help you create seamless user experiences.

What Is an Outlined TextField?

The Outlined TextField is part of the Material Design components, providing a border around the input field instead of a filled background. It’s ideal for scenarios where you want a clean and subtle look. With Material 3 integration in Jetpack Compose, Outlined TextField adapts to dynamic theming, offering enhanced flexibility.

Core Features of Outlined TextField:

Supports placeholder text.
Enables label animations.
Provides error handling.
Fully customizable (colors, shapes, typography).
Compatible with dynamic Material 3 theming.

Setting Up Your Project

Before diving into the implementation, ensure your project is ready for Material 3 development.

Add Jetpack Compose Dependencies: Update your build.gradle file with the necessary dependencies:

implementation "androidx.compose.material3:material3:1.2.0"
implementation "androidx.compose.ui:ui:1.5.0"
implementation "androidx.compose.runtime:runtime:1.5.0"

Enable Compose in Your Project: Add these configurations in the android block:

buildFeatures {
    compose true
}

composeOptions {
    kotlinCompilerExtensionVersion "1.5.0"
}

Creating an Outlined TextField

Here’s how you can create a simple Outlined TextField using Jetpack Compose and Material 3.

Basic Implementation

@Composable
fun BasicOutlinedTextField() {
    var text by remember { mutableStateOf("") }

    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Enter text") },
        placeholder = { Text("Placeholder") }
    )
}

Code Breakdown:

State Management: The remember function holds the mutable state for the text value.
OutlinedTextField Parameters:
- value: The current text in the field.
- onValueChange: A callback to handle text changes.
- label: A composable displayed as a label.
- placeholder: A hint when the field is empty.

Customization Options

Material 3’s Outlined TextField offers rich customization possibilities to match your app’s design requirements.

Styling the TextField

You can adjust colors, shapes, and typography using the colors and shape parameters.

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Custom Style") },
    colors = TextFieldDefaults.outlinedTextFieldColors(
        textColor = Color.Black,
        focusedBorderColor = Color.Blue,
        unfocusedBorderColor = Color.Gray,
        cursorColor = Color.Red
    ),
    shape = RoundedCornerShape(8.dp)
)

Handling Errors

To indicate errors in user input, use the isError parameter and provide an error message below the field.

OutlinedTextField(
    value = text,
    onValueChange = {
        text = it
        isError = text.isEmpty()
    },
    isError = text.isEmpty(),
    label = { Text("Required Field") },
    trailingIcon = {
        if (text.isEmpty()) {
            Icon(Icons.Filled.Error, "Error", tint = Color.Red)
        }
    }
)

if (text.isEmpty()) {
    Text(
        text = "Field cannot be empty",
        color = Color.Red,
        style = MaterialTheme.typography.bodySmall
    )
}

Adding Leading and Trailing Icons

You can enhance the user experience by adding icons inside the TextField.

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("With Icons") },
    leadingIcon = {
        Icon(Icons.Filled.Person, contentDescription = "User Icon")
    },
    trailingIcon = {
        IconButton(onClick = { text = "" }) {
            Icon(Icons.Filled.Clear, contentDescription = "Clear Text")
        }
    }
)

Best Practices for Using Outlined TextField

Input Validation: Ensure proper validation for user input, such as email formatting or password requirements.
Dynamic Theming: Leverage Material 3’s dynamic color capabilities for consistent UI across themes.
Accessibility: Add meaningful contentDescription for icons and ensure proper contrast ratios for text and borders.
Performance Optimization: Avoid unnecessary recompositions by properly structuring state management.
Error Handling: Always provide clear, user-friendly error messages to guide users.

Advanced Use Cases

TextField with Character Counter

To add a character limit and counter:

OutlinedTextField(
    value = text,
    onValueChange = {
        if (it.length <= 50) text = it
    },
    label = { Text("Character Limit") },
    supportingText = {
        Text("${text.length} / 50")
    }
)

Password Input Field

For password inputs, toggle visibility using a trailing icon:

OutlinedTextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Password") },
    visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
    trailingIcon = {
        val icon = if (passwordVisible) Icons.Filled.Visibility else Icons.Filled.VisibilityOff
        IconButton(onClick = { passwordVisible = !passwordVisible }) {
            Icon(icon, contentDescription = null)
        }
    }
)

Conclusion

The Outlined TextField in Jetpack Compose with Material 3 provides an intuitive and customizable way to handle user input. By leveraging its advanced features and adhering to best practices, you can create polished, user-friendly forms and input fields that align seamlessly with modern design principles.

Whether you’re designing a simple login form or a complex input-driven interface, the Outlined TextField’s flexibility ensures it fits your needs. Start integrating it into your projects today and elevate your app’s user experience!

Android, .NET & ColdFusion Tutorials