How can I align Text and content of OutlinedTextFi...

# compose

[chanjungskim]

How can I align Text and content of OutlinedTextField to CenterVertically?

[chanjungskim]

here's my code.

Row(
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Text(
                text = "010 - ",
                style = TextStyle(
                    color = Color.Gray03,
                    fontSize = 9.sp,
                    textAlign = TextAlign.Center
                )
            )
            OutlinedTextField(
                value = mobile,
                onValueChange = onValueChange,
                label = {
                    Text(
                        text = "0000-0000",
                        style = TextStyle(
                            fontSize = 9.sp,
                            color = InactiveGray
                        )
                    )
                },
                modifier = Modifier.height(30.dp)
            )
        }

[chanjungskim]

And here's the screenshot.

[ephemient]

what you want probably isn't vertical center, it's baseline alignment

Text(text = "010 - ", modifier = Modifier.alignBy(LastBaseline))

[chanjungskim]

The screenshot is wrong. 010- should be vertically center.

[chanjungskim]

I fixed it.

[chanjungskim]

But, OutlinedTextField's content is not vertically centered.

here's my code:

OutlinedTextField(
        "",
        onValueChange = {},
        label = {
            Box{
                Text(
                    text = "Hello World",
                    fontSize = 9.sp,
                    modifier = Modifier.align(Alignment.Center)
                )
            }
        }
    )

[chanjungskim]

Here's the full code of OutlinedTextField

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun OutlinedTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    placeholder: String? = null,
    label: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    contentPadding: PaddingValues = outlinedTextFieldPadding(
        start = 11.dp,
        end = 11.dp,
        top = 0.dp,
        bottom = 0.dp
    ),
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions(),
    singleLine: Boolean = false,
    maxLength: Int = Int.MAX_VALUE,
    maxLines: Int = Int.MAX_VALUE,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = RectangleShape,
    colors: androidx.compose.material.TextFieldColors = TextFieldDefaults.outlinedTextFieldColors(
        backgroundColor = if (enabled) Color.White else Color.Gray015,
        focusedBorderColor = Color.NeonYellow10,
        unfocusedBorderColor = Color.Gray014,
        disabledBorderColor = Color.Transparent,
        placeholderColor = Color.Gray04
    )
) {
    // If color is not provided via the text style, use content color as a default
    val textColor = textStyle.color.takeOrElse {
        colors.textColor(enabled).value
    }
    val mergedTextStyle = textStyle.merge(TextStyle(color = textColor))

    BasicTextField(
        value = value,
        modifier = if (label != null) {
            modifier
                // Merge semantics at the beginning of the modifier chain to ensure padding is
                // considered part of the text field.
                .semantics(mergeDescendants = true) {}
                .padding(top = 8.dp)
        } else {
            modifier
        }
            .background(colors.backgroundColor(enabled).value, shape)
            .padding(vertical = contentPadding.calculateTopPadding())
            .defaultMinSize(
                minWidth = 120.dp,
                minHeight = 24.dp
            ),
        onValueChange = {
            if (it.length <= maxLength) {
                val text = if (maxLines == 1 || singleLine) {
                    it.replace("\n", "")
                } else {
                    it
                }
                onValueChange(text)
            }
        },
        enabled = enabled,
        readOnly = readOnly,
        textStyle = mergedTextStyle,
        cursorBrush = SolidColor(colors.cursorColor(isError).value),
        visualTransformation = visualTransformation,
        keyboardOptions = keyboardOptions,
        keyboardActions = keyboardActions,
        interactionSource = interactionSource,
        singleLine = singleLine,
        maxLines = maxLines,
        decorationBox = { innerTextField ->
            TextFieldDefaults.OutlinedTextFieldDecorationBox(
                value = value,
                visualTransformation = visualTransformation,
                innerTextField = innerTextField,
                placeholder = {
                    if (placeholder != null) {
                        Text(
                            text = placeholder,
                            fontSize = 10.sp,
                            lineHeight = 12.sp,
                            color = colors.placeholderColor(enabled).value,
                        )
                    }
                },
                label = label,
                leadingIcon = leadingIcon,
                trailingIcon = trailingIcon,
                singleLine = singleLine,
                enabled = enabled,
                isError = isError,
                interactionSource = interactionSource,
                colors = colors,
                contentPadding = contentPadding,
                border = {
                    TextFieldDefaults.BorderBox(
                        enabled,
                        isError,
                        interactionSource,
                        colors,
                        shape
                    )
                }
            )
        }
    )
}