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 for any views in this theme
`secondaryBackgroundColor`	Background color for any supplementary views inside a view with this theme
`tertiaryBackgroundColor`	Background color for any views that will have less visual importance than the views coloured with the secondary background color
`accentColor`	Tint color for any views with this theme
`keyboardAppearance`	Keyboard appearance for any text views with this theme
`barTranslucent`	Translucent property for any bars with this theme
`barStyle`	Bar style property for any bars with this theme
`barTintColor`	Bar tint color for any bars with this theme
`navBarTitleFont`	Font attribute for any navigation bar titles with this theme
`barItemFont`	Font attribute for any tab bar items with this theme
`bodyFont`	Font for any text views with this theme
`font`	Font for all standard labels using this theme
`emphasisFont`	Font for all labels that require emphasis
`secondaryFont`	Font for all secondary labels using this theme
`mediumFontPointSize`	Font for all medium labels using this theme
`largeFontPointSize`	Font for all large labels using this theme

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.