CODEWITHSUNDEEP
androidkotlinandroid-jetpack-compose
commandiron
commandiron

Reputation: 1473

why padding from top gets different length value based on element's alignment?

Lets say i have two screnario have divider's that get padding from top.

First scenario (Aligment.TopCenter);

Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.TopCenter
                ) {
                    Divider(
                        thickness = 3.dp,
                        color = Color.Red)
                    Divider(
                        modifier = Modifier.padding(top = 200.dp),
                        thickness = 3.dp,
                        color = Color.Black)
                }

Screen:

enter image description here

Second scenario (Aligment.Center);

Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.Center
                ) {
                    Divider(
                        thickness = 3.dp,
                        color = Color.Red)

                    Divider(
                        modifier = Modifier.padding(top = 200.dp),
                        thickness = 3.dp,
                        color = Color.Black)
                }
            }

Screen:

enter image description here

Question is: Why a is not equal to b even though both have same padding?

Upvotes: 1

Views: 50

Answers (1)

Phil Dukhov
Phil Dukhov

Reputation: 88082

Modifier.padding increases the size of the view. And when it is placed in the center of the Box, it looks like only half of the padding is applied, but the other half of the view is in the top half of the screen.

You can add border to see what's actually going on here:

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    Divider(
        thickness = 3.dp,
        color = Color.Red)

    Divider(
        modifier = Modifier.border(2.dp, color = Color.Green).padding(top = 200.dp),
        thickness = 3.dp,
        color = Color.Black)
}

You can use Modifier.offset instead to get the result you expect

Upvotes: 3

Related Questions