Chat APIs and In-app Messaging SDKs for Developers

Applozic provides Chat APIs and In-app Messaging SDKs for Android, iOS and Web apps to power cross-device, multi-platform rich messaging.
Find comprehensive guides and platform-specific Chat API documentation to get started with In-app Messaging.

Get Started    

Android

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

Applozic customization json settings

Applozic provides easy settings to customize the message text color, message bubble background color, group options like create, add, remove to hide or show, show registered contacts, attachment background color, attachment options to hide or show

Follow the below steps for adding applozic-settings.json file:

  1. Download applozic-settings.json file from here

  2. Create an assets directory in app-->main and paste that applozic-settings.json file in the assets directory

Applozic settings Json Properties detail

Properties

Sample Value

Description

messageSearchOption

true/false

Message search option

onlineStatusMasterList

true/false

Online status Green Dot in Chat list

startNewButton

true/false

Start New Conversation Plus (+) Button

startNewGroup

true/false

Create group option

startNewFloatingButton

true/false

Start New Conversation Plus (+) FloatingActionButton

Properties

Sample Value

Description

receivedMessageTextColor

Color hex (#000000)

Received message text color

receivedMessageBackgroundColor

Color hex (#FFFFFFFF)

Received message chat bubble color

sentMessageBackgroundColor

Color hex (#FF03A9F4)

Sent message chat bubble color

sentMessageTextColor

Color hex (#FFFFFFFF)

Sent message text color

sendButtonBackgroundColor

Color hex (#FF03A9F4)

Send button background color

Properties

Sample Value

Description

receivedMessageBorderColor

Color hex (#FFFFFFFF )

Received message chat bubble border color

messageEditTextTextColor

Color hex (#000000)

Edit text text color

sentMessageBorderColor

Color hex (#FF03A9F4)

Sent Message chat bubble border color

attachmentIconsBackgroundColor

Color hex (#FF03A9F4)

Attachment icons background color

Properties

Sample Value

Description

maxAttachmentAllowed

int (Prefered 10)

Maximum attachment allowed to attach while sending Multiple attachments

Properties

Sample Value

Description

receivedMessageLinkTextColor

Color hex (#FFFFFFFF)

Received message hyper link text color

messageTimeTextColor

Color hex (#838b83)

Message time text color

conversationDateTextColor

Color hex (#333333)

Message date text color

conversationDayTextColor

Color hex (#333333)

Message day text color

sentMessageLinkTextColor

Color hex (#5fba7d)

Sent message hyper link text color

Properties

Sample Value

Description

receivedContactMessageTextColor

Color hex (#000000)

Received contact message text color

hideAttachmentButton

true/false

Show and hide media attachment button

sentContactMessageTextColor

Color hex (#FFFFFFFF)

Sent contact message text color

messageEditTextHintTextColor

Color hex (#bdbdbd)

Edit text hint text color

Properties

Sample Value

Description

locationShareViaMap

true/false

Location share activity

Properties

Sample Value

Description

channelCustomMessageBgColor

Color hex (#cccccc)

Group add, remove, left message background color

muteOption

true/false

Mute messages from group

channelCustomMessageBorderColor

Color hex (#cccccc)

Group add, remove, left message border color

channelCustomMessageTextColor

Color hex (#666666)

Group add, remove, left message text color

Properties

Sample Value

Description

groupInfoScreenVisible

true/false

Group information screen visibility

defaultGroupType

number

Sets the default group type if using the default ui for group creation.

hideGroupExitButton

true/false

Hide group exit option button in group

hideGroupAddMembersButton

true/false

Hide the add member option in group

hideGroupNameUpdateButton

true/false

Hide group name and group image change option in group

hideGroupRemoveMemberOption

true/false

Hide remove member option from group

Properties

Sample Value

Description

userProfileFragment

true/false

Show other user profile on click of App bar

Properties

Sample Value

Description

profileOption

true/false

Show and hide the profile option

broadcastOption

true/false

Broadcast option

Properties

Sample Value

Description

restrictedWordMessage

String

Restricted words are not allowed

Properties

Sample Value

Description

noConversationLabel

String

No conversation text label

noConversationLabelTextColor

Color hex (#000000)

No Conversation Label text color

Properties

Sample Value

Description

noSearchFoundForChatMessages

String

No search found text label

Properties

Sample Value

Description

showAllDeviceContacts

true/false

Show all registered and device contacts

inviteFriendsInContactActivity

true/false

Invite friends button in Contact list when no contacts are there

Properties

Sample Value

Description

registeredUserContactListCall

true/false

Registered users contact list call

totalRegisteredUserToFetch

int (Prefered 100)

Total Registered User to get from server for contact list

Properties

Sample Value

Description

refreshOption

true/false

Refresh chat for updates

blockOption

true/false

Block specific user

deleteOption

true/false

Delete chat of specific user

muteUserChatOption

true/false

Mute messages from specific user

Properties

Sample Value

Description

deleteOption

true/false

Delete messages from chat

forwardOption

true/false

Forward messages to others

replyOption

true/false

Reply to a specific message

recordButton

true/false

Record and share audio as a message

Properties

Sample Value

Description

createAnyContact

true/false

Launch a chat with any user in contact list

imageCompression

true/false

By default its disabled. You can enable the image compression using imageCompression properties

Chat thread tool bar settings

Properties

Sample Value

Description

hideGroupSubtitle

true/false

This will hide tool bar subtitle of chat thread

groupInfoScreenVisible

true/false

If false then the group info screen will be disabled

userProfileFragment

true/false

if false then profile screen will be disabled

Customizing attachment options.

You can hide particular attachment options by setting value as false in attachmentOptions in applozic-settings.json file.

"attachmentOptions": {
      ":location": true,
      ":camera": true,
      ":file": true,
      ":audio": true,
      ":video": true,
      ":contact": true
    }

Example : to hide location option in attachment set :

":location": false

Settings programmatically

Either you can use apploizc-settings.json file and enable or disable options Or you can use programmatically settings to enable or disable settings

Add the below settings in onSuccess callback of applozic login link here

Disable deleted chat option completely

Remove delete option from chat screen and chat window

ApplozicSetting.getInstance(context).setDeleteConversationOption(true);

Enabling badge circle dot in android O device and greater mobile OS

Add settings to enable to badge circle dot in android make sure uninstall the app and install

ApplozicClient.getInstance(context).enableShowUnreadCountBadge();

Show App icon in the notification


Add the below settings in Applozic login code of onSuccess callback of login

ApplozicClient.getInstance(context).showAppIconInNotification(true);

Notifications

You can enable/disable the notifications by calling the below methods:

ApplozicClient.getInstance(context).disableNotification();
ApplozicClient.getInstance(context).enableNotification();

Hide chat list on notification click

Use the below settings for disable the chat list showing on click of notification add the settings in onSuccess callback of Applozic Login

ApplozicClient.getInstance(context).hideChatListOnNotification();

Disable the sharing files from outside to SDK

Add the below activity entry in your app AndroidManifest.xml file

<activity
            android:name="com.applozic.mobicomkit.uiwidgets.people.activity.MobiComKitPeopleActivity"
            android:configChanges="keyboardHidden|screenSize|smallestScreenSize|screenLayout|orientation"
            android:label="@string/app_name"
            android:parentActivityName="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity"
            android:theme="@style/ApplozicTheme"
            android:windowSoftInputMode="adjustResize"
            tools:node="replace">
    <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity" />
    <intent-filter>
        <action android:name="android.intent.action.SEARCH" />
    </intent-filter>
    <meta-data
                android:name="android.app.searchable"
                android:resource="@xml/searchable_contacts"
                tools:node="replace" />
</activity>

Message Templates:

Applozic provides inbuilt , ready to use and easily customisable message templates. The structure as well as message list can be set from the applozic-settings.json file itself. The following is the structure for the same.

"messageTemplate": {
    "isEnabled": false,  //make this true to enable the templates
    "borderColor": "#ffffff",  //border color for the templates
    "backgroundColor": "#FF03A9F4", //background color for the templates
    "hideOnSend": false, //this will hide the templates when clicked for a single message
    "sendMessageOnClick": true,//will send a message with the value
    "cornerRadius": 20, //corner radius, increase this for more rounded 
    "textColor": "#ffffff",//text color within the template
    "messageList": {  //this is the message list with key value, the key will be displayed and the value will be sent as a message
      "Greetings": "Hey",
      "Help?": "How may I help you?",
      "Email-Id": "May I know your emailId",
      "Company": "May I know your company name?",
      "Platform?": "Is this related to Android, iOS, or web?",
      "Doc?": "Did you follow our doc?"
    },
    "textMessageList": {//this will be shown for the last message, if it is text message
      "showOnSenderSide": false, //if true, will be shown if last message is sent message
      "showOnReceiverSide": false, //if true, will be shown if last message is received message
      "sendMessageOnClick": false, //if true then message will be sent on click
      "messageList": { //put your messages here to be shown for the last message.
      }
    },
    "imageMessageList": {//this will be shown for the last message, if it is image message
      "showOnSenderSide": false,
      "sendMessageOnClick": false,
      "showOnReceiverSide": false,
      "messageList": {
      }
    },
    "videoMessageList": {//this will be shown for the last message, if it is video message
      "showOnSenderSide": false,
      "sendMessageOnClick": false,
      "showOnReceiverSide": false,
      "messageList": {
      }
    },
    "audioMessageList": {//this will be shown for the last message, if it is audio message
      "showOnSenderSide": false,
      "sendMessageOnClick": false,
      "showOnReceiverSide": false,
      "messageList": {
      }
    },
    "locationMessageList": {//this will be shown for the last message, if it is location message
      "showOnSenderSide": false,
      "sendMessageOnClick": false,
      "showOnReceiverSide": false,
      "messageList": {
      }
    },
    "contactMessageList": {//this will be shown for the last message, if it is contact message
      "showOnSenderSide": false,
      "sendMessageOnClick": false,
      "showOnReceiverSide": false,
      "messageList": {
      }
    }
  }

📘

Note

If the messageList is not empty then it will be shown irrespective of textMessageList , imageMessageList etc. If you want to use the individual message list then make the messageList at the root empty otherwise the priority will be given to it over all the other lists.

Getting the message template click outside the SDK

If you want to receive the click event outside the SDK for your use, you can listen for the broadcast action com.applozic.mobicomkit.TemplateMessage and get the message by using the below code:

String message = intent.getStringExtra("templateMessage",null);

📘

Make sure you register the broadcast receiver in your AndroidManifest.xml file or your Application class or else you won't receive the action if the chat was launched by notification.

Dynamic message templates

You can also set the template messages dynamically based on a particular user. You need to set the messages in ApplozicClient in applozic's login success.

Map<String, String> messageTemplates = new HashMap<>();
  messageTemplates.put("Greetings", "Hey there!");

  messageTemplates.put("Share my userId", "Hey there my userId is : " + registrationResponse.getUserId());

  if (!TextUtils.isEmpty(registrationResponse.getContactNumber())) {
       messageTemplates.put("Share my phone no.", "Hey there my contact number is : " + registrationResponse.getContactNumber());
            }

  if (!TextUtils.isEmpty(registrationResponse.getDisplayName())) {
       messageTemplates.put("Share my display name", "Hey there my Display name is : " + registrationResponse.getDisplayName());
            }
 ApplozicClient.getInstance(context).setMessageTemplates(messageTemplates);

If you set a message with same key as already defined in the applozic-settings.json file, then the dynamic one would replace the static one. For e.g. The Greetings key is already defined in the applozic-settings.json file with value Hey, but now that the same key is being set dynamically, the dynamic value would be used. In this case if you click on Greetings then Hey there! message would be sent instead of Hey.

Open your screen on the tap toolbar

You will have to implement the ALProfileClickListener in your Application class file as implements ALProfileClickListener

Example :

public class Application extends Application implements ALProfileClickListener {

 @Override
 public void onCreate() {
  super.onCreate();

 }

 @Override
 public void onClick(Context context, String userId, Channel channel, boolean isToolbar) {

  if (!TextUtils.isEmpty(userId)) {
   Log.i("User profile ", " click for userId:" + userId);

   // You can get the details of this user by get the contact info using below method.
   AppContactService contactService = new AppContactService(this);
   Contact userContactInfo = contactService.getContactById(userId);
   Log.i("Contact ", "details: " + channel);

  } else {
   Log.i("Channel info screen ", "channel: " + channel);
  }

  Log.i("Tap", "Is profile clicked from tool bar :" + isToolbar);
 }
}

And in onClick, you can open the profile screen by getting userId or groupId from the channel.

Note: For disable the profile screen or group info screen referer this link

ActionBar Color/ToolBar Color for Conversation Screen

To customize the ActionBar/ToolBar color of theme

  1. Add this line in your <resources tag in the colors.xml file
xmlns:tools="http://schemas.android.com/tools"
  1. Add the below colors in your colors.xml file and use your own color values in them
<resources xmlns:tools="http://schemas.android.com/tools">

    <color name="applozic_theme_color_primary" tools:override="true">#ff0000</color>
    <color name="applozic_theme_color_primary_dark" tools:override="true">#ff0000</color>

</resources>

UI source code

For complete control over UI, you can download our open source chat UI toolkit from this github link and change it as per your designs.
Import mobicomkitui library into your project and add the following in your app's build.gradle file's dependency:

implementation project(':mobicomkitui')
Then go to mobicomkitui's build.gradle file and replace implementation project(':mobicomkit') by the below line

'com.applozic.communication.message:mobicomkit:'




[block:callout]
{
  "type": "info",
  "title": "Warning!!!",
  "body": "Make sure you are not importing the mobicomkit and mobicommons modules from the source codes. You need to import just the mobicomkitui module and then import mobicomkit via gradle in mobicomkitui's gradle file as mentioned above."
}
[/block]

MobiComKitUI contains the UI related source code, icons, layouts and other resources which you can customize based on your design needs.
For your custom contact list, replace `MobiComKitPeopleActivity` with your contact list activity.
Sample app with integration is available under [app](https://github.com/AppLozic/Applozic-Android-SDK/tree/master/app).



##Fragment support
You can add the chat fragments to any activity. You need to clone the [Applozic-Android-SDK ](https://github.com/AppLozic/Applozic-Android-SDK) and import the mobicomkitui module in your project. Below documentation links explain how to add the chat fragments to your activity:

###Adding Chat fragment to your Activity

1) Add the below container layout in your activity layout. This will contain the chat fragment.


[block:code]
{
  "codes": [
    {
      "code": "<RelativeLayout\n       android:id=\"@+id/layout_child_activity\"\n       android:background=\"@color/conversation_list_all_background\"\n       android:layout_width=\"fill_parent\"\n       android:layout_height=\"fill_parent\"\n       android:layout_gravity=\"left|top\" />",
      "language": "xml"
    }
  ]
}
[/block]

2) Open `ConversationUIService.java` file and add the below constructor:


[block:code]
{
  "codes": [
    {
      "code": "MobiComQuickConversationFragment mobiComQuickConversationFragment;\n\npublic ConversationUIService(FragmentActivity fragmentActivity,MobiComQuickConversationFragment mobiComQuickConversationFragment) {\n   this.fragmentActivity = fragmentActivity;\n   this.mobiComQuickConversationFragment = mobiComQuickConversationFragment;\n   this.baseContactService = new AppContactService(fragmentActivity);\n       this.notificationManager  = (NotificationManager) fragmentActivity.getSystemService(Context.NOTIFICATION_SERVICE);\n   this.userPreference = MobiComUserPreference.getInstance(fragmentActivity);\n  }\n",
      "language": "java"
    }
  ]
}
[/block]

- Find for `getQuickConversationFragment()` public method in `ConversationUIService.java` file replace that with below code : 


[block:code]
{
  "codes": [
    {
      "code": "public MobiComQuickConversationFragment getQuickConversationFragment() {\n   return mobiComQuickConversationFragment;\n}\n",
      "language": "java"
    }
  ]
}
[/block]

- Find for `addMessage` method in `ConversationUIService.java` file and replace it with below code:


[block:code]
{
  "codes": [
    {
      "code": " public void addMessage(Message message) {\n        if (message.isUpdateMessage()) {\n            if (!BroadcastService.isQuick()) {\n                return;\n            }\n            if (mobiComQuickConversationFragment != null) {\n                if (message.hasHideKey()) {\n                    mobiComQuickConversationFragment.refreshView();\n                } else {\n                    mobiComQuickConversationFragment.addMessage(message);\n                }\n            }\n        }\n    }",
      "language": "java"
    }
  ]
}
[/block]

3) Open ` MobiComKitBroadcastReceiver.java` and add the below constructor:


[block:code]
{
  "codes": [
    {
      "code": "public MobiComKitBroadcastReceiver(FragmentActivity fragmentActivity,ConversationUIService conversationUIService) {\n        this.conversationUIService = conversationUIService;\n        this.baseContactService = new AppContactService(fragmentActivity);\n        this.hideActionMessages = ApplozicClient.getInstance(fragmentActivity).isActionMessagesHidden();\n    }",
      "language": "java"
    }
  ]
}
[/block]

4) In your Activity : 
- Add the below variables:


[block:code]
{
  "codes": [
    {
      "code": "private static int retry;\nConversationUIService conversationUIService;\nMobiComQuickConversationFragment mobiComQuickConversationFragment;\nMobiComKitBroadcastReceiver mobiComKitBroadcastReceiver;",
      "language": "java"
    }
  ]
}
[/block]

- Add the below code in your `onCreate()` method:


[block:code]
{
  "codes": [
    {
      "code": "mobiComQuickConversationFragment = new MobiComQuickConversationFragment();\nconversationUIService = new ConversationUIService(this, mobiComQuickConversationFragment);\nmobiComKitBroadcastReceiver = new MobiComKitBroadcastReceiver(this, conversationUIService);\n\n  Intent lastSeenStatusIntent = new Intent(this, UserIntentService.class);\n        lastSeenStatusIntent.putExtra(UserIntentService.USER_LAST_SEEN_AT_STATUS, true);\n UserIntentService.enqueueWork(this,lastSeenStatusIntent);\n\n\n\naddFragment(this, mobiComQuickConversationFragment, ConversationUIService.QUICK_CONVERSATION_FRAGMENT); //here we are adding fragment ",
      "language": "java"
    }
  ]
}
[/block]

- Add the below method to add the fragment in the container layout:


[block:code]
{
  "codes": [
    {
      "code": "public static void addFragment(FragmentActivity fragmentActivity, Fragment fragmentToAdd, String fragmentTag) {\n   FragmentManager supportFragmentManager = fragmentActivity.getSupportFragmentManager();\n\n   FragmentTransaction fragmentTransaction = supportFragmentManager\n           .beginTransaction();\n   fragmentTransaction.replace(R.id.layout_child_activity, fragmentToAdd,\n           fragmentTag);\n\n   if (supportFragmentManager.getBackStackEntryCount() > 1) {\n       supportFragmentManager.popBackStackImmediate();\n   }\n   fragmentTransaction.addToBackStack(fragmentTag);\n   fragmentTransaction.commitAllowingStateLoss();\n   supportFragmentManager.executePendingTransactions();\n}\n",
      "language": "java"
    }
  ]
}
[/block]

- Implement these two interfaces in your Activity:


[block:code]
{
  "codes": [
    {
      "code": "implements MessageCommunicator, MobiComKitActivityInterface",
      "language": "java"
    }
  ]
}
[/block]

- Replace the Overriden methods from the interfaces by the below methods:


[block:code]
{
  "codes": [
    {
      "code": "@Override\npublic void onQuickConversationFragmentItemClick(View view, Contact contact, Channel channel,Integer conversationId,String searchString) {\n Intent intent = new Intent(this, ConversationActivity.class);\nintent.putExtra(ConversationUIService.CONVERSATION_ID, conversationId);\nintent.putExtra(ConversationUIService.SEARCH_STRING, searchString);\nintent.putExtra(ConversationUIService.TAKE_ORDER, true);\nif (contact != null) {\n   intent.putExtra(ConversationUIService.USER_ID, contact.getUserId());\n   intent.putExtra(ConversationUIService.DISPLAY_NAME, contact.getDisplayName());\n   startActivity(intent);\n} else if (channel != null) {\n   intent.putExtra(ConversationUIService.GROUP_ID, channel.getKey());\n   intent.putExtra(ConversationUIService.GROUP_NAME, channel.getName());\n   startActivity(intent);\n\n   }\n}\[email protected]\npublic void startContactActivityForResult() {\n   conversationUIService.startContactActivityForResult();\n}\n\[email protected]\npublic void addFragment(ConversationFragment conversationFragment) {\n   //NOT REQUIRED HERE..\n}\n\[email protected]\npublic void updateLatestMessage(Message message, String number) {\n   conversationUIService.updateLatestMessage(message, number);\n}\n\[email protected]\npublic void removeConversation(Message message, String number) {\n   conversationUIService.removeConversation(message, number);\n\n}\n\[email protected]\npublic void showErrorMessageView(String errorMessage) {\n\n}\[email protected]\npublic void retry() {\n    retry++;\n}\[email protected]\npublic int getRetryCount() {\n    return retry;\n}\n",
      "language": "java"
    }
  ]
}
[/block]

- In your Activity's `onStop` method add the below code:


[block:code]
{
  "codes": [
    {
      "code": "@Override\nprotected void onStop() {\n   super.onStop();\n        Applozic.disconnectPublish(this);\n\n}\n",
      "language": "java"
    }
  ]
}
[/block]

- In your Activity's `onResume` method add the below code:


[block:code]
{
  "codes": [
    {
      "code": "@Override\nprotected void onResume() {\n   super.onResume();\n   LocalBroadcastManager.getInstance(this).registerReceiver(mobiComKitBroadcastReceiver, BroadcastService.getIntentFilter());\n         Applozic.connectPublish(this);\n\n   if (!Utils.isInternetAvailable(this)) {\n       String errorMessage = getResources().getString(R.string.internet_connection_not_available);\n       showErrorMessageView(errorMessage);\n   }\n}\n",
      "language": "java"
    }
  ]
}
[/block]

- In your Activity's `onPause` method add the below code:


[block:code]
{
  "codes": [
    {
      "code": "@Override\nprotected void onPause() {\n   LocalBroadcastManager.getInstance(this).unregisterReceiver(mobiComKitBroadcastReceiver);\n   super.onPause();\n}",
      "language": "java"
    }
  ]
}
[/block]

5) Open `ConversationActivity.java` file, find for the below lines and remove them:


[block:code]
{
  "codes": [
    {
      "code": "else {\n            setSearchListFragment(quickConversationFragment);\n            addFragment(this, quickConversationFragment, ConversationUIService.QUICK_CONVERSATION_FRAGMENT);\n        }",
      "language": "java"
    }
  ]
}
[/block]

6) Open `MobiComQuickConversationFragment.java` file:
- In `onCreateView` method find for the below lines and comment them out:


[block:code]
{
  "codes": [
    {
      "code": "//toolbar = (Toolbar) getActivity().findViewById(R.id.my_toolbar); //toolbar.setClickable(false);\n\n// ((CustomToolbarListener) getActivity()).setToolbarTitle(ApplozicService.getContext(getContext()).getString(R.string.conversation));",
      "language": "java"
    }
  ]
}
[/block]

- In `onCreateOptionsMenu` method comment all the menu items out


[block:code]
{
  "codes": [
    {
      "code": "@Override\npublic void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {\n   super.onCreateOptionsMenu(menu, inflater);\n\n/*   if (!alCustomizationSettings.isStartNewButton()) {\n       menu.removeItem(R.id.start_new);\n   }else {\n       menu.findItem(R.id.start_new).setVisible(true);\n   }\n   if (!alCustomizationSettings.isStartNewGroup()) {\n       menu.removeItem(R.id.conversations);\n   }else {\n       menu.findItem(R.id.conversations).setVisible(true);\n   }\n   menu.findItem(R.id.refresh).setVisible(true);\n   if(alCustomizationSettings.isProfileOption()){\n       menu.findItem(R.id.applozicUserProfile).setVisible(true);\n   }\n   if(alCustomizationSettings.isMessageSearchOption()){\n       menu.findItem(R.id.menu_search).setVisible(true);\n   }\n   if(alCustomizationSettings.isBroadcastOption()){\n       menu.findItem(R.id.broadcast).setVisible(true);\n   }*/\n}",
      "language": "java"
    }
  ]
}
[/block]

Then add [this menu xml file](https://github.com/AppLozic/Applozic-Android-SDK/blob/master/mobicomkitui/src/main/res/menu/mobicom_basic_menu_for_normal_message.xml) in your activity and show/hide the menu items based on your requirements.

- In `onResume()` method comment the below code:


[block:code]
{
  "codes": [
    {
      "code": "/* toolbar.setTitle(ApplozicApplication.TITLE);\ntoolbar.setSubtitle(\"\");*/",
      "language": "java"
    }
  ]
}
[/block]

7) Wherever you are doing Applozic login using `UserLoginTask` add the below line of code in the `onSuccess` method:


[block:code]
{
  "codes": [
    {
      "code": "ApplozicClient.getInstance(context).hideChatListOnNotification();",
      "language": "java"
    }
  ]
}
[/block]

8) You need to handle the runtime permissions for storage in your activity for the contact images to load.

### Adding chat fragment to your TabView Activity
1) Add the below lines to handle snack bar message in your tab activity xml file:


[block:code]
{
  "codes": [
    {
      "code": "  <LinearLayout\n        android:id=\"@+id/footerAd\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:orientation=\"vertical\"\n        android:visibility=\"gone\"\n        android:layout_gravity=\"top\">\n    </LinearLayout>",
      "language": "xml"
    }
  ]
}
[/block]

2) Create a new instance of the `MobiComQuickConversationFragment` when setting up the view pager:


[block:code]
{
  "codes": [
    {
      "code": "private void setupViewPager(ViewPager viewPager) {\n//make global object of the MobiComQuickConversationFragment\n\n    mobiComQuickConversationFragment = new MobiComQuickConversationFragment();//this is a fragment \n    //other stuff to setup the view pager with other tab fragments\n}\n",
      "language": "java"
    }
  ]
}
[/block]

3) Open the `ConversationUIService.java` class:
- Add the below variable:


[block:code]
{
  "codes": [
    {
      "code": "MobiComQuickConversationFragment mobiComQuickConversationFragment;",
      "language": "java"
    }
  ]
}
[/block]

- Add the below constructor:


[block:code]
{
  "codes": [
    {
      "code": "public ConversationUIService(FragmentActivity fragmentActivity,MobiComQuickConversationFragment mobiComQuickConversationFragment) {     this.fragmentActivity = fragmentActivity;\n    this.baseContactService = new AppContactService(fragmentActivity);\n    this.userPreference = MobiComUserPreference.getInstance(fragmentActivity);\n       this.notificationManager  = (NotificationManager) fragmentActivity.getSystemService(Context.NOTIFICATION_SERVICE);\n    this.mobiComQuickConversationFragment = mobiComQuickConversationFragment; \n}\n",
      "language": "java"
    }
  ]
}
[/block]

- Find for `getQuickConversationFragment` method and replace it with the below method:


[block:code]
{
  "codes": [
    {
      "code": "public MobiComQuickConversationFragment getQuickConversationFragment() {\n    return this.mobiComQuickConversationFragment;\n}\n",
      "language": "java"
    }
  ]
}
[/block]

- Find for the `addMessage` and replace it with the below method:


[block:code]
{
  "codes": [
    {
      "code": " public void addMessage(Message message) {\n        if (message.isUpdateMessage()) {\n            if (!BroadcastService.isQuick()) {\n                return;\n            }\n            if (mobiComQuickConversationFragment != null) {\n                if (message.hasHideKey()) {\n                    mobiComQuickConversationFragment.refreshView();\n                } else {\n                    mobiComQuickConversationFragment.addMessage(message);\n                }\n            }\n        }\n    }\n",
      "language": "java"
    }
  ]
}
[/block]

4) Open `MobiComKitBroadcastReceiver.java` and add the below constructor:


[block:code]
{
  "codes": [
    {
      "code": "public MobiComKitBroadcastReceiver(FragmentActivity fragmentActivity, MobiComQuickConversationFragment mobiComQuickConversationFragment) {\n   this.conversationUIService = new ConversationUIService(fragmentActivity,mobiComQuickConversationFragment);\n   this.baseContactService = new AppContactService(fragmentActivity);\n          this.hideActionMessages = ApplozicClient.getInstance(fragmentActivity).isActionMessagesHidden();\n\n}\n",
      "language": "java"
    }
  ]
}
[/block]

5) Open your Tab Activity:
- Add the below variables:


[block:code]
{
  "codes": [
    {
      "code": "private static int retry;\npublic LinearLayout layout;\npublic Snackbar snackbar;\nMobiComKitBroadcastReceiver mobiComKitBroadcastReceiver;\nConversationUIService conversationUIService;\nMobiComQuickConversationFragment mobiComQuickConversationFragment;",
      "language": "java"
    }
  ]
}
[/block]

- In your `onCreate()` method add the below code: 


[block:code]
{
  "codes": [
    {
      "code": "@Override\nprotected void onCreate(Bundle savedInstanceState) {\n       layout = (LinearLayout) findViewById(R.id.footerAd);//this is snack bar layout\n\n   ------\n//The below code needs to be added after setting the fragments\n    conversationUIService = new ConversationUIService(this, mobiComQuickConversationFragment);\n    mobiComKitBroadcastReceiver = new MobiComKitBroadcastReceiver(this, mobiComQuickConversationFragment);\n \n ------\n}\n",
      "language": "java"
    }
  ]
}
[/block]

- Implement these two interfaces in your tab activity:


[block:code]
{
  "codes": [
    {
      "code": "implements MessageCommunicator, MobiComKitActivityInterface",
      "language": "java"
    }
  ]
}
[/block]

- Replace the Overriden methods from the interfaces by below methods:


[block:code]
{
  "codes": [
    {
      "code": "@Override\npublic void showErrorMessageView(String message) {\n    layout.setVisibility(View.VISIBLE);\n    snackbar = Snackbar.make(layout, message, Snackbar.LENGTH_LONG);\n    snackbar.setAction(\"OK\", new View.OnClickListener() {\n        @Override\n        public void onClick(View view) {\n            snackbar.dismiss();\n        }\n    });\n    snackbar.setDuration(Snackbar.LENGTH_LONG);\n    ViewGroup group = (ViewGroup) snackbar.getView();\n    TextView textView = (TextView) group.findViewById(R.id.snackbar_action);\n    textView.setTextColor(Color.YELLOW);\n    group.setBackgroundColor(getResources().getColor(R.color.error_background_color));\n    TextView txtView = (TextView) group.findViewById(R.id.snackbar_text);\n    txtView.setMaxLines(5);\n    snackbar.show();\n}\n\[email protected]\npublic void retry() {\n    retry++;\n}\n\[email protected]\npublic int getRetryCount() {\n    return retry;\n}\n\npublic void dismissErrorMessage() {\n    if (snackbar != null) {\n        snackbar.dismiss();\n    }\n}\n\[email protected]\npublic void onQuickConversationFragmentItemClick(View view, Contact contact, Channel channel, Integer conversationId, String searchString) {\n   Intent intent = new Intent(this, ConversationActivity.class);\n   intent.putExtra(ConversationUIService.TAKE_ORDER, true);\n   intent.putExtra(ConversationUIService.SEARCH_STRING, searchString);\n   intent.putExtra(ConversationUIService.CONVERSATION_ID, conversationId);\n   if (contact != null) {\n       intent.putExtra(ConversationUIService.USER_ID, contact.getUserId());\n       intent.putExtra(ConversationUIService.DISPLAY_NAME, contact.getDisplayName());\n   } else if (channel != null) {\n       intent.putExtra(ConversationUIService.GROUP_ID, channel.getKey());\n       intent.putExtra(ConversationUIService.GROUP_NAME, channel.getName());\n   }\n   startActivity(intent); \n   }\n   \[email protected]\npublic void startContactActivityForResult() {\n    conversationUIService.startContactActivityForResult();\n}\n\[email protected]\npublic void addFragment(ConversationFragment conversationFragment) {\n}\n\[email protected]\npublic void updateLatestMessage(final Message message, final String formattedContactNumber) {\n    conversationUIService.updateLatestMessage(message, formattedContactNumber);\n}\n\[email protected]\npublic void removeConversation(Message message, String formattedContactNumber) {\n    conversationUIService.removeConversation(message, formattedContactNumber);\n}\n",
      "language": "java"
    }
  ]
}
[/block]

- In your Activity's `onStop` method add the below code:


[block:code]
{
  "codes": [
    {
      "code": "@Override\nprotected void onStop() {\n   super.onStop();\n        Applozic.disconnectPublish(this);\n}\n",
      "language": "java"
    }
  ]
}
[/block]

- In your Activity's `onPause` method add the below code:


[block:code]
{
  "codes": [
    {
      "code": "@Override\nprotected void onPause() {\n    LocalBroadcastManager.getInstance(this).unregisterReceiver(mobiComKitBroadcastReceiver);\n    super.onPause();\n}",
      "language": "java"
    }
  ]
}
[/block]

- In your Activity's `onResume` method add the below code:


[block:code]
{
  "codes": [
    {
      "code": "@Override\nprotected void onResume() {\n   super.onResume();\n   LocalBroadcastManager.getInstance(this).registerReceiver(mobiComKitBroadcastReceiver, BroadcastService.getIntentFilter());\n        Applozic.connectPublish(this);\n\n   if (!Utils.isInternetAvailable(getApplicationContext())) {\n       String errorMessage = getResources().getString(R.string.internet_connection_not_available);\n       showErrorMessageView(errorMessage);\n   }\n}\n",
      "language": "java"
    }
  ]
}
[/block]

6) Open `ConversationActivity.java`, find for the below lines and remove/comment them:


[block:code]
{
  "codes": [
    {
      "code": " /*else {\n            setSearchListFragment(quickConversationFragment);\n            addFragment(this, quickConversationFragment, ConversationUIService.QUICK_CONVERSATION_FRAGMENT);\n        }\n*/\n",
      "language": "java"
    }
  ]
}
[/block]

7) Open `MobiComQuickConversationFragment.java`:
- In `onCreateView` comment the below lines of code:


[block:code]
{
  "codes": [
    {
      "code": "/*  toolbar = (Toolbar) getActivity().findViewById(R.id.my_toolbar);\n toolbar.setClickable(false);\n \n // ((CustomToolbarListener) getActivity()).setToolbarTitle(ApplozicService.getContext(getContext()).getString(R.string.conversation));\n \n */",
      "language": "java"
    }
  ]
}
[/block]

- In `onCreateOptionMenu` comment all the menu items out:


[block:code]
{
  "codes": [
    {
      "code": "@Override\npublic void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {\n   super.onCreateOptionsMenu(menu, inflater);\n\n/*   if (!alCustomizationSettings.isStartNewButton()) {\n       menu.removeItem(R.id.start_new);\n   }else {\n       menu.findItem(R.id.start_new).setVisible(true);\n   }\n   if (!alCustomizationSettings.isStartNewGroup()) {\n       menu.removeItem(R.id.conversations);\n   }else {\n       menu.findItem(R.id.conversations).setVisible(true);\n   }\n   menu.findItem(R.id.refresh).setVisible(true);\n   if(alCustomizationSettings.isProfileOption()){\n       menu.findItem(R.id.applozicUserProfile).setVisible(true);\n   }\n   if(alCustomizationSettings.isMessageSearchOption()){\n       menu.findItem(R.id.menu_search).setVisible(true);\n   }\n   if(alCustomizationSettings.isBroadcastOption()){\n       menu.findItem(R.id.broadcast).setVisible(true);\n   }*/\n}",
      "language": "java"
    }
  ]
}
[/block]

Then add [this menu xml file](https://github.com/AppLozic/Applozic-Android-SDK/blob/master/mobicomkitui/src/main/res/menu/mobicom_basic_menu_for_normal_message.xml) in your activity and show/hide the menu items based on your requirements.

- In `onResume()` method comment the below code:


[block:code]
{
  "codes": [
    {
      "code": "/* toolbar.setTitle(ApplozicApplication.TITLE);\ntoolbar.setSubtitle(\"\");*/",
      "language": "java"
    }
  ]
}
[/block]

8) Wherever you are doing Applozic login using `UserLoginTask` add the below line of code in the `onSuccess` method:


[block:code]
{
  "codes": [
    {
      "code": "ApplozicClient.getInstance(context).hideChatListOnNotification();",
      "language": "java"
    }
  ]
}
[/block]

9) You need to handle the runtime permissions for storage in your activity for the contact images to load.

10) Add the tab Listener to load the fragment on tab change, call the onResume method of that fragment which you have added in the ViewPager by item position

For eg. For adding the Listener and loading the fragment on tab change/switch:


[block:code]
{
  "codes": [
    {
      "code": "tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {\n   @Override\n   public void onTabSelected(TabLayout.Tab tab) {\n       viewPager.setCurrentItem(tab.getPosition(),true);\n       switch (tab.getPosition()) {\n           case 0:\n            //Explicitly load the MobiComQuickConversationFragment by item position\n                viewPagerAdapter.getItem(0).onResume();\n                    break;\n\n       }\n   }\n\n   @Override\n   public void onTabUnselected(TabLayout.Tab tab) {\n\n\n   }\n\n   @Override\n   public void onTabReselected(TabLayout.Tab tab) {\n\n   }\n});\n",
      "language": "java"
    }
  ]
}
[/block]

## Audio/Video call with Applozic chat


[block:callout]
{
  "type": "warning",
  "body": "We do not provide audio/video call from Applozic SDK side below setting can help you in implementing the third party integration. \n\nYou can enable the call button in **one to one** chat pre-built UI and launch your own screen to start an audio/video call."
}
[/block]

Add this in onSuccess of your Applozic login:

Step: 1
Below setting will enable the call button(Audio/Video) in the UI.


[block:code]
{
  "codes": [
    {
      "code": "ApplozicClient.getInstance(context).setIPCallEnabled(true);\n               \ntry {\n   Map<ApplozicSetting.RequestCode, String> activityCallbacks = new HashMap<>();\n   activityCallbacks.put(ApplozicSetting.RequestCode.AUDIO_CALL, Class.forName(\"com.something.YourAudioCallActivity\").getName());   //set fully classified name for your AudioCallActivity\n  \n   activityCallbacks.put(ApplozicSetting.RequestCode.VIDEO_CALL, Class.forName(\"com.something.YourVideoCallActivity\").getName());   //set fully classified name for your AudioCallActivity\n    \n   ApplozicSetting.getInstance(context).setActivityCallbacks(activityCallbacks);\n     \n} catch(ClassNotFoundException e) {\n   e.printStackTrace();\n}",
      "language": "java"
    }
  ]
}
[/block]


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.


On click of audio call button in the one to one chat thread your AudioCallActivity will open, and on click of the video call button from one to one chat thread, your VideoCallActivity will open. The intent received in both these activities will have the userId of the user. 
Get the userId as below:


[block:code]
{
  "codes": [
    {
      "code": "String userIdOfCallReceiver = getIntent.getStringExtra(\"CONTACT_ID\");",
      "language": "java"
    }
  ]
}
[/block]

You can then start the audio/video call with the user.

---


[block:html]
{
  "html": "<div> <h3 style =\"font-size: 30px;\n    font-weight: 300;\n    margin-bottom: 10px;\n  \">What's Next </h3></div>\n<table style=\"\n    width: 100%;\n    height: 10px;\n    background-color: #FCFCFC\n\"><tbody><tr><td style=\"\n    padding: 2%;\n\"><a ui-sref=\"docs.show({'doc': 'android-chat-localization'})\"><i class=\"fa fa-chevron-right\" style=\"\n    padding: 5px;\n\"></i>Localization</a></td></tr></tbody></table>\n\n<style></style>"
}
[/block]

 

Updated about a month ago


Android


Android Chat UI Customization and Settings

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.