UI Customization
BandyerSDK allows you to change several UI properties to customize our UI as needed. The BDKTheme object exsposes several properties that enables you to apply all the possible customization.
//Add table
In this guide you will find several illustration, listing all BDKTheme properties with their corresponding UI elements.
To customize our UI there are two options:
- Override the required properties of the BDKTheme default instance
- Initialize an instance of BDKTheme class and use it to configure the Bandyer view controllers
The first option will set the global properties of the BDKTheme class, which will apply the given values to all the Bandyer view controllers and the corresponding UI components will change. For example, you can do it inside your AppDelegate implementation:
@interface AppDelegate ()
@end
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
//This will set the main view background color as systemYellow color in all Bandyer view controllers.
BDKTheme.defaultTheme.primaryBackgroundColor = UIColor.systemYellowColor;
return YES;
}
@end@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
//This will set the main view background color as systemYellow color in all Bandyer view controllers.
BDKTheme.default().primaryBackgroundColor = .systemYellow
return true
}
}With the second option it is only possible to change the UI for a particular view controller. Each view controller configuration object (BDKCallViewControllerConfiguration and ChannelViewControllerConfiguration) provides at least one theme property. Setting this property will apply the UI customization.
The next sections will show you the mapping between theme properties and UI elements for each Bandyer view controller.
To customize the BDKCallViewController you have to set the callTheme property of BDKCallViewControllerConfiguration and give the configuration to the BDKCallViewController or CallWindow instances before the view is loaded.
Different navigation bar scenarios during a call
User placeholder during audio only call
Device camera not available
Reconnection in progress
To customize the File sharing view controller you have to set the fileSharingTheme property of BDKCallViewControllerConfiguration and give the configuration to the BDKCallViewController or CallWindow instances before the view is loaded.
Upload / Download controller without items
Upload / Download controller with an item
To customize the Whiteboard view controller you have to set the whiteboardTheme property of BDKCallViewControllerConfiguration and give the configuration to the BDKCallViewController or CallWindow instances before the view is loaded.
To customize the whiteboard Text editor view controller you have to set the whiteboardTextEditorTheme property of BDKCallViewControllerConfiguration and give the configuration to the BDKCallViewController or CallWindow instances before the view is loaded.
To customize the ChannelViewController you have to set the theme property of ChannelViewControllerConfiguration and give the configuration to the view controller instance before the view is loaded.
To customize the in-app notification view, you can override the BDKTheme properties of the BDKInAppNotificationsCoordinator theme instance, for example inside your AppDelegate implementation:
@interface AppDelegate ()
@end
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
//This will set the chosen font to all Bandyer in-app notification title labels.
BandyerSDK.instance.notificationsCoordinator.theme.emphasisFont = [UIFont systemFontOfSize:20 weight:UIFontWeightHeavy];
return YES;
}
@end@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
//This will set the chosen font to all Bandyer in-app notification title labels.
BandyerSDK.instance().notificationsCoordinator?.theme?.emphasisFont = UIFont.systemFont(ofSize: 20, weight: .heavy)
return true
}
}
Starting from iOS 13, Apple introduced Dark Appearance. We support it as well by allowing you to set the BDKTheme colors properties and allocate them using the OS dynamicProvider initializer.
Inside next code snippets you can find an example of how to dynamically initialize a UIColor instance.
UIColor *dynamicColor = [[UIColor alloc] initWithDynamicProvider:^UIColor *(UITraitCollection *traitCollection) {
switch (traitCollection.userInterfaceStyle) {
case UIUserInterfaceStyleDark:
return UIColor.blueColor;
default:
return UIColor.redColor;
}
}];
BDKTheme.defaultTheme.accentColor = dynamicColor;let dynamicColor = UIColor { traitCollection -> UIColor in
switch traitCollection.userInterfaceStyle {
case .dark:
return .blue
default:
return .red
}
}
BDKTheme.default().accentColor = dynamicColorThe following screenshots show you the different appearance of all Bandyer view controllers in both Light and Dark mode.
Remark The BDKCallViewController has a fixed dark appearance.
Upload controller without items
Download controller without items
Upload controller with an item
Download controller with an item
Whiteboard on success loading
Whiteboard on error loading
Whiteboard text editor
