Android Chat SDK built on Firebase
Clone or download
Latest commit 71ff948 Oct 25, 2018
Permalink
Failed to load latest commit information.
chat21 logout bug Oct 25, 2018
resources no message Nov 27, 2017
.gitignore no message Mar 9, 2018
LICENSE Create LICENSE Mar 9, 2018
README.md Update README.md Jul 27, 2018
build.gradle exported as dependency Feb 23, 2018
settings.gradle changed package Feb 23, 2018

README.md

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

get_it

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()
    }
}

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

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

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

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> 

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> 

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

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();

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

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

Deploy JCenter

Follow this guide to deploy your own library to JCenter