Question 301262 in Firebase Question posted in
An extensive official documentation can be found here.

Firebase – How to customize Label on a TextField

I am kind of new in Jetpack Compose and I am trying to customize the label on a TextField, I want the label to remain on the top of the TextField (like it is always focused) and not to be inside of the TextField.

enter image description here

I want it to be like it is on the top and not in the bottom.
Thanks!

Row(
            modifier = Modifier
                .fillMaxWidth()
        ) {
            TextField(
                value = text,
                onValueChange = { newText ->
                    text = newText
                },
                label = {
                    Text(
                        text = "Nombre",
                        fontFamily = FontFamily(Font(R.font.quicksandregular)),
                    )
                },
                colors = TextFieldDefaults.colors(
                    cursorColor = azulApp,
                    unfocusedLabelColor = Color.LightGray,
                    focusedLabelColor = azulApp,
                    focusedContainerColor = Color.Transparent,
                    unfocusedContainerColor = Color.Transparent,
                    focusedIndicatorColor = Color.Transparent,
                    unfocusedIndicatorColor = Color.Transparent,
                    disabledIndicatorColor = Color.Transparent
                ),
                textStyle = TextStyle(
                    fontFamily = FontFamily(Font(R.font.quicksandregular)),
                    fontSize = 15.sp,
                ),
                singleLine = true,
                modifier = Modifier
                    .fillMaxWidth()
            )
        }

I tried the code above with no result.

Tags:

2

Answers


  1. 0

    I want the label to remain on the top of the TextField (like it is always focused)

    If you want to have a TextField always focused in Jetpack Compose, you have to use FocusRequester. So first of all you should declare a variable inside your composable function like this:

    val focusRequester = FocusRequester()

    Then inside your TextField you have to set the focusRequester:

    TextField(
    value = text,
    onValueChange = { newText ->
        text = newText
    },
    label = {
        //
    },
    colors = TextFieldDefaults.colors(
        //
    ),
    textStyle = TextStyle(
        //
    ),
    singleLine = true,
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Email
    ),
    modifier = Modifier.focusRequester(focusRequester) //👈
)

    In the end, right after the TextField you have to request the focus as below:

    LaunchedEffect(Unit) {
    coroutineContext.job.invokeOnCompletion {
        focusRequester.requestFocus()
    }
}
    Login or Signup to reply.
  2. 0

    Another option is to use BasicTextField and add the label with the layout and position of your choice.

    Column {
        Text( //<--Fixed label 
            style = MaterialTheme.typography.labelLarge,
            text = label, 
        )
        Spacer(modifier = Modifier.height(8.dp))
        BasicTextField(
            modifier = Modifier
                .onFocusChanged {
                    if (isFocused && !it.isFocused) onValueChange(text)
                    isFocused = it.isFocused
                },
            value = text,
            onValueChange = onValueChange,
            singleLine = singleLine,
            keyboardOptions = keyboardOptions,
            textStyle = MaterialTheme.typography.labelLarge.copy(color = MaterialTheme.colorScheme.onBackground),
            cursorBrush = SolidColor(MaterialTheme.colorScheme.primary),
            decorationBox = { innerTextField ->
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .clip(RoundedCornerShape(10.dp))
                        .border(
                            1.dp,
                            borderColor,
                            RoundedCornerShape(10.dp)
                        )
                        .background(MaterialTheme.colorScheme.background)
                        .padding(horizontal = 16.dp, vertical = 8.dp)

                ) {
                    if (text.isEmpty()) {
                        Text(
                            text = placeholder,
                            style = MaterialTheme.typography.labelLarge,
                            color = MaterialTheme.colorScheme.onBackground.copy(alpha = .38f),
                            maxLines = 1,
                            overflow = TextOverflow.Ellipsis,
                        )
                    }
                    innerTextField()
                }
            }
        )
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(20.dp),
            contentAlignment = Alignment.CenterEnd
        ) {
            if (error) {
                Text(
                    text = errorText,
                    style = MaterialTheme.typography.labelMedium,
                    color = MaterialTheme.colorScheme.error
                )
            }
        }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search