Solving the mystery of PropagateMinConstraints

Nav Singh
2 min readSep 24, 2023

--

When propagateMinConstraints introduced?

What is it?

@Composable
inline fun Box(
modifier: Modifier = Modifier,
contentAlignment: Alignment = Alignment.TopStart,
propagateMinConstraints: Boolean = false,
content: @Composable BoxScope.() -> Unit
): Unit
  • As per the Box’s definition propagateMinConstraints is of type Boolean and the default is set to false

What does it do?

  • It allows specifying whether or not incoming minimum constraints should be passed to Box's content.

SubcomposeAsyncImage

  • It's a composable function that COIL provides us to load images 🌉asynchronously.
  • You can see the code 🧑‍💻 👩‍💻 of this function here 👇
Box(
modifier = modifier,
contentAlignment = alignment,
propagateMinConstraints = true // passed as true
) {
  • SubcomposeAsyncImage — Internally it uses Box and sets the propagateMinConstraints = true which means it forces minimum constraints on its direct child.

For the loading state, we want to show the CircularProgressIndicator and it fills the whole space, which is not the desired behavior 🛑

SubcomposeAsyncImage(
model = imageModel,
contentDescription = null,
loading = {
// Here it is a direct child and consuming the constraint of parent
// and ended-up with height = 200 dp and width = fillMaxWidth
CircularProgressIndicator()
},
modifier = Modifier
.height(200.dp)
.fillMaxWidth()
)

Result

Result — When CircularProgressIndicator is a direct child

Fix

  • It's really quick and easy
  • The CircularProgressIndicator should be wrapped in a composable and aligned to the center 🎉
SubcomposeAsyncImage(
model = null,
contentDescription = null,
modifier = Modifier
.height(Dimens.onePagerHeaderImageHeight)
.fillMaxWidth(),
content = {
Box(contentAlignment = Alignment.Center) {
CircularProgressIndicator(1f, color = Color.Blue)
}
}
)

Result

Result — After wrapping CircularProgressIndicator with Box

--

--

Nav Singh

Google Developer Expert for Android | Mobile Software Engineer at Manulife | Organizer at GDG Montreal