CODEWITHSUNDEEP
androidkotlinandroid-jetpackandroid-jetpack-compose
Mohamed Wasiq
Mohamed Wasiq

Reputation: 587

How to provide relative sizes in Jetpack Compose

I have a Box layout and I want to layout child views relative to the size of the parent box. This is achievable in SwiftUI using Geometry Reader. How can I achieve something similar in Jetpack Compose ?

Upvotes: 4

Views: 7752

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363439

You can use BoxWithConstraints instead of a Box.
You can work with the measurement constraints available in the scope of the content lambda.

Something like:

BoxWithConstraints {
    Box(Modifier.width(maxWidth*0.7f).height(30.dp).background(Color.Blue))
    Box(Modifier.width(maxWidth*0.3f).height(30.dp).background(Color.Yellow))
}

enter image description here

Otherwise you can use the Box and fillMaxWidth and fillMaxHeight modifiers with a fraction.

Box(){
    Box(Modifier.fillMaxWidth(0.7f).height(30.dp).background(Color.Blue))
    Box(Modifier.fillMaxWidth(0.3f).height(30.dp).background(Color.Yellow))
}

Upvotes: 11

Related Questions