https://kotlinlang.org logo
#compose
Title
# compose
j

Joseph Hawkes-Cates

11/30/2021, 10:50 PM
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…
The general code is:
Copy code
Box(contentAlignment = Alignment.Center) {
  TextField(...)
  if(isLoading) {
    CircularProgressIndicator(Modifier.size(40.dp))
  }
}
In the preview and interactive modes, this centers the progress indicator over the text field which is what I want.
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.
Note that the progress indicator is smaller than the textfield which is why the Box height changing is surprising to me
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.
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.
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.
c

Chris Sinco [G]

12/01/2021, 6:24 AM
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)
👍 1