UI Customization - Bandyer/Bandyer-iOS-SDK GitHub Wiki

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
• Usage
  • Call
  • File sharing
  • Whiteboard
  • Chat
  • In-app notifications
• Dark mode
• What's next

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.

In this guide you will find several illustration, listing all Theme 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 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.

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

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

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.

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.

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

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.

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

• Customizing user information
• Custom formatters