Table of contents

1. Introduction
2. Structure
3. Architecture
4. Implementation
5. Testing
6. Roadmap

Introduction

This is an Android showcase project based on Pokémon.

The main goals of this project were to:

• Show how to create a design system compatible with multi-brand themes.
• Try Paparazzi, an open source snapshot testing library developed by Cash App team.

I chose to use Pokémon as an example because it was the perfect case of a multi-brand theme usage.
Since the first generation of games were released, they always used the idea of creating basically one base game, but with different themed variants for the game's boxes and cartridges, as well as some other contents.

Structure

.
├── app                   # Project sample (android-application)
├── buildSrc              # Dependency management with Kotlin DSL
├── component             # Design system components (android-libraries)
│   └── player
└── theme
    ├── base              # Base theme and attributes (android-library)
    └── brand             # Brand theme implementations (android-libraries)
        ├── blue
        ├── green
        ├── red
        └── yellow

Architecture

For the purpose of creating an actual sample, the project presents just one android-application module, which implements all four themes.

In the image above, it is presented a scenario where multiple apps were meant to be created, each one of them with its respective theme. In a real project, this would most likely be the case.

Implementation

This is a multi-module project and each piece have its own responsibility.

theme:base

Defines the custom attributes to be implemented by the theme:brand modules, as well as its base Android theme.
These attributes are like an interface: it doesn't have a value on its own, but defines a sort of contract to be implemented by whoever uses it.

<resources>
    
    <attr name="colorPrimary" format="color" />
    
    <attr name="pokeImage" format="reference" />
resources>

<resources>
    <style name="PokemonRedTheme" parent="PokemonBaseTheme">
        <item name="colorPrimary">#c62828item>
    style>
resources>

<gradient
    android:angle="?attr/angleGradient"
    android:endColor="?attr/colorPrimary"
    android:startColor="?attr/colorPrimaryVariant" />