Meta Ray-Ban Display Glasses: Building a Real-Time HUD App with Kotlin

Introduction

Display-enabled smart glasses introduce a new application surface: information can be presented without requiring the user to look at a phone.

This tutorial presents a Kotlin architecture for a simple heads-up-display style application.

Architecture

Android App
   |
   +--> Wearable Device API
   |
   +--> Application State
   |
   +--> Display Renderer
             |
             v
       Smart Glasses Display

1. Create an Android project

Create a Kotlin Android application in Android Studio.

Use the official Meta documentation to configure the supported wearable SDK, application registration, permissions, and device capabilities.

2. Define a display model

data class DisplayCard(
    val title: String,
    val body: String
)

3. Create a display controller

class GlassesDisplayController {

    fun show(card: DisplayCard) {
        // Translate application state into the
        // display API supported by the target glasses.
    }

    fun clear() {
        // Clear the supported display surface.
    }
}

The exact display calls depend on the wearable SDK and supported glasses model.

4. Connect application events

val controller = GlassesDisplayController()

controller.show(
    DisplayCard(
        title = "Navigation",
        body = "Turn right in 100 meters"
    )
)

5. Add an AI-generated notification

A backend can produce a short result which is converted into a display card:

fun showAiResult(text: String) {
    controller.show(
        DisplayCard(
            title = "Assistant",
            body = text.take(120)
        )
    )
}