Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/guichristovao/poke-themes
An Android project to showcase a multi-brand design system.
https://github.com/guichristovao/poke-themes
android design-system snapshot theme
Last synced: 9 days ago
JSON representation
An Android project to showcase a multi-brand design system.
- Host: GitHub
- URL: https://github.com/guichristovao/poke-themes
- Owner: guichristovao
- Created: 2022-01-25T01:34:32.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-30T03:36:23.000Z (about 2 years ago)
- Last Synced: 2024-08-01T19:53:26.439Z (4 months ago)
- Topics: android, design-system, snapshot, theme
- Language: Kotlin
- Homepage:
- Size: 2.22 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-list - guichristovao/poke-themes - An Android project to showcase a multi-brand design system. (Kotlin)
README
# Table of contents
1. [Introduction](#introduction)
2. [Architecture](#architecture)
- [Structure](#structure)
- [Diagram](#diagram)
- [Stack](#stack)
3. [Implementation](#implementation)
- [Tests](#tests)
4. [Roadmap](#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](https://github.com/cashapp/paparazzi), an open source snapshot testing library developed by [Cash App](https://github.com/cashapp) 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.
# Architecture
## 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
```
## Diagram
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.
## Stack
- [Kotlin](https://developer.android.com/kotlin)
- [Gradle Kotlin DSL](https://docs.gradle.org/current/userguide/kotlin_dsl.html)
### Testing
- [Paparazzi](https://github.com/cashapp/paparazzi)
- [TestParameterInjector](https://github.com/google/TestParameterInjector)
# Implementation
This is a multi-module project and each piece have its own responsibility.
## theme:base
Defines the [custom attributes](https://developer.android.com/training/custom-views/create-view#customattr) to be implemented by the [theme:brand](#themebrandname) modules, as well as its base [Android theme](https://developer.android.com/guide/topics/ui/look-and-feel/themes).
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.
```xml
```
> Note: Besides your custom ones, you can also use attributes from a Material Theme, as can be seen [here](https://material.io/develop/android/docs/getting-started) and [here](https://material.io/blog/android-material-theme-color).
## theme:brand:<_name_>
Implements the [custom attributes](https://developer.android.com/training/custom-views/create-view#customattr) declared in the [theme:base](#themebase) module.
Each theme may have its own values, based on the design identity of given variant.
```xml
<item name="colorPrimary">#c62828</item>
```
## component:<_name_>
Creates an [Android custom view](https://developer.android.com/guide/topics/ui/custom-components). Since this view is meant to be part of a multi-brand design system, it should almost always use the [custom attributes](https://developer.android.com/training/custom-views/create-view#customattr) from the [theme:base](#themebase), rather than setting hardcoded values.
```xml
```
## Tests
Since one of the goals of this project was to try [Paparazzi](https://github.com/cashapp/paparazzi), only snapshot testing was explored.
Other ways of testing such as using [Espresso (as can be seen here)](https://developer.android.com/training/testing/instrumented-tests) should also do the job.
# Roadmap
- [ ] [Jetpack Compose](https://developer.android.com/jetpack/compose).
- [ ] [GitHub Actions](https://github.com/features/actions).