An Android project to showcase a multi-brand design system.

Overview

Banner with the project name and the following description: An Android project to showcase a multi-brand design system. It also shows an animated preview of a sample app.

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

Project's architecture flowchart

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>

Note: Besides your custom ones, you can also use attributes from a Material Theme, as can be seen here and here.

theme:brand:<name>

Preview of a custom view changing its appearance from red to blue based on the selected theme

Implements the custom attributes declared in the theme:base module.
Each theme may have its own values, based on the design identity of given variant.

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

component:<name>

Creates an Android custom view. Since this view is meant to be part of a multi-brand design system, it should almost always use the custom attributes from the theme:base, rather than setting hardcoded values.

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

Testing

Since one of the goals of this project was to try Paparazzi, only snapshot testing was explored.

Preview of a snapshot testing result, showing the difference between the expected and actual images.

Other ways of testing such as Espresso (as can be seen here) should also do the job.

Roadmap

You might also like...
ArduinoJava - A project that uses the JSSC library
ArduinoJava - A project that uses the JSSC library

ArduinoJava este es un proyecto que utiliza la libreria JSSC para connectarse al

UpSchool Capstone Project - Course selling application with MVVM, LiveData, DataBinding, Retrofit, Room Database, Navigation Component,  Adapter, Firebase Auth, Picasso, Lottie
UpSchool Capstone Project - Course selling application with MVVM, LiveData, DataBinding, Retrofit, Room Database, Navigation Component, Adapter, Firebase Auth, Picasso, Lottie

UpSchool Capstone Project - Course selling application with MVVM (Model, View, ViewModel), LiveData, DataBinding, Retrofit, Room Database, Navigation Component(NavGraph, BottomNav), Adapter, Firebase Auth, Picasso, Lottie

SL4A brings scripting languages to Android by allowing you to edit and execute scripts and interactive interpreters directly on the Android device.

#Scripting Layer for Android (SL4A) SL4A brings scripting languages to Android by allowing you to edit and execute scripts and interactive interpreter

****. Use the native and support library variants instead - https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html. An android library that makes it easy to add custom fonts to edittexts and textviews

Add to your project Add this line to your dependencies in build.gradle compile 'in.workarounds.typography:typography:0.0.8' Using the views There are

ZXing (
ZXing ("Zebra Crossing") barcode scanning library for Java, Android

Project in Maintenance Mode Only The project is in maintenance mode, meaning, changes are driven by contributed patches. Only bug fixes and minor enha

RxJava binding APIs for Android's UI widgets.

RxBinding RxJava binding APIs for Android UI widgets from the platform and support libraries. Download Platform bindings: implementation 'com.jakewhar

A gradle plugin for getting java lambda support in java 6, 7 and android

Gradle Retrolambda Plugin This plugin will automatically build your java or android project with retrolambda, giving you lambda goodness on java 6 or

A comprehensive tutorial for Android Data Binding
A comprehensive tutorial for Android Data Binding

精通 Android Data Binding 更多干货可移步至个人主页 QQ 交流群:324112728 ,或者点击链接加入QQ群 官方虽然已经给出了教程 - Data Binding Guide (中文版 - Data Binding(数据绑定)用户指南) ,但是实践之后发现槽点实在太多,于是就

A Job Queue specifically written for Android to easily schedule jobs (tasks) that run in the background, improving UX and application stability.

Development in this repository is stopped. Future development continues on https://github.com/yigit/android-priority-jobqueue ========================

Owner
Guilherme de Sá Christovão
Android Engineer
Guilherme de Sá Christovão
Simple system for building dialogue in Cepi

Dialogue Dialogue builder for Cepi Installation Download the jar from Releases OR compile it yourself. Instructions to do so are in Compile header Dro

Cepi 2 Dec 14, 2022
Starter-Android-Library - Starter Android Library is an Android Project with Modular Architecture.

Starter-Android-Library - Starter Android Library is an Android Project with Modular Architecture.

OpenBytes 1 Feb 18, 2022
Purpose for this base architectural project is to load it with all latest components and libraries So it become reference for all kind of Android projects

The purpose of this base architectural project is to load it with all the latest components and libraries, So it becomes a reference for all kinds of Android projects

null 7 Dec 7, 2021
File Picker for KMP project. Works for Android/JVM/Web.

KFilePicker File Picker for KMP project. Works for Android/JVM/Web. Setup Add Jitpack maven { url

Tlaster 7 Nov 11, 2022
Android App development internship project to create woman home screen for clothing company The Swastika.

Android App development internship project to create woman home screen for clothing company The Swastika.

Shradha Suryawanshi 2 Jun 12, 2022
A template project that builds a SDL application programmed in Zig to Android from scratch

A template project that builds a SDL application programmed in Zig to Android from scratch

Matheus Lessa 11 Jul 19, 2022
vShell (Virtual Shell) — a successor of Termux project which provides an alternate implementation of the Linux terminal emulator for Android OS

vShell (Virtual Shell) — a successor of Termux project which provides an alternate implementation of the Linux terminal emulator for Android OS

null 2 Feb 1, 2022
This project is an investigation of Hystrix in the Kotlin language

from-paris-to-berlin-circuit-breaker Technologies used This project is an investigation of Circuit-Breakers in the Kotlin language ?? ?? ?? ?? ?? ?? U

João Filipe Sabino Esperancinha 3 Dec 8, 2022
Using Resilience4J, this is a Demo project which uses a Library as background and manages all its requests.

Using Resilience4J, this is a Demo project which uses a Library as background and manages all its requests. This library can rent books online and the usage rate is extremely high. There is a reactive way to access, which is the one normally used, but sometimes, the system needs a bit of help from an old machine running a non-reactive MVC Spring application using JPA. Let's make this in Kotlin and find the best solution!

João Filipe Sabino Esperancinha 2 Jan 10, 2022
A VikeLabs project meant for navigating around UVic

maps This is a VikeLabs project meant for navigating around UVic. It's structured as a multi-module gradle project with an api server and a web app (i

VikeLabs 3 Feb 11, 2022