Setting up the design system in code involves adding various resources to the project, including color, theme and typography, as covered in the following sections:
For ZendriveIQLUIKit to effectively access and use various images, the necessary image assets must be supplied from your application through the application's image assets. Here's how you can do that:
iOS
Download Default Image Assets: First, download the default image assets from here.
Import to Xcode: Once downloaded, import the assets into your Xcode project.
Set the Right Target: While importing or adding the assets, ensure you set the correct target membership for the assets so that they are accessible to the intended module or application.
Customizing Images: If you wish to replace or customize any of the default images, create all required variants of the image (that is, @2X and @3X).
Renaming: For the custom images to be recognized, name them identically to those in the default image assets.
Replacement: Replace the default images with your custom ones in the image assets directory.
By adhering to these steps, you'll be able to integrate custom or default images seamlessly with ZendriveIQLUIKit.
Android (Optional)
Note:For Android, you need to download the images only if you wish to customise any images. If you wish to use default images, you can skip this step.
Download Default Image Assets: First, download the default image assets from here.
Import into Android Studio: After downloading the assets, import them into your Android Studio project. You can typically do this by placing the image files in the res/drawable-anydpi-v21 directory of your Android project.
Set the Right Target: While importing or adding the assets, ensure you set the correct target membership for the assets so that they are accessible to the intended module or app.
Customizing Images: If you wish to replace or customize any of the default images, create all required variants of the image.
Renaming: For the custom images to be recognized, name them identically to those in the default image assets.
Replacement: Replace the default images with your custom ones in the image assets directory.
By adhering to these steps, you'll be able to integrate custom or default images seamlessly with ZendriveIQLUIKit.
React Native
Follow the same platform specific steps mentioned above for both iOS and Android.
In case of iOS, the images should be added to the iOS project under ios directory.
In case of Android, the images should be added to the Android project under android directory.
Add String Resources to the Project
ZendriveIQLUIKit allows you to update almost all the strings used in the library. A few tips on how strings work:
The strings used in a component are generally named as ziu_componentname_stringname, this allows you to easily identify the place where a string is being used in the application.
The ziu_ prefix is used to differentiate ZendriveIQLUIKit strings from any other strings used in your application.
Here's how to customize the strings:
iOS
ZendriveIQLUIKit utilizes a .strings file to house all the texts employed within it. If you wish to customize any of these texts, follow the steps below:
Download Default .strings File: Start by downloading the default .strings file from here.
Edit Desired Texts: Open the downloaded file. Instead of editing the file directly, create a new .strings file and only include the key-value pairs of the texts you wish to modify. Make sure you retain the original keys, as ZendriveIQLUIKit relies on these keys to fetch the corresponding texts.
Rename the File: Rename your customized .strings file for easier identification or to avoid conflicts. For example, you can name it ZendriveIQLUIKitStrings.strings
Integrate with Your Project: Add the renamed .strings file to your project in Xcode.
Set the Right Target: After adding the file to your project, ensure that it's added to the correct target. You can do this by selecting the .strings file, and in the File Inspector on the right, ensure your applicaiton's target is checked under the Target Membership section.
Supply to ZendriveIQLUIKit: Inform ZendriveIQLUIKit about the custom strings file by calling the below API:
With this setup, ZendriveIQLUIKit will first look for texts in your customized .strings file.
Android (Optional)
Note:In case of Android, you need to download the strings only if you wish to customise any strings. If you wish to use default strings, you can skip this step.
ZendriveIQLUIKit uses the strings.xml file to store all the words and phrases it uses. This file comes with default key-value pairs of the strings used. If you want to change some of these strings, here's how:
Download the Default strings.xml File: Get the original strings.xml file from here.
Edit the Strings You Want: Open the downloaded file and only input the words you want to change in it. Keep the original key names exactly the same because ZendriveIQLUIKit needs them to find the right strings.
Add Your Changes to Your Application's strings.xml: Add the newly modified key-value pairs of the strings into your application's strings.xml file under the resource folder.
Avoid Conflicts: Be careful not to use the same key names in your application's strings.xml file that ZendriveIQLUIKit uses. If you do, your words will replace ZendriveIQLUIKit's words. So, use unique word names to avoid any mix-up.
React Native
Follow the same platform specific steps mentioned above for both iOS and Android.
In case of iOS, the strings should be added to the iOS project under ios directory.
In case of Android, the strings should be added to the Android project under android directory
Additionally, ZendriveIQLUIKit has to be informed about the custom strings (required for iOS):
ZendriveIQLUIKit has developed an efficient UI theming mechanism through its robust design system, making it convenient for developers to modify UI colors.
Here's how you can adapt the theme for the IQL Module:
Understanding the Color Management System:ZendriveIQLUIKit's approach to color modifications in the IQL Module is split into the following:
Color Set: A predefined set of colors. Modify the color codes directly within this set for customization.
Theme Class: This class, drawing from the color set, determines how colors are applied to various UI elements.
Default and Custom Color Set: By default, ZendriveIQLUIKit uses the DefaultZendriveIQLUIKitColorSet.
If customization is required:
Create a subclass of DefaultZendriveIQLUIKitColorSet and override the desired colors.
Alternatively in iOS and Android, devise a completely new color set by adhering to the ZendriveIQLUIKitColorSet interface.
In React Native, DefaultZendriveIQLUIKitColorSet is exposed to use the default color set. The ZendriveIQLUIKitColorSet class exposed by the UIKit also accepts a JSON which can be extracted from Figma. Refer to this section to get the JSON file from Figma.
Example:
class CustomColorSet: ZendriveIQLUIKitColorSet {
// Define the customized colors here
}
// ----------------------OR ---------------------
class CustomColorSet: DefaultZendriveIQLUIKitColorSet {
// Override specific colors
override var primary400: UIColor {
get { return .red}
set { }
}
}
// ----------------------OR ---------------------
// Change color directly
let colorSet = DefaultZendriveIQLUIKitColorSet()
colorSet.primary400 = .red
class CustomColorSet: ZendriveIQLUIKitColorSet {
// Define the customized colors here
}
class CustomColorSet: DefaultZendriveIQLUIKitColorSet() {
// Override specific colors
}
// Overriding colors directly in the class
const colorSetInstance = new DefaultZendriveIQLUIKitColorSet();
colorSetInstance.primary400 = "#34b567";
// Or
// Overriding colors using the JSON from Figma
import colorSetJSON from "/path/to/file.json";
const customColorSetInstance = new ZendriveIQLUIKitColorSet(colorSetJSON);
Applying and Modifying the Theme:
By default, ZendriveIQLUIKit employs the DefaultZendriveIQLUIKitLightTheme.
class customTheme: ZendriveIQLUIKitTheme {
// Customise all colors here.
}
// ----------------------OR ---------------------
class customTheme: DefaultZendriveIQLUIKitLightTheme {
override var primaryButtonBg: UIColor {
get { return colorSet.primary50 }
set {}
}
}
// ----------------------OR ---------------------
let theme = DefaultZendriveIQLUIKitLightTheme(colorSet: colorSet)
val customColorSet = CustomColorSet()
val theme = DefaultZendriveIQLUIKitLightTheme(colorSet = customColorSet)
// Default Light theme instance
const theme = new DefaultZendriveIQLUIKitLightTheme(colorSetInstance);
// Default Dark theme instance
const theme = new DefaultZendriveIQLUIKitDarkTheme(colorSetInstance);
To fine-tune the theme: Override specific theme properties using colors from your color set or another.
To set up a custom theme: Initialize the desired theme class by injecting your color set object (either the default or a customized one).
let theme = CustomUIKitTheme(colorSet: CustomColorSet())
val customColorSet = CustomColorSet()
val theme = ZendriveIQLUIKITDefaultLightTheme(colorSet = customColorSet)
// Custom colorSet initialized with JSON
const customColorSet = new ZendriveIQLUIKitColorSet(colorSetJson);
// Custom Dark theme instance
const theme = new DefaultZendriveIQLUIKitLightTheme(customColorSet);
When your theme customizations are set:
ZendriveIQLUIKit.setTheme(theme = theme)
ZendriveIQLUIKit.setTheme(theme = theme)
// Instance of DefaultZendriveIQLUIKit theme
ZendriveIQLUIKit.setTheme(theme)
By following these steps, developers can easily tailor the color theming of the IQL Module to align with their application's design language.
Add Typography to the Project
ZendriveIQLUIKit has developed an efficient typography-changing mechanism through its robust design system, making it convenient for developers to modify font styles. Here's how you can adapt the typography for the IQL Module.
iOS (Swift)
The system is designed around a protocol, ZendriveIQLUIKitTypography, which defines a set of font styles and their respective font families. By adhering to this protocol, developers can achieve a consistent look and feel for typography across the application.
Understanding Font Categories: The protocol defines multiple categories, for example, title1, headline, body, each with a regular and bold variant. These categorizations help in applying consistent font styles across different sections of the app.
Default Implementation:DefaultZendriveIQLUIKitTypography provides a default implementation of the protocol. It comes with predefined font sizes for each category and reverts to system fonts if specific font names aren't provided.
Customization:
Font Family: Override the regularFontFamily and boldFontFamily properties to specify your desired fonts.
Specific Font Styles: Override any specific font category properties (for example,title1Regular, headlineBold), if you want to provide custom sizes or entirely different fonts for them.
Integration:
Adopt the ZendriveIQLUIKitTypography protocol in any class where you need consistent typography.
Utilize the font properties from the protocol directly, ensuring typography consistency.
Fallback Mechanism: If a font with the specified name isn't found, it reverts to the system font.
Example:
If you have a custom font named SFProText-Light and its bold variant SFProText-BoldItalic. Here's how you need to integrate it:
import ZendriveIQLUIKit
class CustomTypography: DefaultZendriveIQLUIKitTypography {
override var regularFontFamily: String {
return "SFProText-Light"
}
override var boldFontFamily: String {
return "SFProText-BoldItalic"
}
override var semiBoldFontFamily: String {
return "SFProText-MediumItalic"
}
}
The typography system is designed around an interface, ZendriveIQLUIKitTypography, which defines a set of font styles and their respective font families. By adhering to this interface, developers can achieve a consistent look and feel for typography across the app.
Understanding the Typography Management System: The ZendriveIQLUIKitTypography interface uses multiple methods to define fonts for example, title1, headline, body, each with a regular and bold variant. These categorizations help in applying consistent font styles across different sections of the app.
Default Implementation: By default, ZendriveIQLUIKit uses the DefaultZendriveIQLUIKitTypography. You can override specific methods to change the typeface and font style.
Add the required font.tff file to res/font folder of your application.
Example:
class CustomZendriveIQLUIKitTypography : DefaultZendriveIQLUIKitTypography() {
override fun getNormalFontFamily(context: Context): Typeface {
return ResourcesCompat.getFont(context, R.font.font_dancing_script_regular)!!
}
}
Customization:
Create a custom implementation of ZendriveIQLUIKitTypography interface to provide your own customization.
Font Family: Override the getNormalFontFamily and getBoldFontFamily methods to specify your desired fonts.
Specific Font Styles: Override font category methods (e.g., getTitle1Normal, getTitle1Bold) to provide custom sizes or entirely different fonts for them.
class CustomZendriveIQLUIKitTypography : ZendriveIQLUIKitTypography {
override fun getNormalFontFamily(context: Context): Typeface {
return ResourcesCompat.getFont(context, R.font.font_sf_pro_regular)!!
}
override fun getBoldFontFamily(context: Context): Typeface {
return ResourcesCompat.getFont(context, R.font.font_sf_pro_medium)!!
}
override fun getTitle1Normal(context: Context): FontStyle {
return FontStyle(getNormalFontFamily(context), 22)
}
override fun getTitle1Bold(context: Context): FontStyle {
return FontStyle(getBoldFontFamily(context), 22)
}
// override other font families used
....
....
}
data class FontStyle(val typeface: Typeface, val fontSize: Int)
Applying and Modifying the Typography:
To set up a custom typography, initialize the desired typography class and set the typography as below
val customZendriveIQLUIKitTypography = CustomZendriveIQLUIKitTypography()
ZendriveIQLUIKit.setTypography(customZendriveIQLUIKitTypography)
By following these steps, developers can easily change the typography of the IQL Module to align with their application's design language.
React Native
To change the typography, you need to first add the font files to the ios and android folders of the React Native app.
iOS:
Import to Xcode:Add the font .ttf or .otf files to your project in Xcode.
Set the Right Target: After adding the files to your project, ensure that it's added to the correct target. You can do this by selecting the font files and in the File Inspector on the right, ensure your application's target is checked under the Target Membership section.
Add the required font.tff file to res/font folder of your application.
Set Custom typography to ZendriveIQLUIKit
const customTypography = new DefaultZendriveIQLUIKitTypography();
customTypography.regularFontFamily = 'font.ttf'
ZendriveIQLUIKit.setTypography(customTypography)
Customize System Dialogs in Android
Some widgets and dialogs are built using system components. They can be customized using styles.xml in the application. For example, the datepicker in the SelectDOBWidget widget is built using styles.xml.
To change the attributes of any component, override the following theme in styles.xml:
