Design and Implementation of a Flexible Theme Customization Solution for Car Navigation Applications

Theme customization is a common requirement in many applications. The implementation ideas can be divided into two categories: built‑in themes (custom styles defined inside the app) and external loading methods (resource APKs, compressed resources, plugins, etc.).

Built‑in theme (custom style within the app)

External loading (resource APK, compressed resources, plugins)

Both approaches have their own advantages and disadvantages. The key is to balance and choose a solution that fits the actual project needs, pain points, and maintenance requirements.

Our team develops car‑navigation applications for various customers. Different customers and different distribution channels require different UI themes. As the number of projects grows, a flexible, easy‑to‑manage, low‑cost theme customization solution becomes essential.

Previous Theme Customization Approach

Developers add custom theme controls for the UI that needs customization.

Layouts are built using these custom theme controls.

UED (User Experience Design) modifies the color values in the XML of the custom controls to achieve the theme.

Developers integrate the files configured by UED.

Developers package the build; UED verifies the theme restoration.

The drawbacks of this method are obvious:

High cost: UED must manually edit XML files, which they are often unfamiliar with, leading to a steep learning curve, high error risk, and poor stability.

Low efficiency: After UED edits the XML, it must be sent to developers for replacement, creating a lengthy workflow.

Maintenance difficulty: Themes are scattered across many XML files without unified management.

Poor reusability: Any change to a theme control forces changes to the XML, making reuse hard.

New Solution Design and Implementation

The new workflow keeps UED as the primary owner of theme customization. Developers provide a tooling platform so that after UED finishes the design in Sketch, the theme can be integrated and validated without developer intervention.

3.1 Solution Elements

Theme customization protagonist: UED

Design tool: Sketch

Project requirements: Different projects and channels need different themes. The theme must be packaged with the app (no runtime download). Short project cycles require rapid customization. Themes must be easy to maintain and manage.

The proposed workflow consists of four major steps:

UED creates theme resources in Sketch and uploads them to the cloud.

UED manages the resources on a web‑based theme platform.

Jenkins pulls the resources and packages them into the APK (theme integration).

Real‑device preview to verify the theme.

After the initial implementation, subsequent theme customizations only require copying an existing theme on the web platform and making minor adjustments, dramatically reducing effort.

4.1 Theme Resource Creation

Before UI development, UED designs theme controls in Sketch. A quick‑entry UI in Sketch allows UED to edit theme attributes and upload them with a single click.

4.2 Web Theme Platform Management

The platform stores all customizable resources (controls, illustrations, icon fonts, font sizes, etc.). Users can copy a master theme, create a new one, and customize it instantly, turning a previously cumbersome process into an intuitive operation.

4.3 Real‑Device Preview

After editing, Jenkins packages the resources into the APK. The APK is then deployed to vehicle devices via a fleet‑management system for on‑device verification. UED can quickly assess fidelity and iterate.

Solution Comparison

We compare three typical approaches:

Built‑in theme : Simple to implement and configure, but inflexible.

External loading (APK) : Highly extensible, but requires extensive code changes, long development cycles, and is error‑prone.

Sketch‑based UI theme customization : Leverages Sketch for simultaneous UI and theme design, provides quick preview, enables one‑click upload via a Sketch plugin, and allows round‑trip editing from the backend to Sketch.

The Sketch‑based solution offers seamless integration with the UI design tool, dramatically improving efficiency, reducing cost, and allowing UED to independently complete the entire theme lifecycle.

Conclusion

The proposed scheme tightly integrates with Sketch through a plugin, synchronizes resources with the cloud, and manages them via a web platform. Jenkins handles packaging, and the final APK is verified on real devices. This closed loop enables UED to complete theme creation, management, integration, and validation without developer involvement, significantly lowering cost and improving speed while supporting richer customizations such as illustrations, icon fonts, and more.