Skip to content

Android implementation of the Flamingo Design System

License

Notifications You must be signed in to change notification settings

flamingo-ux/flamingo-android

Repository files navigation

It is an Android implementation of the Flamingo Design System.

It Consists Of:

UI Components:

components-gallery.png components-gallery.png

Palette, theme colors, typography, icon set, illustrations and gradients:

Playground App Collage

Useful links

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).

Here you can see a brief demonstration of the design system: Youtube Videos

Download Flamingo Playground App

Getting Started

  1. Download .aars of flamingo and flamingo-roboto-font modules from the releases page

  2. Put them in /project name/libs/ folder

  3. Add this to your module's build.gradle(.kts):

    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).

It can be downloaded separately here.

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 page

  2. Put it in /project name/libs/ folder

  3. Add this line in your staging module's build.gradle.kts:

    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 (not recommended):

    Example
    android {
        // ...
        productFlavors {
            create("staging") {}
            create("production") {}
        }
    }
    
    dependencies {
        // ...
        stagingImplementation(files("$rootDir/libs/flamingo-playground-LATEST_VERSION.aar"))
    }
    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

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. <br> Needed only in <br>:app module; in feature<br>modules — only if fonts<br>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<br>to create local UI<br>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
Loading