Current system
As part of building a multi-platform design system, the Design System team at Wealthfront revised our color system to support generating application themes from a given set of brand colors. After defining an algorithm for this, we codified it into a theme generator script which generates output for all platforms: XML for Android, JSON for iOS, and a Stylesheet with CSS Variables for web. These XML files for android are copied into the codebase to make all the themes available to the developers.
Project Motive
The existing system generated the themes in appropriate format for all platforms. But there was still manual work as files needed to be copied into each codebase.
To solve this problem, we decided to update the theme generator script to output library packages for iOS, Web and Android. These packages would be published in Maven and imported in the codebase like any other external package. Any updates made in the themes would generate a package with a new version number. Frontend platforms can just update the version number to get the updated themes.
An Android AAR (Android Archive) file and a JAR (Java Archive) file are both compressed archive formats used in Android development. AAR file is specifically designed to package resources and code for an Android Library project. It can include resources and it can be easily included as a dependency in your app’s build.gradle file. While a JAR file is meant to only contain compiled Java code, trying to add resources in JAR can be a cumbersome and error-prone process .AAR is a better choice in this project since AAR is more Android-focused and better for sharing resources.
AAR Package Structure
An Android AAR (Android Archive) file is a compressed archive that contains all the files necessary for building an Android Library project. It is an extension of the zip file format. It can be added as a dependency for an Android app module.
To package the theme files we could have used a Maven plugin maven-android-plugin, This plugin allows testing and packaging Android Projects with Maven, but it requires the Android SDK to be installed on our build system. This would have greatly increased the scope of the project. Instead, we decided to package the contents manually, generating the required files and packaging it in the required structure. The structure of the AAR package is:
/res/ (mandatory)
This directory is similar to the resource directory found in Android projects. It includes resources such as layout files, drawables, value
/AndroidManifest.xml (mandatory)
Every app project must have an AndroidManifest.xml file at the root of the project. AndroidManifest defines the package name, required permissions and version.
/R.txt (mandatory)
R.txt file is automatically generated by android build tools when creating an AAR package. R.txt contains references to all the resources in the library. This R.txt file is used for resource linking.
/classes.jar (mandatory)
Classes.jar contains all the code in the module. The file structure inside must match the package structure defined in the Android Manifest. This is a mandatory file. An empty structure must exist even if there is no code file, else the R file won’t be generated to reference resources in code files.
Deploying to Maven and consuming in code
After the AAR package is deployed to the Maven repository by the script, it is ready to be used in the Android app. The build.gradle (app) needs to be updated to include the Maven repository link:
Any module which needs to use the resources package can do so by adding its dependency in the module’s build.gradle file:
Conclusion
This approach to design system resources has streamlined our app development process, saving time and increasing efficiency for developers. It also helps teams to maintain a consistent and polished user experience. If you’re passionate about designing for a team that is committed to exceptional UI design and creating innovative financial products, check out Wealthfront’s careers page.
Disclosures
The information contained in this communication is provided for general informational purposes only, and should not be construed as investment or tax advice. Nothing in this communication should be construed as a solicitation or offer, or recommendation, to buy or sell any security. Any links provided to other server sites are offered as a matter of convenience and are not intended to imply that Wealthfront Advisers or its affiliates endorses, sponsors, promotes and/or is affiliated with the owners of or participants in those sites, or endorses any information contained on those sites, unless expressly stated otherwise.
All investing involves risk, including the possible loss of money you invest, and past performance does not guarantee future performance. Please see our Full Disclosure for important details.
Wealthfront offers a free software-based financial advice engine that delivers automated financial planning tools to help users achieve better outcomes. Investment management and advisory services are provided by Wealthfront Advisers LLC, an SEC registered investment adviser, and brokerage related products are provided by Wealthfront Brokerage LLC, a member of FINRA/SIPC.
Wealthfront, Wealthfront Advisers and Wealthfront Brokerage are wholly owned subsidiaries of Wealthfront Corporation.
© 2023 Wealthfront Corporation. All rights reserved.