UI Customization

This guide will show you how to customize the Bandyer UI using the BandyerSDK 2.0 version. If you are targeting a 1.x version you should take a look at this guide instead.

Overview

BandyerSDK allows you to change several UI properties to customize our UI as needed. The Theme 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 Theme 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 Theme 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:

@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.       
        Theme.default().primaryBackgroundColor = .systemYellow
        return true
    }
}

@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

With the second option it is only possible to change the UI for a particular view controller. Each view controller configuration object (CallViewControllerConfiguration 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 CallViewController you have to set the callTheme property of CallViewControllerConfiguration and give the configuration to the CallViewController 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 CallViewControllerConfiguration and give the configuration to the CallViewController 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 CallViewControllerConfiguration and give the configuration to the CallViewController 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 CallViewControllerConfiguration and give the configuration to the CallViewController 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 InAppNotificationsCoordinator theme instance, for example inside your AppDelegate implementation:

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
	//This will set the choosen font to all Bandyer in-app notification title labels.
        BandyerSDK.instance().notificationsCoordinator?.theme?.emphasisFont = UIFont.systemFont(ofSize: 20, weight: .heavy)
        return true
    }
}

@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

Dark mode

Starting from iOS 13, Apple introduced Dark Appearance. The BandyerSDK supports it as well. In order for you to create a dynamic color that changes based on the system appearance, you should provide a color for the Theme properties you want to customise using the UIColor dynamicProvider initializer.

The following code snippets show you an example of how you can create a UIColor instance that changes dinamically based on the current user interface style.

let dynamicColor = UIColor { traitCollection -> UIColor in
    switch traitCollection.userInterfaceStyle {
        case .dark:
            return .blue
        default:
            return .red
     }
 }
            
Theme.default().accentColor = dynamicColor

 UIColor *dynamicColor =  [[UIColor alloc] initWithDynamicProvider:^UIColor *(UITraitCollection *traitCollection) {
     switch (traitCollection.userInterfaceStyle) {
         case UIUserInterfaceStyleDark:
             return UIColor.blueColor;
         default:
             return UIColor.redColor;
     }
 }];
        
BDKTheme.defaultTheme.accentColor = dynamicColor;

In the examples above the theme accentColor will be blue when the system is in dark mode and red when the system is in light mode.

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

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