Get started

Integration
The Common UI module is a core configuration module for all DriveKit UI modules.
To add Common UI module to your app, add the following line to your dependencies in your application build.gradle file:
build.gradle
1
dependencies {
2
implementation 'com.drivequant.drivekit:drivekit-common-ui:$drivekitui_version'
3
}
Copied!
Replace $drivekitui_version with the DriveKit version you are using in your app
On a Github repository, you have a demo app and source code that you can use as an example.
Initialization
An initialization phase is required to ensure that Common UI module works perfectly. To initialize Common UI module in your app, you must call the initialization method in onCreate method of your application class.
Kotlin
Java
1
class MyApplication: Application() {
2
​
3
    override fun onCreate() {
4
        super.onCreate()
5
        DriveKitUI.initialize()
6
    }
7
}
Copied!
1
public class DriveQuantApplication {
2
   @Override
3
   public void onCreate() {
4
       super.onCreate();
5
       DriveKitUI.INSTANCE.initialize();
6
}}
7
​
Copied!
This method will initialize the SDK with the default configuration set up by DriveQuant. 
Configurations
Colors
The colors that can be configured are listed in the table below:
Name
Description
Default value
primaryColor
Main app color
#083B54
secondaryColor
Call to action color
 #77E2B0
mainFontColor
Main font color
 #161616
complementaryFontColor
Secondary font color
#9E9E9E
fontColorOnPrimaryColor
Color of a text displayed on an element whose color is primaryColor
#FFFFFF
fontColorOnSecondaryColor
Color of a text displayed on an element whose color is secondaryColor
#FFFFFF
backgroundViewColor
Background color
#FAFAFA
neutralColor
Color of the separating lines
#F0F0F0
warningColor
Warning color (non-critical hint)
#F7A334
criticalColor
Alert color (critical hint)
#E52027
To override the default colors configuration you just have to create a reference of DKColors and override the color that you want to change. Then pass it as a parameter to the initialize method.
Kotlin
Java
1
class ColorsConfig : DKColors() {
2
  
3
   override fun primaryColor(): Int = Color.GREEN
4
   override fun secondaryColor(): Int = Color.RED
5
}
Copied!
1
class ColorsConfig extends DKColors {
2
 @Override
3
 public int primaryColor() {
4
    return Color.GREEN;
5
 }
6
 @Override
7
 public int secondaryColor() {
8
    return Color.RED;
9
 }
10
}
Copied!
Kotlin
Java
1
class MyApplication : Application() {
2
        ​
3
        override fun onCreate() {
4
            super.onCreate()
5
            val colorsConfig = ColorsConfig()
6
            DriveKitUI.initialize(colors = colorsConfig)
7
        }
8
}
Copied!
1
public class DriveQuantApplication {
2
   @Override
3
   public void onCreate() {
4
       super.onCreate();
5
​
6
       ColorsConfig colorConfig = new ColorsConfig();
7
       DriveKitUI.INSTANCE.initialize(colorsConfig);
8
       ...
9
}}
Copied!
Fonts
The Common UI configuration module allows to set up two fonts:
1.primaryFont: this is the main font used in the application. The default value is Roboto.
2.secondaryFont: this the font used on the page titles or to emphasize a specific point. The default value is Roboto.
To override the font, you can add the primary and secondary fonts to the CommonUI module by calling the following method:
Kotlin
Java
1
class FontConfig : DKFonts() {
2
​
3
   override fun primaryFont(): Int = R.font.sketchy
4
  
5
}
Copied!
1
class FontsConfig extends DKFonts {
2
   @Override
3
   public int primaryFont() {
4
       return R.font.sketchy;
5
   }
6
}
Copied!
Kotlin
Java
1
class MyApplication : Application() {
2
        override fun onCreate() {
3
            super.onCreate()
4
​
5
            val fontsConfig = FontsConfig()          
6
            DriveKitUI.initialize(fonts = fontsConfig)
7
        }
8
    }
Copied!
1
public class DriveQuantApplication {
2
   @Override
3
   public void onCreate() {
4
       super.onCreate();
5
​
6
       FontsConfig fontsConfig = new FontsConfig();
7
       DriveKitUI.INSTANCE.initialize(fontsConfig);
8
       ...
9
}}
10
​
Copied!
Text Localization
Contents of each DriveKit UI module are translated into 5 languages: English, French, German, Spanish and Italian.
DriveKit simplifies the internationalization of your application and it is possible to add other languages.
DriveKit Common UI contains a number of basic text keys used in other DriveKit UI modules. You can override these keys to customize your application.
To help make the text keys in the code easier to read, a specific nomenclature has been set up: dk_<module name>_<key description>.
For the Common UI module, all localizable keys are prefixed with: dk_common.
There are several files containing text keys:
A string.xml file in the common UI module containing generic keys to all modules.
One file per UI module containing module-specific text keys.
Text customization
You can override any texts to customize your application. To override a text key, simply define the keys to be modified in a string.xml file at the application level. The text keys can be directly retrieved on Github, in the src/main/res/values folder of each module.
Add language
The translation file can be retrieved from GitHub in the various DriveKit UI modules and integrated into the values-<Locale> folder of the app.
Get analytics
You can retrieve some data and build analytics for any DriveKit UI component. To enable the feature, call the following method:
Kotlin
Java
1
DriveKitUI.configureAnalytics(object: DriveKitAnalyticsListener{
2
   override fun trackScreen(screen: String, className: String) {
3
       // TODO: manage screen tracking here
4
   }
5
​
6
override fun trackEvent(event: DKAnalyticsEvent, parameters: Map<DKAnalyticsEventKey, String>) {
7
   // TODO: manage event tracking here
8
}
9
})
Copied!
1
DriveKitUI.INSTANCE.configureAnalytics(new DriveKitAnalyticsListener() {
2
   @Override
3
   public void trackScreen(@NotNull String screen, @NotNull String className) {
4
       // TODO: manage screen tracking here
5
   }
6
​
7
   @Override
8
   public void trackEvent(@NotNull DKAnalyticsEvent event, @NotNull Map<DKAnalyticsEventKey, String> parameters) {
9
       // TODO: manage event tracking here
10
   }
11
});
12
​
Copied!
trackScreen() method is called when a screen is displayed (i.e. trips list, trip detail, etc.).
When the method is called, you just have to call your analytics solution like Google Analytics for Firebase.
The screen String received in the trackScreen method is the value associated with one of the keys in this array, corresponding to the visited screen.
In order to customize screens values, you have to override keys you can find in dk_analytics.xml in each DriveKit UI component.
trackEvent() allows adding additional information that may be useful for analysis. For example, that method is triggered each time the user is opening the trip detail screen.

COMMON UI - Previous

Android

Next - COMMON UI

References

Last modified 1mo ago

Export as PDF

Copy link

Contents