How to show BasicTextField trailing icon right after text in Jetpack compose

Question

How to show BasicTextField trailing icon right after text in Jetpack compose. My example shows icon at the and of the row, with big space between text and trailingIcon

BasicTextField(
                    value = selectedText,
                    onValueChange = { extendedView = false },
                    readOnly = true,
                    textStyle = MaterialTheme.typography.bodyMedium,
                    modifier = Modifier
                        .fillMaxSize()
                        .wrapContentHeight()
                        .menuAnchor()

                ) {
                        TextFieldDefaults.TextFieldDecorationBox(
                            value = selectedText,
                            innerTextField = it,
                            singleLine = true,
                            enabled = false,
                            visualTransformation = VisualTransformation.None,
                            trailingIcon = {
                                Image(
                                    painter = painterResource(id = LocalAppResources.current.arrowDown),
                                    contentDescription = "Arrow down",
                                    contentScale = ContentScale.None,
                                    alignment = Alignment.Center
                                )
                            },
                            placeholder = { account.name },
                            interactionSource = remember { MutableInteractionSource() },
                            contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
                                top = 2.dp, bottom = 2.dp, start = 6.dp, end = 0.dp
                            ),
                            colors = TextFieldDefaults.textFieldColors(
                                containerColor = Color.Transparent,
                                unfocusedIndicatorColor = Color.Transparent,
                                disabledIndicatorColor = Color.Transparent
                            ),
                        )
                    }
                }

Chirag Thummar · Accepted Answer · 2024-02-01 05:20:10Z

You can try out this

Preview

Code

@Preview
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Stack032() {

    val searchTextFieldValue =
        remember { mutableStateOf(TextFieldValue()) }

    BasicTextField(
        modifier = Modifier
            .wrapContentSize(),
        value = searchTextFieldValue.value,
        onValueChange = { newText ->
            searchTextFieldValue.value = newText
        },
        decorationBox = { innerTextField ->
            TextFieldDefaults.DecorationBox(
                value = searchTextFieldValue.value.text,
                innerTextField = {
                    innerTextField()
                },
                enabled = true,
                singleLine = true,
                visualTransformation = VisualTransformation.None,
                interactionSource = remember { MutableInteractionSource() },
                trailingIcon = {
                    Icon(imageVector = Icons.Filled.Close,
                        contentDescription = "search",
                        modifier = Modifier.clickable {
                            searchTextFieldValue.value = TextFieldValue("")
                        })
                },
                contentPadding = PaddingValues(0.dp),
            )
        },
    )
}

Collectives™ on Stack Overflow

How to show BasicTextField trailing icon right after text in Jetpack compose

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related