Remove redundant space after scaling in Jetpack Compose

user_13783489 0
Viewed 373

I'm trying to produce a layout in Jetpack compose, where I have to scale the content of a Box. But I've noticed that after being scaled, the Box is still surrounded with empty space, enough to put unscaled content. I need to get rid of that space, without applying any modifiers to the content of the Box

@Composable
fun Power() {
    Row {
        Box(
            Modifier
                .background(Color.Green)) {
           Text("a")
        }
        Box(
            Modifier.scale(0.5f)
                .background(Color.Yellow)) {
            Text("bbbb")
        }
    }
}

Expectations:

enter image description here

Reality:

enter image description here

android-jetpack android-jetpack-compose
2 Answers

A box is redundant here, just keep the fontSize of the second text lower than the fontSize of the first text in the row ( tweak with the text size to achieve proper size instead of using scaling )

Try this:-

Row(Modifier.background(Color.White), verticalAlignment = Alignment.CenterVertically) {
    Text("a", Modifier.background(Color.Green).padding(0.dp, 0.dp, 0.dp, 6.dp), fontSize = 30.sp, textAlign = TextAlign.Center)
    Text("bbbb", Modifier.background(Color.Yellow), fontSize = 16.sp)
}

enter image description here

user_72583320

Adjust offset according to your need

@Composable
fun Power() {
    Row {
        Box(
            Modifier
                .background(Color.Green)) {
           Text("a")
        }
        Box(
            Modifier.scale(0.5f).offset(-10.dp, 0.dp)
                .background(Color.Yellow)) {
            Text("bbbb")
        }
    }
}
user_78357750
Related