Links

UI customisation

Good to know: kevin. mobile SDK is is fully customizable. Every UI element can be adjusted according to your app's design - colors, fonts and most of the element styles.
To start with, create a new class overriding KevinTheme object:
CustomTheme.swift
import UIKit
import Kevin
class CustomKevinTheme : KevinTheme {
override init() {
super.init()
// This is where the customisations will go
}
}
Set global kevin. theme to your custom one:
Kevin.shared.theme = CustomKevinTheme()
Default SDK theme fallbacks to the inset style theme. Both light and dark mode colours and assets are supported in the theme modification.
Start customising theme:
Base kevin. theme uses material theme for its base. You can see in below what material theme attributes are used for.
CustomTheme.swift
import UIKit
import Kevin
class CustomKevinTheme : KevinTheme {
override init() {
super.init()
// Modify content insets
insets.left = 16
insets.top = 24
insets.right = 16
insets.bottom = 25
// Modify general shared colour properties between screens
generalStyle.primaryBackgroundColor = UIColor.lightGray
generalStyle.primaryTextColor = UIColor.black
generalStyle.secondaryTextColor = UIColor.gray
generalStyle.actionTextColor = UIColor.blue
// Modify navigation bar style if you use our navigation controller
navigationBarStyle.titleColor = UIColor.white
navigationBarStyle.tintColor = UIColor.white
navigationBarStyle.backgroundColorLightMode = UIColor.white
navigationBarStyle.backgroundColorDarkMode = UIColor.black
navigationBarStyle.backButtonImage = UIImage(named: "yourBackImage")
navigationBarStyle.closeButtonImage = UIImage(named: "yourCloseImage")
// Modify bottom sheet (for example country selection container)
sheetPresentationStyle.dragIndicatorTintColor = UIColor.gray
sheetPresentationStyle.backgroundColor = UIColor.lightGray
sheetPresentationStyle.titleLabelFont = UIFont.systemFont(ofSize: 21, weight: .medium)
sheetPresentationStyle.cornerRadius = 10
// Modify style of the separate sections (bank selection titles)
sectionStyle.titleLabelFont = UIFont.systemFont(ofSize: 13, weight: .semibold)
// Modify grid layout style (bank selection cells)
gridTableStyle.cellBackgroundColor = UIColor.white
gridTableStyle.cellSelectedBackgroundColor = UIColor.gray
gridTableStyle.cellCornerRadius = 10
gridTableStyle.cellBorderWidth = 1
gridTableStyle.cellBorderColor = UIColor.gray
gridTableStyle.cellSelectedBorderWidth = 3
gridTableStyle.cellSelectedBorderColor = UIColor.black
// Modify list layout style (country selection cells)
listTableStyle.cornerRadius = 10
listTableStyle.isOccupyingFullWidth = false
listTableStyle.cellBackgroundColor = UIColor.white
listTableStyle.cellSelectedBackgroundColore = UIColor.gray
listTableStyle.titleLabelFont = UIFont.systemFont(ofSize: 15, weight: .semibold)
listTableStyle.chevronImage = UIImage(named: "yourChevronImage")
// Modify navigation link style (country selection button)
navigationLinkStyle.backgroundColor = UIColor.white
navigationLinkStyle.selectedBackgroundColor = UIColor.gray
navigationLinkStyle.titleLabelFont = UIFont.systemFont(ofSize: 15, weight: .semibold)
navigationLinkStyle.borderWidth = 0
navigationLinkStyle.cornerRadius = 10
navigationLinkStyle.borderColor = UIColor.black
navigationLinkStyle.chevronImage = UIImage(named: "yourChevronImage")
// Modify main button (Continue button) style
mainButtonStyle.width = UIScreen.main.bounds.width - 32
mainButtonStyle.height = 48
mainButtonStyle.backgroundColor = UIColor.blue
mainButtonStyle.titleLabelTextColor = UIColor.white
mainButtonStyle.titleLabelFont = UIFont.systemFont(ofSize: 15, weight: .semibold)
mainButtonStyle.cornerRadius = 8
mainButtonStyle.shadowRadius = 2
mainButtonStyle.shadowOpacity = 0.6
mainButtonStyle.shadowOffset = CGSize(width: 1.0, height: 1.0)
mainButtonStyle.shadowColor = UIColor.blue
}
}