fillMaxSize() after rotate() leads to wrong results

Question

The following code gives me output I did not expect.

@Composable
fun App() {
    MaterialTheme {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Gray)
            ,
        ) {
            Image(
                modifier = Modifier
                    .rotate(90f)
                    .fillMaxSize()
                ,
                painter = painterResource(Res.drawable.hello),
                contentDescription = null,
            )
        }
    }
}

The image is rotated but it does not fill the size of its parent. Instead I would expect the image to fill one or two dimensions of the parent, like illustrated on the right.

Actual result vs. Expected result:

I have tried to set the contentScale to ContentScale.Crop but that results in even worse output:

Have you tried to change the order of rotate() and fillMaxSize()? So, instead ".rotate(90f).fillMaxSize()", it should be " fillMaxSize().rotate(90f)". — Jun
– Jun, Commented Aug 24 at 11:29

tyg · Accepted Answer · 2025-08-24 14:30:55Z

4

This isn't about the order of the modifiers, it's how the rotate() modifier works in Compose. It doesn’t change the measured size of the composable, so fillMaxSize() is computed before the rotation. That's why, after a 90° turn, your image doesn't cover the parent. Think of it like the pixels are rotating, not the layout itself.

There are multiple approaches you can use to counter this though. One solution is to wrap it in a BoxWithConstraints and then swap the measured constraints in order to get the desired effect:

@Composable
fun App() {
    MaterialTheme {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Gray),
        ) {
            BoxWithConstraints(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = Alignment.Center,
            ) {
                Image(
                    modifier = Modifier
                        .requiredHeight(maxWidth) // Swap width and height
                        .requiredWidth(maxHeight)
                        .rotate(90f),
                    painter = painterResource(R.drawable.hello),
                    contentDescription = null,
                )
            }
        }
    }
}

And here's the result:

edited Aug 24 at 14:30

tyg

20.7k5 gold badges46 silver badges59 bronze badges

answered Aug 24 at 12:54

Mofe Ejegi

1,5735 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sanitizedUser Aug 25 at 15:42

Why do you use outer Box? How did you manage to expand the image into the status and navigation bars? For me, the same code doesn't allow for the image to expand so far.

Mofe Ejegi Aug 25 at 16:03

Try using ContentScale.Crop to get it full screen. I'm also assuming you have edgeToEdge enabled.

Collectives™ on Stack Overflow

fillMaxSize() after rotate() leads to wrong results

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related