Has anyone done a CircularProgressIndicator inside...

# compose-android

[Alexandru Gheorghe]

Has anyone done a CircularProgressIndicator inside a Box composable with Modifier.fillMaxSize() and figured out how to always display the CPI in the foreground? When I'm doing this, with a few TextFields composed, the CPI shows behind TextField composables. I noticed that apps usually have a white background overlayed on top of composables with the CPI overlayed on top of the white (transparent) background. Or something similar. How to achieve this in Jetpack Compose?

[Stylianos Gakis]

Instead of

Box() {
 CircularProgressIndicator()
 OtherContent()
}

Do

Box() {
 OtherContent()
 CircularProgressIndicator()
}

And then CircularProgressIndicator() will render on top of everything else.

[Alexandru Gheorghe]

I'm doing:

Box {
    CircularProgressIndicator()
}
Composables here for the UI

[Alexandru Gheorghe]

Do I have to just move the box at the end of the composables?

[Alexandru Caraus]

Box draws composables within, on top of each other on z axis, in the order you declare them.

[Alexandru Caraus]

Box {
  Behind1()
  InFrontOfBehind1()
  InFrontOfInFrontOfBehind1()
 }

[Alexandru Caraus]

like that

[Alexandru Gheorghe]

Again, I'm not composing within the box. What I'm doing is, I'm composing, conditionally, the box with the CPI (alone) and then I'm composing (separately) in columns or rows or whatever. I would like to avoid encapsulating all my content in a single Box composable. Is ordering still kept in this case?

[Stylianos Gakis]

Then

Box() {
 OtherContent()
}
CircularProgressIndicator()

[Stylianos Gakis]

All in all, even if you are not "encapsulating all my content in a single Box composable", you technically are doing that if you just do

setContent {
 Box() {
  OtherContent()
 }
 CircularProgressIndicator()
}

You do get an implicit "box-like" behavior at the top level.
It's then up to you to decide if you want to depend on this implicitness or actually decide where your composables will render.

And having said all this, the order of drawing the composables is still in the order they are declared in the code, top to bottom, provided you are never editing any Z axis anywhere.