iOS

iOS Chat UI Customization and Settings

Our SDK's come with a pre-built UI that you can use to integrate with your application. Following is a list of things that you can customize in the pre-built UI.

In case you are looking for deeper customization, please feel free to use our UI source code mentioned below for reference to build your own UI.

This will only work if you are using Applozic framework/pod not ApplozicSwift framework/pod

We provide various UI settings to customise chat view easily. You can add these settings in ALDefaultChatViewSettings method in the ALChatManager file.

Chat Bubble Color

For message received

[ALApplozicSettings setColorForReceiveMessages: [UIColor colorWithRed:255.0/255 green:255.0/255 blue:255.0/255 alpha:1]];

ALApplozicSettings.setColorForReceiveMessages(UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha:1))

For message sent

[ALApplozicSettings setColorForSendMessages: [UIColor colorWithRed:66.0/255 green:173.0/255 blue:247.0/255 alpha:1]];

ALApplozicSettings.setColorForSendMessages(UIColor(red: 66.0/255, green: 173.0/255, blue: 247.0/255, alpha:1))

Chat Background

[ALApplozicSettings setChatWallpaperImageName:@"<WALLPAPER NAME>"];

ALApplozicSettings.setChatWallpaperImageName("<WALLPAPER NAME>")

Chat Screen

Hide profile Image

[ALApplozicSettings setUserProfileHidden: NO];

ALApplozicSettings.setUserProfileHidden(false)

Hide refresh button

[ALApplozicSettings hideRefreshButton: NO];

ALApplozicSettings.hideRefreshButton(flag)

Chat Title

[ALApplozicSettings setTitleForConversationScreen: @"Recent Chats"];

ALApplozicSettings.setTitleForConversationScreen("Recent Chats")

Text Input Background Color

[ALApplozicSettings setMsgTextViewBGColor:[UIColor lightGrayColor]];

ALApplozicSettings.setMsgTextViewBGColor(UIColor.lightGray)

User Icon Colors

You can use this to change the colour of user icon characters(in case of no display picture):

Objective-C

NSMutableDictionary *colourDictionary = [[NSMutableDictionary alloc] init];

[colourDictionary setObject:@"#4FC3F7" forKey:@"A"];
[colourDictionary setObject:@"#F06292" forKey:@"B"];
[colourDictionary setObject:@"#BA68C8" forKey:@"C"];
[colourDictionary setObject:@"#9575CD" forKey:@"D"];
[colourDictionary setObject:@"#7986CB" forKey:@"E"];
[colourDictionary setObject:@"#4FC3F7" forKey:@"F"];
[colourDictionary setObject:@"#E06055" forKey:@"G"];
[colourDictionary setObject:@"#4DD0E1" forKey:@"H"];
[colourDictionary setObject:@"#4DB6AC" forKey:@"I"];
[colourDictionary setObject:@"#57BB8A" forKey:@"J"];
[colourDictionary setObject:@"#9CCC65" forKey:@"K"];
[colourDictionary setObject:@"#D4E157" forKey:@"L"];
[colourDictionary setObject:@"#FDD835" forKey:@"M"];
[colourDictionary setObject:@"#F6BF26" forKey:@"N"];
[colourDictionary setObject:@"#FFA726" forKey:@"O"];
[colourDictionary setObject:@"#FF8A65" forKey:@"P"];
[colourDictionary setObject:@"#C2C2C2" forKey:@"Q"];
[colourDictionary setObject:@"#90A4AE" forKey:@"R"];
[colourDictionary setObject:@"#A1887F" forKey:@"S"];
[colourDictionary setObject:@"#A3A3A3" forKey:@"T"];
[colourDictionary setObject:@"#AFB6E0" forKey:@"U"];
[colourDictionary setObject:@"#B39DDB" forKey:@"V"];
[colourDictionary setObject:@"#C2C2C2" forKey:@"W"];
[colourDictionary setObject:@"#80DEEA" forKey:@"X"];
[colourDictionary setObject:@"#BCAAA4" forKey:@"Y"];
[colourDictionary setObject:@"#AED581" forKey:@"Z"];
[colourDictionary setObject:@"#E6B0AA" forKey:@"0"];
[colourDictionary setObject:@"#F1948A" forKey:@"1"];
[colourDictionary setObject:@"#C39BD3" forKey:@"2"];
[colourDictionary setObject:@"#7FB3D5" forKey:@"3"];
[colourDictionary setObject:@"#5DADE2" forKey:@"4"];
[colourDictionary setObject:@"#76D7C4" forKey:@"5"];
[colourDictionary setObject:@"#7DCEA0" forKey:@"6"];
[colourDictionary setObject:@"#73C6B6" forKey:@"7"];
[colourDictionary setObject:@"#7DCEA0" forKey:@"8"];
[colourDictionary setObject:@"#F9E79F" forKey:@"9"];

[ALApplozicSettings setUserIconFirstNameColorCodes:colourDictionary];

NSMutableDictionary *colourDictionary = [[NSMutableDictionary alloc] init];

[colourDictionary setObject:@"#4FC3F7" forKey:@"A"];
[colourDictionary setObject:@"#F06292" forKey:@"B"];
[colourDictionary setObject:@"#BA68C8" forKey:@"C"];
[colourDictionary setObject:@"#9575CD" forKey:@"D"];
[colourDictionary setObject:@"#7986CB" forKey:@"E"];
[colourDictionary setObject:@"#4FC3F7" forKey:@"F"];
[colourDictionary setObject:@"#E06055" forKey:@"G"];
[colourDictionary setObject:@"#4DD0E1" forKey:@"H"];
[colourDictionary setObject:@"#4DB6AC" forKey:@"I"];
[colourDictionary setObject:@"#57BB8A" forKey:@"J"];
[colourDictionary setObject:@"#9CCC65" forKey:@"K"];
[colourDictionary setObject:@"#D4E157" forKey:@"L"];
[colourDictionary setObject:@"#FDD835" forKey:@"M"];
[colourDictionary setObject:@"#F6BF26" forKey:@"N"];
[colourDictionary setObject:@"#FFA726" forKey:@"O"];
[colourDictionary setObject:@"#FF8A65" forKey:@"P"];
[colourDictionary setObject:@"#C2C2C2" forKey:@"Q"];
[colourDictionary setObject:@"#90A4AE" forKey:@"R"];
[colourDictionary setObject:@"#A1887F" forKey:@"S"];
[colourDictionary setObject:@"#A3A3A3" forKey:@"T"];
[colourDictionary setObject:@"#AFB6E0" forKey:@"U"];
[colourDictionary setObject:@"#B39DDB" forKey:@"V"];
[colourDictionary setObject:@"#C2C2C2" forKey:@"W"];
[colourDictionary setObject:@"#80DEEA" forKey:@"X"];
[colourDictionary setObject:@"#BCAAA4" forKey:@"Y"];
[colourDictionary setObject:@"#AED581" forKey:@"Z"];
[colourDictionary setObject:@"#E6B0AA" forKey:@"0"];
[colourDictionary setObject:@"#F1948A" forKey:@"1"];
[colourDictionary setObject:@"#C39BD3" forKey:@"2"];
[colourDictionary setObject:@"#7FB3D5" forKey:@"3"];
[colourDictionary setObject:@"#5DADE2" forKey:@"4"];
[colourDictionary setObject:@"#76D7C4" forKey:@"5"];
[colourDictionary setObject:@"#7DCEA0" forKey:@"6"];
[colourDictionary setObject:@"#73C6B6" forKey:@"7"];
[colourDictionary setObject:@"#7DCEA0" forKey:@"8"];
[colourDictionary setObject:@"#F9E79F" forKey:@"9"];

 [ALApplozicSettings setUserIconFirstNameColorCodes:colourDictionary];

Group Messaging

Disable group functionality

[ALApplozicSettings setGroupOption: YES];

ALApplozicSettings.setGroupOption(true)

Hide Group Exit Button

[ALApplozicSettings setGroupExitOption:NO];

ALApplozicSettings.setGroupExitOption(false)

Hide Group Member-Add Button (Admin only)

[ALApplozicSettings setGroupMemberAddOption:NO];

ALApplozicSettings.setGroupMemberAddOption(false)

Hide Group Member-Remove Button (Admin only)

[ALApplozicSettings setGroupMemberRemoveOption:NO];

ALApplozicSettings.setGroupMemberRemoveOption(false)

Disable Group Info (Tap on group Title)

[ALApplozicSettings setGroupInfoDisabled:YES];

ALApplozicSettings.setGroupInfoDisabled(true)

Disable Group Info Edit (Edit group name and image)

[ALApplozicSettings setGroupInfoEditDisabled:YES];

 ALApplozicSettings.setGroupInfoEditDisabled(true)

Enable broadcast group create option (Create broadcast group option )

[ALApplozicSettings setBroadcastGroupEnable:YES];

ALApplozicSettings.setBroadcastGroupEnable(true)

Change google location Map key in the below settings

[ALUserDefaultsHandler setGoogleMapAPIKey:@"AIzaSyBnWMTGs1uTFuf8fqQtsmLk-vsWM7OrIXk"]; //REPLACE WITH YOUR GOOGLE MAPKEY

ALUserDefaultsHandler.setGoogleMapAPIKey("AIzaSyBnWMTGs1uTFuf8fqQtsmLk-vsWM7OrIXk")  //REPLACE WITH YOUR GOOGLE MAPKEY

Changing the font size in the chat screen

 [ALApplozicSettings setChatCellTextFontSize:15];

  [ALApplozicSettings setChannelCellTextFontSize:15];

 ALApplozicSettings.setChatCellTextFontSize(15)

 ALApplozicSettings.setChannelCellTextFontSize(15)

Group Action Messages Color

Use this change the background and text color of group action messages like "Created a group" etc.

Objective-C

[ALApplozicSettings setChannelActionMessageBgColor: <UIColor>];
[ALApplozicSettings setChannelActionMessageTextColor: <UIColor>];

Enable reply option or disable option set `YES` for enabling, `NO` for disable

[ALApplozicSettings replyOptionEnabled:YES];

ALApplozicSettings.replyOptionEnabled(true)

Enable forward option or disable `YES` for enabling, `NO` for disable

[ALApplozicSettings forwardOptionEnableOrDisable:YES];

ALApplozicSettings.forwardOptionEnableOrDisable(true)

Enable Swipe Audio Record

You can enable or disable using below settings

[ALApplozicSettings enableQuickAudioRecording:YES];
[ALApplozicSettings.enableNewAudioDesign:YES];

ALApplozicSettings.enableQuickAudioRecording(true)
ALApplozicSettings.enableNewAudioDesign(true)

Enable or Disable the unread count badge in an app icon

You can enable or disable the badge count in an app icon by using below settings in ALChatmanager file
Make sure setting is added only once in ALChatmanager file

0 - For disabling the badge count in-app icon
1 - For Enable the badge count in-app icon

[ALUserDefaultsHandler setUnreadCountType:0];

ALUserDefaultsHandler.setUnreadCountType(0)

Customizing attachment options.

You can hide particular attachment options or attachment button itself by using below settings. You need to use below codes to hide different options from action sheet.

:camera // hide camera
:gallery // hide attachment form gallery
:audio //hide audio attachment options
:video //hide video attachment options
:location //hide location sharing options
:blockUser //hide block user options
:shareContact //hide contact sharing options
:attachmentbutton //hide attachment button


NSArray*attachmentOptionToHide=@[@":audio",@":video",@":location",@":shareContact"];

[ALApplozicSettings setHideAttachmentsOption:attachmentOptionToHide];


  let attachmentOptionToHide = [":audio", ":video", ":location", ":shareContact"]
  ALApplozicSettings.setHideAttachmentsOption(attachmentOptionToHide)

Theme Customization

Set Color for Navigation Bar

[ALApplozicSettings setColorForNavigation: [UIColor colorWithRed:66.0/255 green:173.0/255 blue:247.0/255 alpha:1]];

ALApplozicSettings.setColorForNavigation(UIColor(red: 66.0/255, green: 173.0/255, blue: 247.0/255, alpha:1))

Set Colour for Navigation Bar Item

[ALApplozicSettings setColorForNavigationItem: [UIColor whiteColor]];

ALApplozicSettings.setColorForNavigationItem(UIColor.whiteColor())

Hide Tab Bar (Profile tab)

[ALUserDefaultsHandler setBottomTabBarHidden: YES];

ALUserDefaultsHandler.setBottomTabBarHidden(true)

. Set Font Face

[ALApplozicSettings setFontaFace: @"Helvetica"];

[ALApplozicSettings setFontaFace: @"Helvetica"];

Notification sound configuration

If you want to change default sound notification then while doing login you need to pass the notification sound file name which you added to your project this is the login link you need to use the below code

 [user setNotificationSoundFileName:@"notification sound file name"];

user.notificationSoundFileName = "notification sound file name"

Enable or disable the receiver profile in one to one chat

[ALApplozicSettings setReceiverUserProfileOption:YES];

 ALApplozicSettings.setReceiverUserProfileOption(true)

Image compression settings

You can change the max compression factor and change the max size for compression

 [ALApplozicSettings setMaxCompressionFactor:0.1f];
 [ALApplozicSettings setMaxImageSizeForUploadInMB:3];

 ALApplozicSettings.setMaxCompressionFactor(0.1f)
 ALApplozicSettings.setMaxImageSizeForUploadInMB(3)

Container View

You can also add our ChatList view as a subview. To do that enter the below code in your ViewController's viewDidLoad method:

UIView * containerView = [[UIView alloc] init];
containerView.translatesAutoresizingMaskIntoConstraints = false;
[self.view addSubview:containerView];

[containerView.leadingAnchor constraintEqualToAnchor: self.view.leadingAnchor].active = true;
[containerView.trailingAnchor constraintEqualToAnchor: self.view.trailingAnchor].active = true;
[containerView.topAnchor constraintEqualToAnchor:self.view.topAnchor].active = true;
[containerView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = true;

// Add child view controller view to container
NSBundle * bundle = [NSBundle bundleForClass:ALMessagesViewController.class];
UIStoryboard * storyboard = [UIStoryboard storyboardWithName: @"Applozic" bundle:bundle];
UIViewController * controller = [storyboard instantiateViewControllerWithIdentifier:@"ALViewController"];
[self addChildViewController: controller];
controller.view.translatesAutoresizingMaskIntoConstraints = false;
[containerView addSubview:controller.view];

[controller.view.leadingAnchor constraintEqualToAnchor: containerView.leadingAnchor].active = true;
[controller.view.trailingAnchor constraintEqualToAnchor: containerView.trailingAnchor].active = true;
[controller.view.topAnchor constraintEqualToAnchor:containerView.topAnchor].active = true;
[controller.view.bottomAnchor constraintEqualToAnchor:containerView.bottomAnchor].active = true;

[controller didMoveToParentViewController:self];

UIView * containerView = [[UIView alloc] init];
containerView.translatesAutoresizingMaskIntoConstraints = false;
[self.view addSubview:containerView];

[containerView.leadingAnchor constraintEqualToAnchor: self.view.leadingAnchor].active = true;
[containerView.trailingAnchor constraintEqualToAnchor: self.view.trailingAnchor].active = true;
[containerView.topAnchor constraintEqualToAnchor:self.view.topAnchor].active = true;
[containerView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = true;

// Add child view controller view to container
NSBundle * bundle = [NSBundle bundleForClass:ALMessagesViewController.class];
UIStoryboard * storyboard = [UIStoryboard storyboardWithName: @"Applozic" bundle:bundle];
UIViewController * controller = [storyboard instantiateViewControllerWithIdentifier:@"ALViewController"];
[self addChildViewController: controller];
controller.view.translatesAutoresizingMaskIntoConstraints = false;
[containerView addSubview:controller.view];

[controller.view.leadingAnchor constraintEqualToAnchor: containerView.leadingAnchor].active = true;
[controller.view.trailingAnchor constraintEqualToAnchor: containerView.trailingAnchor].active = true;
[controller.view.topAnchor constraintEqualToAnchor:containerView.topAnchor].active = true;
[controller.view.bottomAnchor constraintEqualToAnchor:containerView.bottomAnchor].active = true;

[controller didMoveToParentViewController:self];

let containerView = UIView()
containerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(containerView)
NSLayoutConstraint.activate([
    containerView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0),
    containerView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0),
    containerView.topAnchor.constraint(equalTo: view.topAnchor, constant: 0),
    containerView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0),
    ])

// Add child view controller view to container
let story = UIStoryboard(name: "Applozic", bundle: Bundle(for: ALMessagesViewController.self))
let controller = story.instantiateViewController(withIdentifier: "ALViewController")
addChildViewController(controller)
controller.view.translatesAutoresizingMaskIntoConstraints = false
containerView.addSubview(controller.view)

NSLayoutConstraint.activate([
    controller.view.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
    controller.view.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
    controller.view.topAnchor.constraint(equalTo: containerView.topAnchor),
    controller.view.bottomAnchor.constraint(equalTo: containerView.bottomAnchor)
    ])

controller.didMove(toParentViewController: self)

let containerView = UIView()
containerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(containerView)
NSLayoutConstraint.activate([
    containerView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0),
    containerView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0),
    containerView.topAnchor.constraint(equalTo: view.topAnchor, constant: 0),
    containerView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0),
    ])

// Add child view controller view to container
let story = UIStoryboard(name: "Applozic", bundle: Bundle(for: ALMessagesViewController.self))
let controller = story.instantiateViewController(withIdentifier: "ALViewController")
addChildViewController(controller)
controller.view.translatesAutoresizingMaskIntoConstraints = false
containerView.addSubview(controller.view)

NSLayoutConstraint.activate([
    controller.view.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
    controller.view.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
    controller.view.topAnchor.constraint(equalTo: containerView.topAnchor),
    controller.view.bottomAnchor.constraint(equalTo: containerView.bottomAnchor)
    ])

controller.didMove(toParentViewController: self)

UI Source Code

For complete control over UI, you can download our open source chat UI toolkit and change it as per your designs :

https://github.com/AppLozic/Applozic-iOS-SDK

Import Applozic iOS Library into your Xcode project.

It contains the UI related source code, icons, views and other resources which you can customize based on your design needs.

Sample app with integration is available under sampleapp

Have Question Or Suggestion?

You can drop us your query at docs@applozic.com

Customise Pod

If you have added our SDK using CocoaPods then you should not directly modify our pod. If you modify our pod and later you want to update the pod then all the local changes will be removed.

The right way to do is to fork our repo then clone the repo and do the changes. Once you are done with the changes then push it. Now what you need to do is to use this forked repo in the pod. You need to pass the URL of this forked repo.

In your podfile you need to write it in this way:

pod 'Applozic', :git => '<url_of_your_forked_repo>'

then run pod install in the terminal

Later, when you want to update our SDK then just fetch the changes from our repo, and merge the changes to your forked repo. It will be updated.

If you just want to keep your changes locally, then clone the repo and do the changes. In your podfile, pass the path of your local repo.

Audio/Video call with Applozic chat

We do not provide audio/video call from Applozic SDK side below setting can help you in implementing the third party integration.

You can enable the call button in one to one chat pre-built UI and launch your own screen to start an audio/video call.

You can create a storyboard with name AudioVideo and in that storyboard create your view controller.

Note: Your view controller must be a subclass of ALAudioVideoBaseVC

After this, you will have to add these settings in ALDefaultChatViewSettings method in the ALChatManager file.

How does the below code work?

Step: 1

Below setting will enable the call button(Audio/Video) in the UI.
[ALApplozicSettings setAudioVideoEnabled: YES];

Step: 2

Below code informs to Applozic that user is trying to access the calling feature and you will have to add the third-party code to start the audio/video calling.

[ALApplozicSettings setAudioVideoClassName: NameOfYOurViewControllerHERE];

[ALApplozicSettings setAudioVideoEnabled: YES];
[ALApplozicSettings setAudioVideoClassName: NameOfYOurViewControllerHERE];/// Replace with your view controller name

ALApplozicSettings.setAudioVideoEnabled(true)
ALApplozicSettings.setAudioVideoClassName(NameOfYOurViewControllerHERE) /// Replace with your view controller name

What's Next

Localization