Extra inner padding in TextField in jetpack compose

Question

I have a TextField to enter the amount as follows:

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun AmountTextField(
    modifier: Modifier,
    sendMoneyViewModel: SendMoneyViewModel,
    isReadOnly: Boolean,
    focusManager: FocusManager
) {
    val paymentAmount = sendMoneyViewModel.paymentAmount.collectAsState()
    val focusRequester = remember { FocusRequester() }

    LaunchedEffect(Unit) {
        focusRequester.requestFocus()
    }
    val interactionSource = remember { MutableInteractionSource() }
    Row(
        modifier = modifier,
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Spacer(modifier = Modifier.weight(1f))
        Text(
            modifier = Modifier.wrapContentWidth(),
            text = stringResource(id = R.string.rupee_symbol),
            color = Black191919,
            fontSize = 36.sp,
            fontFamily = composeFontFamily,
            fontWeight = getFontWeight(FontWeightEnum.EXTRA_BOLD)
        )
        BasicTextField(
            modifier = Modifier
                .focusRequester(focusRequester)
                .background(color = YellowFFFFEAEA)
                .height(IntrinsicSize.Min)
                .width(IntrinsicSize.Min)
                .clipToBounds(),
            value = paymentAmount.value,
            onValueChange = {
                sendMoneyViewModel.onAmountValueChanged(it)
            },
            interactionSource = interactionSource,
            visualTransformation = CurrencyMaskTransformation(SendMoneyViewModel.AMOUNT_MAX_LENGTH),
            singleLine = true,
            textStyle = TextStyle(
                color = Black191919,
                fontSize = 36.sp,
                fontFamily = composeFontFamily,
                fontWeight = getFontWeight(FontWeightEnum.EXTRA_BOLD),
                textAlign = TextAlign.Center
            ),
            keyboardActions = KeyboardActions(onDone = {
                if (paymentAmount.value.isNotBlank()) {
                    focusManager.moveFocus(FocusDirection.Next)
                }
            }),
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Number, autoCorrect = false, imeAction = ImeAction.Next
            ),
            readOnly = isReadOnly
        ) {
            TextFieldDefaults.TextFieldDecorationBox(
                value = paymentAmount.value,
                visualTransformation = CurrencyMaskTransformation(SendMoneyViewModel.AMOUNT_MAX_LENGTH),
                innerTextField = it,
                singleLine = true,
                enabled = !isReadOnly,
                interactionSource = interactionSource,
                contentPadding = PaddingValues(0.dp),
                placeholder = { AmountFieldPlaceholder() },
                colors = TextFieldDefaults.textFieldColors(
                    backgroundColor = Color.Transparent,
                    cursorColor = Color.Black,
                    focusedIndicatorColor = Color.Transparent,
                    unfocusedIndicatorColor = Color.Transparent
                )
            )
        }
        Spacer(modifier = Modifier.weight(1f))
    }
}

@Composable
fun AmountFieldPlaceholder() {
    Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
        Text(
            modifier = Modifier
                .wrapContentWidth()
                .align(Alignment.Center),
            text = "0",
            fontSize = 36.sp,
            fontFamily = composeFontFamily,
            fontWeight = getFontWeight(FontWeightEnum.EXTRA_BOLD),
            color = GreyE3E5E5,
            textAlign = TextAlign.Center
        )

    }
}

Initially it looks like this:

After typing "12", it's looking like this: You can see that text "1" is cutting off.

Ideally it should look like this after typing 1234567:

But apart from actual text size, it has extra inner padding also from start and end. So it can be unexpectedly scrolled as follows:

Why TextField is having extra inner padding from start and end. Due to this, text is cutting while typing.

I have tried many solutions like: Resizeable BasicTextField in Jetpack Compose

I also tried to set WindowInsets, but nothing is working.

Answer 1

I will suggest using View's EditText here since it provides lots of flexibility in terms of customization. I have pasted the code on Paste Bin https://pastebin.com/Z1hS7xns

Update: wrap buildAmountEditText() with remember{} otherwise it'll be created every time there's new message string

@Composable
fun AmountTextField(
    amount: String,
    onAmountChange: (String) -> Unit
) {
    Row(
        horizontalArrangement = Arrangement.SpaceAround,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = stringResource(R.string.rupee_symbol),
            style = MaterialTheme.typography.h2.copy(
                color = Color(0xFF191919),
                fontWeight = FontWeight.ExtraBold
            )
        )
        val titleField = remember {
            buildAmountEditText(
                context = LocalContext.current,
                amount = amount,
                onAmountChange = onAmountChange,
                placeholder = "0",
                focusChangeListener = { _, hasFocus ->
                    // do something with focus
                },
                paddingValues = PaddingValues(0)
            )
         }
        AndroidView(factory = { titleField })
    }
}

Answer 2

Remove singleLine property or set it as false. This is the simplest solution.