CODEWITHSUNDEEP
androidandroid-jetpack-compose
user18134097
user18134097

Reputation:

Align text inside rounded box jetpack compose

I have a curved box and I need to fit a text and an icon inside the box which will be centered according to the box

@Composable
fun SearchBarCard(
    modifier: Modifier = Modifier
){
    Box(
        modifier = Modifier
            .fillMaxWidth(0.8f)
            .height(40.dp)
            .background(
                brush = Brush.horizontalGradient(listOf(Active, Teal200)),
                shape = RoundedCornerShape(60.dp)
            ),
    ){
        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
        ){
            Icon(imageVector = Icons.Default.Search, contentDescription = "Search Icon")
            Text(text = "Search for music")
        }

    }
}

Result:

enter image description here

What I want:

enter image description here

Upvotes: 2

Views: 6826

Answers (2)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363439

In your Box add the contentAlignment attribute:

Box(
    contentAlignment = Alignment.CenterStart
    //....
){ /* ... */ }

enter image description here

Upvotes: 2

Unes
Unes

Reputation: 70

Row(
        modifier = Modifier.fillMaxSize(), <-- edit this line
        verticalAlignment = Alignment.CenterVertically,
    ){
        Icon(imageVector = Icons.Default.Search, contentDescription = "Search Icon")
        Text(text = "Search for music")
    }

Upvotes: 0

Related Questions