DEV Community

vmodal_ai
vmodal_ai

Posted on

Building a Robot Dashboard with Jetpack Compose

#android #kotlin #robotics #jetpackcompose

Building a Robot Dashboard with Jetpack Compose

Introduction

A robot dashboard gives operators a single interface for monitoring and controlling a Physical AI system. Jetpack Compose makes it possible to build a responsive dashboard using declarative Android UI.

In this tutorial, we will create the architecture for a dashboard that displays robot connectivity, battery, operating mode, telemetry, and control actions.

Dashboard Architecture 

Robot / ROS 2
     |
 Robot Gateway
     |
 Kotlin Repository
     |
 ViewModel + StateFlow
     |
 Jetpack Compose
Enter fullscreen mode Exit fullscreen mode

The UI should observe state rather than communicate directly with the robot.

Robot State

Define a single state model:

data class RobotState(
    val connected: Boolean = false,
    val battery: Int = 0,
    val mode: String = "IDLE",
    val speed: Double = 0.0
)
Enter fullscreen mode Exit fullscreen mode

The ViewModel can expose it using StateFlow:

private val _robotState = MutableStateFlow(RobotState())
val robotState = _robotState.asStateFlow()
Enter fullscreen mode Exit fullscreen mode

Compose Dashboard

A simple dashboard can contain cards for each important metric:

@Composable
fun RobotDashboard(state: RobotState) {
    Column {
        Text("Robot Dashboard")
        Text("Status: ${if (state.connected) "ONLINE" else "OFFLINE"}")
        Text("Battery: ${state.battery}%")
        Text("Mode: ${state.mode}")
        Text("Speed: ${state.speed} m/s")
    }
}
Enter fullscreen mode Exit fullscreen mode

For a production application, split the screen into reusable components such as StatusCard, BatteryCard, TelemetryCard, and ControlPanel.

Robot Controls

Controls should send commands through the ViewModel:

Button(
    onClick = { viewModel.stopRobot() }
) {
    Text("Emergency Stop")
}
Enter fullscreen mode Exit fullscreen mode

Keep command execution outside composables so the UI remains testable.

Telemetry

Telemetry can be collected from a repository:

class RobotRepository {
    fun observeState(): Flow<RobotState> {
        // Connect to gateway
        TODO()
    }
}
Enter fullscreen mode Exit fullscreen mode

The ViewModel collects the stream and exposes it to Compose.

Responsive UI

Robot dashboards may run on phones, tablets, rugged devices, or large operator displays. Use Compose adaptive layouts and avoid hard-coded dimensions.

A useful layout is:

+----------------------------------+
| Robot Status        Battery 87%  |
+----------------------------------+
| Telemetry            Controls    |
| X: 2.4               ↑           |
| Y: 1.8            ← STOP →       |
| Speed: 0.8             ↓         |
+----------------------------------+
Enter fullscreen mode Exit fullscreen mode

Safety

Never make the dashboard the only safety mechanism. Emergency-stop and motion limits should be enforced by the robot-side control system.

Useful UI indicators include:

  • Connection status
  • Autonomous/manual mode
  • Battery level
  • Current velocity
  • Emergency-stop state
  • Sensor warnings

Conclusion

Jetpack Compose is a strong choice for modern Android robot dashboards. A state-driven architecture using Kotlin, StateFlow, ViewModel, and a dedicated robot gateway keeps the UI responsive and separates presentation from robotics communication.

Useful Links

SDK Flutter: https://github.com/v-modal/vmodal_sdk_flutter

SDK Android: https://github.com/v-modal/vmodal_sdk_android

Discord: https://discord.gg/K72z28KUx

Top comments (0)