JetPack Compose Customize TextField + Error Message (Fix Text cutting when height is small) [Default style = OutlinedTextField] <Android>

README.md

Design Layout

With Text Content Compare

bulid.gradle.kts

implementation(libs.androidx.material.icons.extended.v165)

CustomTextField.kt

var email by remember { mutableStateOf("") }
var isEmailValid by remember { mutableStateOf(false) }

//Calling the function
CustomOutlinedTextField(
    value = email,
    onValueChange = {
        email = it
        isEmailValid = isValidEmail(it)
    },
    singleLine = true,
    modifier = Modifier
        .fillMaxWidth()
        .height(40.dp),
    errorMessage = if (isEmailValid) null else "Invalid email. Format: [email protected]",
    placeholderText = ""
        
    /*Adding & follow any other parameters in the function*/
    
)


//Customized TextField
@Composable
fun CustomOutlinedTextField(
    value: String,
    onValueChange: (String) -> Unit,
    singleLine: Boolean = false,
    modifier: Modifier = Modifier,
    errorMessage: String? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    placeholderText: String = "Placeholder",
    fontSize: TextUnit = MaterialTheme.typography.bodyMedium.fontSize
    
    /*Adding any other parameters*/
    
) {
    //For changing the text while typing
    var value by rememberSaveable { mutableStateOf(value) }
    Column{
        BasicTextField(
            modifier = modifier
                .background(
                    MaterialTheme.colorScheme.surface,
                    MaterialTheme.shapes.small,
                )
                .fillMaxWidth()
                .padding(top = 4.dp)
                .border(1.dp, MaterialTheme.colorScheme.outline , RoundedCornerShape(4.dp)),       // Border Style
            value = value,
            onValueChange = {
                value = it                                                                         //Update the text
                onValueChange(it)                                                                  //Pass the result back
            },
            singleLine = singleLine,
            cursorBrush = SolidColor(MaterialTheme.colorScheme.primary),
            textStyle = LocalTextStyle.current.copy(                                                /*                        */
                color = MaterialTheme.colorScheme.onSurface,                                        /*    Input text style    */
                fontSize = fontSize                                                                 /*                        */
            ),
            decorationBox = { innerTextField ->
                Row(
                    modifier = Modifier.padding(
                        start = 16.dp
                    ),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    if (leadingIcon != null) leadingIcon()
                    Box(Modifier.weight(1f)) {
                        if (value.isEmpty())
                            Text(
                                text = placeholderText,
                                style = LocalTextStyle.current.copy(
                                    color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.3f),
                                    fontSize = fontSize
                                ),
                            )
                        innerTextField()
                    }
                    if (!errorMessage.isNullOrEmpty()) {
                        Icon(
                            imageVector = Icons.Default.Error,                          //need to implement extend Icon library
                            contentDescription = "Error Icon",
                            tint = MaterialTheme.colorScheme.error
                        )
                    }else if (trailingIcon != null) trailingIcon()
                }
            }
        )
        //Error message when invalid
        if (!errorMessage.isNullOrEmpty()) {
            Text(
                text = errorMessage,
                color = MaterialTheme.colorScheme.error,
                fontSize = 12.sp
            )
        }
    }
}

EmailValidate.kt

fun isValidEmail(email: String): Boolean {
    val emailRegex = "^[A-Za-z](.*)([@]{1})(.{1,})(\\.)(.{1,})".toRegex()
    return emailRegex.matches(email)
}