Awesome

Mistica is a framework that contains reusable UI components and utilities.

Compose support

There is a currently work in progress compose version of the library. Check the documentation here

Installation

Inside the dependency block in the build.gradle of your application, add this line to add the library:

repositories {
    mavenCentral()
}
dependencies {
    ...
    implementation 'com.telefonica:mistica:$version'
    ...
}

In case you also want to include also the components catalog in your application:

dependencies {
    ...
    implementation 'com.telefonica:mistica:$version'
    implementation 'com.telefonica:mistica-catalog:$version'
    ...
}

Configuration

Mistica provides an Android theme for each brand supported by telefonica. Just set your App or any specific activity to use any of the following:

• MisticaTheme.Movistar
• MisticaTheme.O2
• MisticaTheme.Vivo
• MisticaTheme.Telefonica
• MisticaTheme.Blau

<manifest ...>
    <application
        ...
        android:theme="@style/MisticaTheme.Movistar" />
</manifest>

Components

• Badges
• Buttons
• Callout
• Carousel
• Controls
• Data Cards
• Empty State Cards
• Empty States
• Filters
• Headers
• Highlighted Cards
• Inputs
• Lists
• Load Error Feedback
• Media Cards
• Pop Overs
• Poster Card
• Screen Feedbacks
• Scroll Content Indicator
• Sheet
• Skeletons
• Snackbars
• Steppers
• Tabs
• Tags
• Title
• HighLightedCard (Compose version)

Text Presets Styles

Library includes a set of available Text Appearance styles, applicable for all kind of TextViews.

Using fonts

Mistica defines 3 typographic styles to be used along with the library, these typefaces are defined as attributes and can be override using some allowed fonts. More info here

Working with semantic colors/gradients

For each supported brand, Mistica exposes a set of theme properties (attributes in xml) customized accordingly for each brand.

More info here

Demo app

There is a demo of currently implemented components in this repository. A full list of implemented components can be found here: Components.

The app can be downloaded here or manually built.

To compile the app manually run the App module in Android Studio.

Working with this project locally

In case you are making a change in the library that yoy want to test in other client app but you don't want to release a new version or even an snapshot, then a local deployment of the lib can be done on your machine.

Some small changes that shouldn't be committed are needed:

• Comment signing section inside mavencentral.gradle file. The reason is because you probably won't have the secrets for signing the library aar and because they aren't actually needed for this kind of local deployment.

/*
signing {
    def signingKeyId = findProperty("signingKeyId")
    def signingKey = findProperty("signingKey")
    def signingPassword = findProperty("signingPassword")
    useInMemoryPgpKeys(signingKeyId, signingKey, signingPassword)
    sign publishing.publications
}
*/

• Set a preferred SNAPSHOT version for your local release in mavencentral.gradle:

PUBLISH_VERSION = '1.0.0-SNAPSHOT'

• Build the artifacts:

./gradlew clean :library:assembleRelease :catalog:assembleRelease

• Release the artifacts to your local maven repository (~.m2directory). Note the ToMavenLocal suffix:

./gradlew :library:publishReleasePublicationToMavenLocal :catalog:publishCatalogPublicationToMavenLocal

• Now you can go back to your client app repository, add mavenLocal() to the list of repositories on build.gradle

allprojects {
    repositories {
        mavenLocal() // It is recommended to place it on first place
        // ... your other repositories
    }
}

• Update the version of mistica to the one the snapshot was released with, sync your project and the dependency should be resolved with the artifact including your local changes.

Snapshot generation with GitHub Action

To create a new snapshot go to the snapshot.yml Action, select a branch and enter the version, like x.x.x

After a while, the new version will be available, keep in mind that the version name will be x.x.x-SNAPSHOT

Design tokens

We have several tokens that are defined by the UX team (colors, radius and text presets) in a JSON format. Using these files, we generate XML and Kotlin files that are used in the library.

You should not modify manually the generated files. All the generated files have a comment at the beginning to identify them.

There is a more detailed documentation about how to work with this design tokens generation.

Library size

Library aar size is around 270 KB, without including transitive dependencies (Lottie, material and kotlin).

Your app size increase may depend on which of these transitive libraries are already being used, and also, the usage of them, so proguard can shrink more or less code.

Just to put an example, in a common scenario where your app is already using material and kotlin libs, app size increase should be around 400 KB

Contributing

See CONTRIBUTING.md

Upgrading guide

See UPGRADING.md