I want to draw a rectangle on every composable in the hierarchy for debugging purposes, but i dont k...

# compose

[Alex Styl]

I want to draw a rectangle on every composable in the hierarchy for debugging purposes, but i dont know how to start with this.

Is there any way to either draw on all composables or maybe get the bounds of every composable in the hierarchy?

[Chrimaeon]

My first idea would be a Modifier.

[Sergey Y.]

Compose already has support for 'Show Layout Bounds' in the Android Developer Settings, which you can utilize. If you need to draw a specific rectangle, you can do so by using Modifier.drawWithContent or Modifier.drawBehind. However, you will need to apply it manually where you want to visualize the bounds.

[Alex Styl]

@Sergey Y. im not on android

[Sergey Y.]

I did it this way https://twitter.com/desugar_64/status/1771157396238283100?t=tMN_-8k7-bhvKdO4bSY2dw&s=19

[Alex Styl]

@Chrimaeon any specific apis to get the bounds of every child? im not familiar with custom modifiers

[Sergey Y.]

AFAIK, there are no API for that.

[Chrimaeon]

https://developer.android.com/develop/ui/compose/custom-modifiers

[Chrimaeon]

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]ain/java/androidx/compose/ui/samples/ModifierSamples.kt;l=313

[Sergey Y.]

I've finally found it. Square has a similar library which you can find at https://github.com/square/radiography.
I'm not sure if it supports multiplatform, but you can check how they read the widget hierarchy.