Visualizing Component Tree in Jetpack Compose

Viewed 1074

In Android View System you can see the UI tree of different elements that make up the view hierachy for example as shown below:

enter image description here

Apart from Previewing the Composables, I am looking for a way to visualize the Composables in a Component Tree for example given this code:

    @Composable
    fun TodoScreen(....) {
    
    Column(){
    LazyColumn{
    
    ...}
    Row{
    
    Button(){....}
    Text(){...}
    
    }
    
    }
}

Please let me know if there is a way to display a Component Tree on Android Studio Arctic Fox similar to the above Android View Hierachy Image.

1 Answers

You can use View -> Tool Windows -> Layout Inspector

enter image description here

Related