We just launched Compose Examples featuring over 150+ components! Check it out →

aspectRatio

Common

Modifier in Compose Foundation Layout

Attempts to size the content to match a specified aspect ratio by trying to match one of the incoming constraints in the following order: [Constraints.maxWidth], [Constraints.maxHeight], [Constraints.minWidth], [Constraints.minHeight] if [matchHeightConstraintsFirst] is false (which is the default), or [Constraints.maxHeight], [Constraints.maxWidth], [Constraints.minHeight], [Constraints.minWidth] if [matchHeightConstraintsFirst] is true. The size in the other dimension is determined by the aspect ratio. The combinations will be tried in this order until one non-empty is found to satisfy the constraints. If no valid size is obtained this way, it means that there is no non-empty size satisfying both the constraints and the aspect ratio, so the constraints will not be respected and the content will be sized such that the [Constraints.maxWidth] or [Constraints.maxHeight] is matched (depending on [matchHeightConstraintsFirst]).

Last updated:

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation-layout:1.8.0-alpha04")
}

Overloads

@Stable
fun Modifier.aspectRatio(
    @FloatRange(from = 0.0, fromInclusive = false) ratio: Float,
    matchHeightConstraintsFirst: Boolean = false
)

Parameters

namedescription
ratiothe desired width/height positive ratio

Code Example

SimpleAspectRatio

@Composable
fun SimpleAspectRatio() {
    Box(Modifier.width(100.dp).aspectRatio(2f).background(Color.Green))
}
by @alexstyl