Compose Server-Driven UI Analyzer

Jetpack Compose Android project that renders screens from JSON and includes a runtime analyzer for load latency, parse cost, first render timing, UI tree complexity, interactions, and lazy list item activity.

What This Project Shows

• Server-driven UI rendering from JSON screen definitions
• Recursive Compose renderer for nested node trees
• Dynamic text binding with placeholders like {{name}}
• Action handling for navigation, toast messages, and state updates
• Runtime analyzer for screen performance and interaction metrics
• Lazy container support with LazyColumn and LazyRow

Demo Screens

Home

• Intro screen and navigation hub
• Text input bound to dynamic state
• Live text binding preview

Lazy Demo

• LazyRow and LazyColumn rendered from JSON
• Lazy item activity surfaced in the runtime analyzer

Components Demo

• Nested Column, Row, Card, Spacer, Text, and Button
• Shows richer layout composition from the same rendering engine

Runtime Analyzer

The analyzer panel tracks:

• Screen load time
• JSON parse time
• First render time
• Rendered node count
• Component type breakdown
• Lazy container count
• Lazy item count
• Text input update count
• Button click count
• Navigation count
• LazyColumn item activity
• LazyRow item activity

Architecture

Data Layer

• data.parser Parses JSON and maps DTOs into internal screen models
• data.repository Loads screen definitions from local assets

Domain Layer

• domain.model Defines UiScreen, UiNode, UiAction, and modifier models
• domain.engine Contains runtime engine helpers such as:
  • ActionHandler
  • TextBindingResolver
  • UiStateStore

UI Layer

• ui.renderer Orchestrates dynamic rendering and tree metrics
• ui.components Individual node renderers for Compose components
• ui.screens Screen host, view model, and UI state

Analyzer

• analyzer Runtime metrics model and analyzer panel UI

Rendering Flow

1. A screen JSON file is loaded from assets.
2. JsonScreenParser decodes JSON DTOs and maps them to domain models.
3. ViewerViewModel loads the screen and updates runtime metrics.
4. DynamicScreenRenderer recursively renders the node tree using component renderers.
5. The analyzer panel shows runtime and lazy list metrics for the active screen.

Example JSON

{
  "id": "home",
  "title": "Home",
  "root": {
    "id": "home_root",
    "type": "column",
    "props": {
      "scrollable": "true"
    },
    "children": [
      {
        "id": "name_input",
        "type": "textField",
        "props": {
          "label": "Your name",
          "valueKey": "name"
        }
      },
      {
        "id": "name_preview_text",
        "type": "text",
        "props": {
          "text": "Hello {{name}}"
        }
      }
    ]
  }
}

Project Structure

app/src/main/java/com/rohitkhandelwal/dynamicuianalyzer
├── analyzer
├── data
│   ├── parser
│   │   └── dto
│   └── repository
├── domain
│   ├── engine
│   └── model
├── ui
│   ├── components
│   ├── renderer
│   ├── screens
│   └── theme
└── MainActivity.kt

How To Run

1. Open the project in Android Studio.
2. Sync Gradle dependencies.
3. Run the app on an emulator or device.
4. Start from the home screen and navigate to the lazy and component demos.

Why This Is Useful

This project demonstrates how a Compose UI can be driven by data instead of hardcoded screens, while still exposing runtime insights that help reason about performance and screen complexity.

It is designed as a portfolio-style Android project that balances:

• architecture clarity
• Compose rendering
• runtime instrumentation
• UI flexibility

Future Improvements

• Remote API-backed screen repository
• Schema validation and debug warnings
• Weight/flex-style layout support
• More advanced lazy list metrics
• Image component support
• Expand/collapse analyzer sections
• Better runtime event tracing