Chatting apps are revolutionizing not just the way we communicate, but businesses. WeChat’s story is a stark example of how business ecosystems are becoming conversational. Also, the fact that chatting applications have overtaken social media for user-base indicates people’s preference. Businesses, therefore, have started adopting the approach of running operations on a chat-based infrastructure and at Applozic, our mission is to be the enabler of this paradigm shift.

In this tutorial, we will be building a basic android chat app using Applozic SDK in android studio.

Prerequisites

  1. Applozic account
  2. Android Studio 2.x and above
  3. Gradle 3.1.3 and above
  4. JDK 8.0 /Language
  5. Android app(If you already have your own, it’s fine or download it here)

There are 5 simple steps to build an android chat app.

  1. Get your free chat starter kit
  2. Install Applozic chat SDK in your android app
  3. Configuration
  4. Authentication
  5. Check if the user is already logged in

Let’s start with getting the free chat starter kit

Step 1: Get your free chat starter kit

We will be using Applozic free chat kit to build our chat app.

Applozic chat kit includes

  1. Ready-made Chat SDK
  2. Chat API
  3. Ready-made UX/UI

To get this free chat kit, Sign up here and once you signup Applozic generates unique APP_ID which we will be using it in our configuration step.

Applozic dashboard - Installation section screenshot

(You can get  APP_ID in the installation section)

Step 2: Install Applozic chat SDK in your android app

Once you create applozic a/c then you need to integrate Applozic chat SDK in your app.

Here you will be using the Gradle toolkit to integrate the chat app.

(What is Gradle in android studio)

Copy the below and add it in your android Gradle dependency

implementation 'com.applozic.communication.uiwidget:mobicomkitui:5.45'

Once gradle is build, you need to exclude a package option to avoid duplicate files or errors.

To exclude package, Just copy the below and add it in your grade android target.

 packagingOptions {           

           exclude 'META-INF/DEPENDENCIES'      

           exclude 'META-INF/NOTICE'         

           exclude 'META-INF/LICENSE'      

           exclude 'META-INF/LICENSE.txt'    

           exclude 'META-INF/NOTICE.txt' 

           exclude 'META-INF/ECLIPSE_.SF'

           exclude 'META-INF/ECLIPSE_.RSA'

         }    

Your build. gradle file will look like this:

Gradle toolkit screenshot

Great! Now you’re done with the installation of Chat SDK into the android app.

Let’s get into the third step

Step 3: Configuration

In this step, you need to CONFIGURE the activity and metadata in your AndroidManifest.xml and put your APP_ID, app icon and attachment folder name. This step is needed because there are some components used by Applozic SDK which needs to be registered in your App-level AndroidManifest.xml file just that you can change their properties. For e.g, you need to add the ConversationActivity.java entry in the AndroidManifest.xml file to add a parent activity(Which belongs to your app) to it.

Add below coding within your android App application tag.

<activity android:name="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity"

           android:configChanges="keyboardHidden|screenSize|smallestScreenSize|screenLayout|orientation"

           android:label="@string/app_name"

           android:parentActivityName=".MainActivity"

           android:theme="@style/ApplozicTheme"

           android:launchMode="singleTask"

           tools:node="replace">

      <!-- Parent activity meta-data to support API level 7+ -->

<meta-data

           android:name="android.support.PARENT_ACTIVITY"

           android:value=".MainActivity" />

 </activity>

<meta-data android:name="com.applozic.application.key"

           android:value="<APPLOZIC_APP_ID>" /> <!-- Replace with your Applozic APP_ID -->

 <meta-data android:name="com.package.name" 

           android:value="${applicationId}" /> <!--

NOTE: Do NOT change this, it should remain same i.e ‘com.package.name’ →

You AndroidManifest.xml file will look something like this:

Android manifest file screenshot

Step 4: Authentication

(You need to make sure that you have already created the a/c in applozic)

Login into Applozic Chat – user registration code – anywhere from your app – pass the required details.

Before accessing any APIs or Screens in Applozic SDK, you need to authenticate a user. You can directly authenticate a user using a userId (The only mandatory field of Applozic User), if the user exists, the SDK will log in the user, if not, the SDK will create the user and login. Do the following operations in LoginActivity.

Create a User object as below:

Mandatory: User ID

User user = new User();          

user.setUserId(userId); //userId it can be any unique user identifier NOTE : +,*,? are not allowed chars in userId.

user.setDisplayName(displayName); //displayName is the name of the user which will be shown in chat messages

user.setPassword(password); //If password is set, you need to pass it always when authenticating this user.

user.setImageLink("");//optional, set your image link if you have 

Pass this user object to the authentication method in Applozic:

Applozic.connectUser(this, user, new AlLoginHandler() {

   @Override

   public void onSuccess(RegistrationResponse registrationResponse, Context context) {

       // After successful registration with Applozic server the callback will come here

       Intent mainIntent = new Intent(context, MainActivity.class);

       context.startActivity(mainIntent);

       LoginActivity.this.finish();

   }

   @Override

   public void onFailure(RegistrationResponse registrationResponse, Exception exception) {

       // If any failure in registration the callback  will come here

       Toast.makeText(LoginActivity.this, "Error : " + registrationResponse, Toast.LENGTH_SHORT).show();

   }

});

This is how the Login Activity will look:

Applozic chatapp login activity

Step 5: Check if the user is already logged in

In your launcher activity(In this sample, MainActivity) you can check if the user is already logged into applozic, if the user is already logged in, launch the chat directly with a userId “test2” (You can use any userId), else we will navigate the user to the login activity.

In your launcher activity’s onCreate() method, add the below code:

if (Applozic.isConnected(this)) {

// This is the code to launch chat with a particular userId 

   Intent intent = new Intent(MainActivity.this, ConversationActivity.class);

   intent.putExtra("userId", "test2"); //change the userId here for other users

   intent.putExtra(ConversationUIService.DISPLAY_NAME, "Test User 2"); //This name will be displayed on the toolbar of the chat screen

   startActivity(intent);

   finish();

} else {

   Intent intent = new Intent(MainActivity.this, LoginActivity.class);

   startActivity(intent);

   finish();

}

This is how the launcher activity will look like:

Applozic launcher activity screenshot

Here’s How the chat window will look like:

And just like that, your chat app is up and running. You can run it as a standalone application or integrate it into your existing app. What you see as the UI is the default drop-in version and you can customize it completely. We will be covering the steps for customization and the integration in upcoming tutorials.

If you have any question, please drop in the comments. Also, let us know if you want us to cover any specific topics.

PS: I thank Sunil, Ashish, Mukesh, Satadeep from Applozic team for helping me with initial notes.

Author