Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/flamingo-ux/flamingo-android
Android implementation of the Flamingo Design System
https://github.com/flamingo-ux/flamingo-android
android design-system jetpack-compose kotlin ksp playground-app
Last synced: 3 months ago
JSON representation
Android implementation of the Flamingo Design System
- Host: GitHub
- URL: https://github.com/flamingo-ux/flamingo-android
- Owner: flamingo-ux
- License: other
- Created: 2022-05-17T12:44:10.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-07T16:49:53.000Z (about 1 year ago)
- Last Synced: 2024-08-01T19:52:59.500Z (6 months ago)
- Topics: android, design-system, jetpack-compose, kotlin, ksp, playground-app
- Language: Kotlin
- Homepage:
- Size: 5.21 MB
- Stars: 40
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - flamingo-ux/flamingo-android - Android implementation of the Flamingo Design System (Kotlin)
README
It is an Android implementation of the Flamingo Design System.
## It Consists Of:
UI Components:
Palette, theme colors, typography, icon set, illustrations and gradients:
## Useful links
- [Introductory article on Medium](https://popovanton0.medium.com/building-a-modern-design-system-using-jetpack-compose-8bd8084e8b0c)
- [Youtube-playlist with Theater videos](https://www.youtube.com/playlist?list=PLGEKQ_tCWabRme1pUVZJLektqXXfDIW2G)
- [Flamingo space in Confluence](https://confluence.companyname.ru/x/cIMLOwE)
- [Android section in Confluence space](https://confluence.companyname.ru/x/v4cgegE)
- [Meetup Q3 2022 (Jetpack Compose)](https://youtu.be/QW6lD5ip9xs)
- [Meetup Q2 2021 (Android View impl only)](https://youtu.be/oRbQns82FX4)
# Playground App
Flamingo Playground is a demonstration app that contains __live__ (meaning generated using _real_
code) demos of various design system components
(see _[It consists of](https://github.com/flamingo-ux/flamingo-android#It-consists-of)_).
Here you can see a brief demonstration of the design system:
__[Youtube Videos](https://youtube.com/playlist?list=PLSzrfgGrhXFpKbRy-IA5Ju3sOpbFQa5ZX)__
__[Download](https://github.com/flamingo-ux/flamingo-android/releases)__ Flamingo Playground App
# Getting Started
1. Download `.aar`s of `flamingo` and `flamingo-roboto-font` modules from the
[releases](https://github.com/flamingo-ux/flamingo-android/releases) page
2. Put them in `/project name/libs/` folder
3. Add this to your module's `build.gradle(.kts)`:
```kotlin
implementation(files("$rootDir/libs/flamingo-LATEST_VERSION.aar"))
implementation(files("$rootDir/libs/flamingo-roboto-font-LATEST_VERSION.aar"))
```
4. Call `initRobotoTypography()` before the first call to the `FlamingoTheme`
If you are an internal user
Use _releases_ page in confluence and use `flamingo-sbsans-font` module instead
### Playground
Flamingo Playground is a demonstration app that contains __live__ (meaning generated using _real_
code) demos of various design system components
(see _[It consists of](https://github.com/flamingo-ux/flamingo-android#It-consists-of)_).
It can be downloaded separately [here](https://github.com/flamingo-ux/flamingo-android/releases).
In addition, playground contains various debugging developer tools that facilitate painless
integration and further support of the design system in __your__ product.
To be able to use those, add the Flamingo Playground to your app:
1. Download `.aar` of `flamingo-playground` module from the
[releases](https://github.com/flamingo-ux/flamingo-android/releases) page
2. Put it in `/project name/libs/` folder
3. Add this line in your _staging_ module's `build.gradle.kts`:
```kotlin
implementation(files("$rootDir/libs/flamingo-playground-LATEST_VERSION.aar"))
```
If you are an internal user
Use _releases_ page in confluence
If your project doesn't have a staging module, use
[_build variants_](https://developer.android.com/studio/build/build-variants) (not recommended):
Example
```kotlin
android {
// ...
productFlavors {
create("staging") {}
create("production") {}
}
}
dependencies {
// ...
stagingImplementation(files("$rootDir/libs/flamingo-playground-LATEST_VERSION.aar"))
}
```
Groovy
```groovy
android {
productFlavors {
staging {}
production {}
}
}
dependencies {
// ...
stagingImplementation(files("$rootDir/libs/flamingo-playground-LATEST_VERSION.aar"))
}
```
4. Add a button to your app's debug screen that launches `com.flamingo.playground.FlamingoPlaygroundActivity`.
# Modules Graph
```mermaid
graph TD;
subgraph staging
TRGT_APP_ST(your-app-staging);
FL_PG(flamingo-playground);
FL_PG_APP(flamingo-playground-app);
FL_DEMO_API(flamingo-component-demo-api);
TH(theater);
end
FONT_CHOOSER{"One of 2 modules.
Needed only in
:app module; in feature
modules — only if fonts
in XML are needed"};
FL(flamingo);
FL_ROBOTO(flamingo-roboto-font);
FL_SBSANS("flamingo-sbsans-font (closed source)");
FL_LT(flamingo-lint);
TRGT_APP(your-app-prod);
FL -- Includes lint checks --> FL_LT
FL_LT -. "Waits for crab to complete ksp" .-> FL_PG
FL_PG --> FL;
FL_PG --> TH;
FL_PG --> FL_DEMO_API;
FL_PG_APP --> FL_PG;
TRGT_APP --> FL;
TRGT_APP_ST --> TRGT_APP;
TRGT_APP_ST --> FL_PG;
TRGT_APP_ST -- Only if you want
to create local UI
component demos --> FL_DEMO_API;
TRGT_APP --> FONT_CHOOSER;
FONT_CHOOSER --> FL_ROBOTO;
FONT_CHOOSER --> FL_SBSANS;
%% TRGT_APP_ST --> TRGT_APP;
click TH "https://github.com/flamingo-ux/theater" _blank
click FL "https://github.com/flamingo-ux/flamingo-android/flamingo" _blank
click FL_PG "https://github.com/flamingo-ux/flamingo-android/flamingo-playground" _blank
click FL_PG_APP "https://github.com/flamingo-ux/flamingo-android/flamingo-playground-app" _blank
click FL_LT "https://github.com/flamingo-ux/flamingo-android/flamingo-lint" _blank
```