UI Customization

Overview

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.

Property name	Description
`primaryBackgroundColor`	Background color used for any root view
`secondaryBackgroundColor`	Background color used for any supplementary views inside a view
`tertiaryBackgroundColor`	Background color used for any views that will have less visual importance than the views coloured with the secondary background color
`accentColor`	The tint color for any views
`keyboardAppearance`	The keyboard appearance used for any text views
`barTranslucent`	Translucent property applied to any bars
`barStyle`	The bar style property applied to any bars
`barTintColor`	The tint color applied to any bars
`navBarTitleFont`	The font attribute applied to any navigation bar titles
`barItemFont`	The font attribute applied to any tab bar items
`bodyFont`	The font applied to any textual views
`font`	The font applied to all standard labels
`emphasisFont`	The font applied to all labels that require emphasis
`secondaryFont`	The font applied to all secondary labels
`mediumFontPointSize`	The font applied to all medium labels
`largeFontPointSize`	The font applied to all large labels

In this guide you will find several illustration, listing all BDKTheme properties with their corresponding UI elements.

Usage

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.

Call

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

File sharing

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

Whiteboard

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.

Text editor

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.

Chat

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.

In-app notifications

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
    }
}

Dark mode

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 = dynamicColor

In the example above the theme accentColor will be blue color for the dark mode and red color for the light mode.

The 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.

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

Whiteboard text editor

Chat

In-app notifications

What's next

Looking for other platforms? Take a look at Android, Flutter, ReactNative, Ionic / Cordova. Anything unclear or inaccurate? Please let us know by submitting an Issue or write us here.