Glanceable UI is a key pillar of in-car user experiences, especially in vehicles powered by Android Automotive OS (AAOS). With safety at the core, designing for “at-a-glance” interaction ensures drivers get the information they need with minimal distraction.

In this blog post, we’ll explore:

• What Jetpack Glance is
• How it helps build Glanceable UIs for AAOS
• A practical example: Media playback glance widget
• Best practices for in-car glance design

What Is Jetpack Glance?

Jetpack Glance is a lightweight UI toolkit by Google that allows developers to build glanceable app widgets using Jetpack Compose principles.

While it’s widely used for Android home screen widgets, it also plays a growing role in automotive contexts, where modular, safe, and context-aware UI components are essential.

Key Benefits:

• Declarative UI (Compose-style)
• Lightweight and fast
• Surface-aware (homescreen, dashboard, etc.)
• Seamlessly integrates with AAOS and Assistant

Why Glanceable UI Matters in Cars

An ideal in-car interface (for media, navigation, etc.) should be so intuitive, voice-driven, glanceable, and minimal that drivers can use it with little or no visual attention — keeping their eyes on the road and hands on the wheel.

Android Automotive is designed to operate under strict UX restrictions to reduce cognitive load and visual complexity while driving. Glanceable UI is about showing just enough information for a quick decision or action.

Example Use Cases:

• Resume last media playback
• Quick access to a recent contact
• Show estimated time to destination
• Weather or fuel level notifications

Setup: Adding Jetpack Glance to Your AAOS Project

First, make sure to add the required dependencies:

dependencies {
    implementation("androidx.glance:glance:1.1.1")
    implementation("androidx.glance:glance-appwidget:1.1.1")
}

Jetpack Glance is evolving, so make sure to check the latest versions here.

Example: Glanceable Media Playback Widget

Let’s say you want to display a media card with the currently playing song, a thumbnail, and basic controls like play/pause.

Step 1: Create Your Glance Widget

class MediaPlaybackWidget : GlanceAppWidget() {
    override suspend fun provideGlance(context: Context, id: GlanceId) {
        provideContent {
            MediaPlaybackContent()
        }
    }
}

Step 2: Build the UI Using Glance

@Composable
fun MediaPlaybackContent() {
    val mediaState = rememberMediaState()

    Column(
        modifier = GlanceModifier
            .fillMaxWidth()
            .padding(16.dp)
            .background(ImageProvider(R.drawable.widget_bg))
    ) {
        Text(
            text = mediaState.title,
            style = TextStyle(fontSize = 18.sp, fontWeight = FontWeight.Bold),
            maxLines = 1
        )
        Text(
            text = mediaState.artist,
            style = TextStyle(fontSize = 14.sp, color = Color.Gray),
            maxLines = 1
        )

        Row(
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = GlanceModifier.fillMaxWidth()
        ) {
            Image(
                provider = ImageProvider(R.drawable.ic_prev),
                contentDescription = "Previous",
                modifier = GlanceModifier.clickable { /* skipPrevious() */ }
            )
            Spacer(modifier = GlanceModifier.width(8.dp))
            Image(
                provider = if (mediaState.isPlaying)
                    ImageProvider(R.drawable.ic_pause)
                else
                    ImageProvider(R.drawable.ic_play),
                contentDescription = "Play/Pause",
                modifier = GlanceModifier.clickable { togglePlayback() }
            )
            Spacer(modifier = GlanceModifier.width(8.dp))
            Image(
                provider = ImageProvider(R.drawable.ic_next),
                contentDescription = "Next",
                modifier = GlanceModifier.clickable { /* skipNext() */ }
            )
        }
    }
}

Pro Tips for Designing Glanceable UI in AAOS

UX Restrictions You Must Follow

Google enforces strict glanceable design rules for AAOS:

• No scrolling UI
• No long lists
• No non-essential buttons
• Only relevant, context-sensitive info
• Safety is non-negotiable: Design for drivers, not passengers

If your app violates these, it may be rejected or hidden when driving.

Conclusion

Jetpack Glance enables a new era of modular, composable, and glance-friendly UI for Android Automotive OS. By respecting the driving context and focusing on essential, actionable information, developers can create interfaces that enhance the in-car experience—without compromising safety.

Remember: In the car, less is more. Show less, do more.