After completing this guide, your Android app will be themed according to your branding. Before following these steps, make sure you've successfully created a theme with the Backbase Visualizer.
Once you’ve exported your theme, you should have a folder that includes:
|
Description |
Contents |
|---|---|
|
The design tokens file |
defaultTokens.json |
|
A logos folder with your brand's logos |
.svg logo files |
|
A fonts folder with your brand's fonts |
.ttf or .otf font files |
Import tokens file
In this step you will set up your Android project, using a plugin to transform the design data from the defaultTokens.json to a legible XML output that Android apps can understand.
Register maven repository
First, ensure the Backbase Maven repository is registered in pluginManagement, located in the settings.gradle file.
pluginManagement {
repositories {
maven {
url = uri("https://repo.backbase.com/backbase-mvn-release")
credentials(PasswordCredentials::class)
}
// Other repositories definition
}
}
Add the plugin to your build.gradle file
Once your maven repository is successfully registered, you can proceed by adding the Visualizer plugin to the top level build.gradle file.
plugins {
id("com.backbase.android.visualizer") version "1.1.0" apply false
}
Register the theme for generation of XML files
Then in the application build.gradle file, add the plugin and using the Visualizer extension register the theme to be generated from the defaultTokens.json file.
plugins {
id("com.backbase.android.visualizer")
}
visualizer {
themes {
register("Theme.Backbase.Default") {
jsonFile = layout.projectDirectory.file("themes/defaultTokens.json")
}
}
}
Extend your base theme
Now finally, in your project’s res folder, find the theme.xml file and extend your theme from the Base.Theme. During the build of the project, the Visualizer plugin generates the XML theme files. The generated files are placed under the project’s build folder, so developers cannot modify them but can extend them.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyApplicationTheme" parent="Theme.Backbase.Default"/>
</resources>
Import logos
Logos can be loaded into the application theme, making them globally available for all journeys. Two variations of the logo are supported (i.e. square and wide). To add them in your application you need to follow these steps:
Add logos as drawables to your project
First, find the drawable folder in your project, right click on the folder and then under New select Vector Asset which will open a dialog window. In the window, under the Asset type field, select Local file (SVG, PSD) to upload the logo files from your computer. For more guidance, visit the official documentation for the Vector Convertor Tool.
The logo tokens should appear in your theme.xml file similar to this:
<style name="MyApplicationTheme" parent="Theme.Backbase.Default">
<item name="iconLogoSquare">@drawable/your_square_logo</item>
<item name="iconLogoWide">@drawable/your_wide_logo</item>
</style>
Import fonts
Get your font files ready
First, collect your font files in the .ttf format. You can place all of your font files into the font folder, which you can typically find in the res folder of your project. Make sure to remove any unnecessary font files not associated with your brand. If the font folder is not present, you can create this folder on your own inside the res folder.
Add the text styles to the theme
Finally, override the typographies in the application theme file.
<style name="MyApplicationTheme" parent="Theme.Backbase.Default">
<item name="textAppearanceHeadline1">@style/TextAppearance.H1</item>
<!-- Other typograhies -->
</style>
<style name="TextAppearance.H1" parent="TextAppearance.Backbase.H1">
<item name="fontFamily">@font/<YOUR_FONT></item>
</style>
Make sure to change the font in each text style so that you font is applied consistently through the whole app.