Chat21 is the core of the open source live chat platform Tiledesk.com.

Chat21 SDK Documentation

Features

With Chat21 Android SDK you can:

• Send a direct message to a user (one to one message)
• Emoji support
• Attach pictures support
• Create group chat
• View the messages history
• View the group list
• The read receipts feature allows your users to see when a message has been sent, delivered and read
• Conversations list view with the last messages sent (like Whatsapp)
• With the Presense Manager you can view when a user is online or offline and the inactivity period
• View the user profile with fullname and email
• Login with email and password (Use firebase email and password authentication method )
• Signup with fullname, email, password and profile picture
• Contacts list view with fulltext search for fullname field

Sample

Screenshots

| |

|

Google Play Demo

Demo

Demo app source code is available here

Yo can build your own chat following our official tutorial

Pre requisites

Before you begin, you need a few things to set up in your environment:

• a Firebase project correctly configured
• Chat21 Firebase cloud functions installed. See detailed instructions
• google-services.json for you app. See official documentation

Firebase libs

/project/build.gradle

First, include the google-services plugin and the Google’s Maven repository to your root-level build.gradle file:

buildscript {
    // ...
    dependencies {
        // ...
        classpath 'com.google.gms:google-services:3.1.1'
    }
}

allprojects {
    // ...
    repositories {
        // ...
        google()
    }
}

build.gradle

/project/app/build.gradle

Then, in your module Gradle file (usually the app/build.gradle), add the apply plugin line at the bottom of the file to enable the Gradle plugin:

apply plugin: 'com.android.application'
// ...
dependencies {
    // ...
    implementation "com.google.android.gms:play-services:11.8.0"
}
// ... 
apply plugin: 'com.google.gms.google-services'

build.gradle

Install Chat21 libraries

Set:

• minimun SDK at least at API 19
• targetSdkVersion at API 22

Add the following to your app/build.gradle file:

defaultConfig {
// ...
multiDexEnabled true
}
dependencies {
// ...
compile 'com.android.support:multidex:1.0.1'
compile "com.google.android.gms:play-services:11.8.0"
compile 'com.android.support:design:26.1.0'

compile 'org.chat21.android:chat21:1.0.10'
compile 'com.vanniktech:emoji-ios:0.5.1'
}
// ...
configurations.all {
    resolutionStrategy.eachDependency { DependencyResolveDetails details ->
        def requested = details.requested
        if (requested.group == 'com.android.support') {
            if (!requested.name.startsWith("multidex")) {
                details.useVersion '26.1.0'
            }
        }
    }
}

build.gradle

Google Play Services plugin

Finally, as described in the documentation, paste this statement as the last line of the file:

apply plugin: 'com.google.gms.google-services'

At the end, you'll download a google-services.json file. For more informations refer to the relative documentation

Application

Create a custom Application class

public class AppContext extends Application {

@Override
protected void attachBaseContext(Context base) {
    super.attachBaseContext(base);
           MultiDex.install(this); // add this
    }
}

AppContext.java

and add it to the Manifest.xml

 <application
             android:name=".AppContext"
             android:icon="@mipmap/ic_launcher"
             android:label="@string/app_name"
             android:theme="@style/AppTheme"
             ...
</application> 

AndroidManifest.xml

Style

Replace the default parent theme in your styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

to

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

you will obtain something like :

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>
</style> 

styles.xml

Chat21 SDK initialization

ChatManager

The Chat21 SDK provide a Chat.Configuration object which allows to set some custom behaviour and settings for your chat.

To create a new instance of Chat21 SDK you have to create your own configuration (using the Chat21 SDK Chat.Configuration.Builder) and use it as paramater for the method Chat.initialize(configuration);

    // optional
    //enable persistence must be made before any other usage of FirebaseDatabase instance.
    FirebaseDatabase.getInstance().setPersistenceEnabled(true);

    // mandatory
    // it creates the chat configurations
    ChatManager.Configuration mChatConfiguration =
            new ChatManager.Configuration.Builder(<APP_ID>)
                    .firebaseUrl(<FIREBASE_DATABASE_URL>)
                    .storageBucket(<STORAGE_BUCKET>)
                    .build();
            
    ChatManager.start(<CONTEXT>, mChatConfiguration, <LOGGED_USER>);

Replace:

• <APP_ID> with your appId;
• <FIREBASE_URL> with your Firebae Database URL of your Firebase App;
• <STORAGE_BUCKET> with your Firebae Storage Bucket URL of your Firebase App;
• <CONTEXT> with your Context;
• <LOGGED_USER> with your current logged user, assuming it is an instance of IChatUser

AppContext.java

ChatUI

ChatUI allows you to quickly connect common UI elements to Chat21 SDK APIs.

ChatUI lets you start your chat with both an activity and a inside a fragment.

Initialize the ChatUI component with the following instruction

ChatUI.getInstance().setContext(this);

Launch with an activity

It starts a new activity that contains the list of conversations.

 ChatUI.getInstance().showConversationsListActivity();

Example.java

Launch with a fragment

You have to create a fragment with a container inside.

The chat will start inside this container where the list of conversations is shown.

<android.support.design.widget.CoordinatorLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.design.widget.CoordinatorLayout>

Now you can show your chat with the following method:

  ChatUI.getInstance().openConversationsListFragment(getChildFragmentManager(), R.id.container);

ChatFragment.java

Common Issues

• Conflicts within com.android.support

  Error:

  * What went wrong:
  Execution failed for task ':app:processDebugResources'.
  > Failed to execute aapt
  

  Solution: Copy this block at the bottom of your file /project/app/build.gradle

  configurations.all {
      resolutionStrategy.eachDependency { DependencyResolveDetails details ->
          def requested = details.requested
          if (requested.group == 'com.android.support') {
              if (!requested.name.startsWith("multidex")) {
                  details.useVersion '26.1.0'
              }
          }
      }
  }
  

• MultiDex

  Error:

  Error:Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForDebug'.
  > java.lang.RuntimeException: java.lang.RuntimeException: com.android.builder.dexing.DexArchiveMergerException: Unable to merge dex
  

  Solution: Make sure you have added multiDexEnabled true inside of /project/app/build.gradle

  Copy this block inside of your custom Application class

   @Override
   protected void attachBaseContext(Context base) {
     super.attachBaseContext(base);
     MultiDex.install(this);
   }
  

• Theme

  Error:

      RuntimeException: Unable to start activity ComponentInfo{my.sample.package.myapplication/chat21.android.ui.conversations.activities.ConversationListActivity}: java.lang.IllegalStateException:
      This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.
  

  Solution: See the Style section

• Application name exceptions:

  Error:

      /android/MyApp/app/src/main/AndroidManifest.xml:30:9 Error:
      Attribute application@label value=(@string/application_name) from AndroidManifest.xml:30:9
      is also present at {Library Name} value=(@string/app_name)
      Suggestion: add 'tools:replace="android:label"' to <application> element at AndroidManifest.xml:26:5 to override
  

  Solution: Add the tools:replace="android:label" to override the Chat21 SDK app name and default icon:

    ```
    <application
        android:name=".AppContext"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        tools:replace="android:label, android:icon"> <!-- add this -->
  
        . . .
  
    </application>
    ```
  

AndroidManifest.xml

Deploy JCenter

Follow this guide to deploy your own library to JCenter