Just Eat Neil Davies Jun 30, 2022

Android UI Development with Jetpack

Article Summary

Neil Davies from Just Eat Takeaway reveals how his team eliminated manual theme updates across multiple Android apps. Their solution? A design token system that cut redesign time by 80%.

Just Eat Takeaway built a unified design system called PIE (Principles for Interfaces and Experiences) that generates Android themes automatically from JSON design tokens. They created AndroidPIE, a Kotlin tool that outputs both XML themes for Views and Kotlin classes for Jetpack Compose from a single source of truth.

Key Takeaways

Critical Insight

By automating theme generation from design tokens, Just Eat Takeaway achieved consistent UI across platforms while dramatically reducing the time and errors in implementing design changes.

The team's next ambitious goal involves generating entire UI components directly from Figma designs using Google's new Design to Code initiative.

About This Article

Problem

Just Eat Takeaway's Android team maintained three separate apps for consumers, restaurants, and delivery. Each app had its own UI implementation split between View and Compose frameworks, which meant creating and updating theme files manually for each platform.

Solution

Neil Davies' team built AndroidPIE, a Kotlin application that uses Ktor client and KotlinX Serialization to read design tokens from JSON files. They then used Handlebars templating to automatically generate 16 XML and Kotlin theme files from that single source.

Impact

When the team redesigned the apps with new colors, typography, and shapes, they simply regenerated all the theme files instead of updating each one by hand. This made the redesign much easier to manage and kept everything consistent across the platforms.