UI Customization

Table of contents:

• Overview
• Usage
• Dark mode
• What's next

Overview

BandyerSDK let change several UI properties allowing brand our UI as needed. The key is to use the BDKTheme object that exsposes all the possible customization.

In this guide you will find a one to one correspondance between BDKTheme properties and the UI elements.

Usage

To let brand our UI there are two options:

• Override the needed properties of the BDKTheme default instance
• Initialize and 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, so every Bandyer view controller will use the given values and all the 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 to all Bandyer view controllers the main view background color as systemYellow color.
    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 to all Bandyer view controllers the main view background color as systemYellow color.
        BDKTheme.default().primaryBackgroundColor = .systemYellow
        return true
    }
}

With the second option is possible to change UI only of the desired view controller. Each view controller configuration object (BDKCallViewControllerConfiguration and ChannelViewControllerConfiguration) provides at least one theme property. Setting this property will lead to the desired UI customization.

The next sections will show you the mapping between theme properties and UI elements for each Bandyer view controller.

Call

To brand 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

File sharing

To brand 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

Whiteboard

To brand 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.

Text editor

To brand 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.

Chat channel

To brand 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.

In-app notification

To customize the in-app notification view, you can override the desired BDKTheme properties of the BDKInAppNotificationsCoordinator theme istance, tipically inside your AppDelegate implementation:

@interface AppDelegate ()
@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{   
	//This will set the desired 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 desired font to all Bandyer in-app notification title labels.
        BandyerSDK.instance().notificationsCoordinator?.theme?.emphasisFont = UIFont.systemFont(ofSize: 20, weight: .heavy)
        return true
    }
}

Dark mode

Starting from iOS 13, Apple introduces Dark Appearance. We support it as well, let you set the BDKTheme colors properties and allocate them using the OS dynamicProvider initalizer.

Inside next code snippets you can find an example of how to dynamically init 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 = dynamicColor

The following screenshots show you the different appearance of all Bandyer view controllers in both Light and Dark mode.

Remark The Call view controller has a fixed dark appearance.

File sharing

Upload controller without items

Download controller without items

Upload controller with an item

Download controller with an item

Whiteboard

Whiteboard on success loading

Whiteboard on error loading

Text editor

Chat channel

In-app notification

What's next

• Customizing user information
• Custom formatters