kevin. Mobile SDK
Search…
⌃K

UI Customisations

Good to know: kevin. SDK is is fully customisable. Everything can be changed according to your app design - colours, fonts and most of the element styles. Default SDK theme fallbacks to the inset style theme. Both light and dark mode colours and assets are supported in the theme modification.
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()
Start customising theme:
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
// 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
// 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
}
}