Good evening, compose friends. I’m running into a ...

# compose

[Joseph Hawkes-Cates]

Good evening, compose friends. I’m running into a discrepancy with a Box where it lays out differently on device than in preview or interactive mode. See thread for more info…

[Joseph Hawkes-Cates]

The general code is:

Box(contentAlignment = Alignment.Center) {
  TextField(...)
  if(isLoading) {
    CircularProgressIndicator(Modifier.size(40.dp))
  }
}

[Joseph Hawkes-Cates]

In the preview and interactive modes, this centers the progress indicator over the text field which is what I want.

[Joseph Hawkes-Cates]

When running live in my app, though, the box height grows when that “isLoading” state changes and the progress indicator is added and it shifts the text field and the progress indicator down. I don’t want the box height to change though and I can’t figure out why that is happening.

[Joseph Hawkes-Cates]

Note that the progress indicator is smaller than the textfield which is why the Box height changing is surprising to me

[Joseph Hawkes-Cates]

It seems like the box height is growing by the size of the progress indicator even though the progress indicator is positioned on top of the text field.

[Joseph Hawkes-Cates]

Ok, I kind of figured it out. Looks like CircularProgressIndicator doesn’t play well with the size modifier. I’m still not fully understanding why, but it seems to have something to do with the hardcoded “CircularIndicatorDiameter” that progress indicator is using internally to draw the circle on it’s canvas. It’s hardcoded to 40.dp and when you set the size on the modifier, it does adjust the size of the progress indicator, but it also does weird things with it’s position and the space that it takes up.

[Joseph Hawkes-Cates]

If I remove the size modifier, the progress indicator defaults to 40 dp which is fortunately the size I want anyway and the box no longer grows when the indicator is added.

[Chris Sinco [G]]

Yes it seems the current implementation is to hardcode the size of the indicator based on the Material spec. That was likely a decision made for 1.0.0, but I think it's reasonable to file a request to make the indicator bigger via a parameter since this is supported for the component in the Views library (MDC-Android)