CODEWITHSUNDEEP
androidandroid-jetpack-compose
Tunahan
Tunahan

Reputation: 414

Jetpack Compose Textfield Alignment

I'm new to jetpack compose. I want to start typing from TextField's centervertically-start position but I can't put "Example" to center vertically-start position.

Row(
    modifier = Modifier
        .fillMaxWidth()
        .height(50.dp)
        .shadow(5.dp)
        .background(Color.Yellow),


) {

    BasicTextField(
        value = text,
        onValueChange = {onvalueChange(it)},
        modifier = Modifier.weight(10f).background(Color.Blue).fillMaxSize(),
        singleLine = true,
        textStyle = LocalTextStyle.current.copy(
            textAlign = TextAlign.Center
        )


    )
    Image(painter = painterResource(id = R.drawable.ic_baseline_search_24),
        contentDescription = "Search",
        modifier = Modifier.weight(2f).fillMaxSize()

    )

This is my code

image1

And this is what I want to do.

image2

Upvotes: 0

Views: 2847

Answers (3)

Ben Akin
Ben Akin

Reputation: 167

Modifier.padding also works for OutlinedTextField.

OutlinedTextField(
                value = textInput,
                 onValueChange = { onvalueChange(it) },
modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight(Alignment.CenterVertically)
                    .padding(top = 5.dp)
                    .align(Alignment.Center)
            )

Upvotes: 0

Yshh
Yshh

Reputation: 832

Use background box to control, please try:

Row(
    modifier = Modifier
    .fillMaxWidth()
    .height(50.dp)
    .shadow(5.dp)
    .background(Color.Yellow),
    ) {
        Box(Modifier.weight(10f).background(Color.Blue).fillMaxSize(),contentAlignment = CenterStart){
            BasicTextField(
                value = text,
                onValueChange = { onvalueChange(it) },
                modifier = Modifier.wrapContentHeight(
                    Alignment.CenterVertically),
                singleLine = true,
                textStyle = LocalTextStyle.current.copy(
                    textAlign = TextAlign.Start
                )
            )
        }
        Image(
            Icons.Filled.Search,
            contentDescription = "Search",
            modifier = Modifier.weight(2f).fillMaxSize()
    
        )
    }

Upvotes: 2

Stephen Vinouze
Stephen Vinouze

Reputation: 2065

Row has a verticalAlignment for this. Also, if you want your TextField left align like the picture, remove the textAlign (or change it but it default to start)

Row(
    modifier = Modifier
        .fillMaxWidth()
        .height(50.dp)
        .shadow(5.dp)
        .background(Color.Yellow),
    verticalAlignment = Alignment.CenterVertically,
) {

    BasicTextField(
        value = text,
        onValueChange = {onvalueChange(it)},
        modifier = Modifier.weight(10f).background(Color.Blue).fillMaxSize(),
        singleLine = true,
    )
    Image(painter = painterResource(id = R.drawable.ic_baseline_search_24),
        contentDescription = "Search",
        modifier = Modifier.weight(2f).fillMaxSize()

    )
}

Upvotes: 2

Related Questions