CODEWITHSUNDEEP
androiduser-interfaceandroid-jetpack-composetextfieldandroid-compose-textfield
Ajay
Ajay

Reputation: 51

How to decrease height of OutlinedTextField in android using Jetpack Compose

I want to to decease he heigh of Outlined Text Field in jetpack compose. but when i add height(50) modifier then the text inside the OulinedTextField is cutting.

    OutlinedTextField(
        value = emailText,
        onValueChange = { text -> emailText = text },
        modifier = Modifier
            .fillMaxWidth()
            .height(50.dp)
            .padding(horizontal = 16.dp)
            .onFocusEvent {
                coroutineScope.launch {
                    bringIntoViewRequester.bringIntoView()
                }
            },
        shape = RoundedCornerShape(5.dp),
        label = { Text(text = "Email Address") },
        colors = TextFieldDefaults.textFieldColors(
            textColor = Color.White,
            focusedLabelColor = SignInTextColor,
            unfocusedLabelColor = SignInTextColor,
            focusedIndicatorColor = SignInTextColor,
            unfocusedIndicatorColor = SignInTextColor,
            containerColor = Color.Transparent
        ),
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Email,
            imeAction = ImeAction.Next
        )
    )

I have tried to adjust padding but still not getting exact results. by changing text size it is working but i want my OutlinedTextField text size to 17.sp

I have tried to use BasicTextField he hight is decreasing but when i use lable then that lable then that label is inside the the border not aligning on top of the line.

I want my text fields hight to 50.dp and text inside OutlinedTextFields to aligned in vertical-center and text size should be 17.sp, without cutting any text beacuse of bottom padding.

Upvotes: 1

Views: 1885

Answers (1)

Denis Skurtu
Denis Skurtu

Reputation: 35

I'm using BasicTextField to customize the size of the OutlinedTextField:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun OutlinedTextField(
    modifier: Modifier = Modifier,
    text: String,
    onValueChange: (String) -> Unit,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    // ...
) {    
    BasicTextField(
        value = text,
        onValueChange = { onValueChange(it) },
        modifier = modifier
            .height(50.dp)
            .width(OutlinedTextFieldDefaults.MinWidth),
        interactionSource = interactionSource,
        textStyle = TextStyle(fontSize = 17.sp),
        // ...
    ) { innerTextField ->
        OutlinedTextFieldDefaults.DecorationBox(
            // ...
        )
    }
}

Be careful with the size settings, you can hide the text behind the form.

My OutlinedTextField:

Standard:

Probably 50.dp is too small to see the difference.

Upvotes: 0

Related Questions