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()
}
}
/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.supportError:
* What went wrong: Execution failed for task ':app:processDebugResources'. > Failed to execute aaptSolution: 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 dexSolution: Make sure you have added
multiDexEnabled trueinside of /project/app/build.gradleCopy 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 overrideSolution: 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
31 Dec 13, 2022
0 Jan 30, 2022
0 Nov 25, 2022
10 Dec 15, 2022
3 Oct 27, 2022
30 Nov 16, 2022
1 Sep 6, 2022
16 Dec 14, 2021
10 Aug 31, 2022
976 Dec 29, 2022
648 Dec 23, 2022
424 Dec 9, 2022
219 Nov 25, 2022
17 Nov 12, 2021
1.8k Dec 30, 2022
62 Dec 18, 2022
3 Oct 26, 2021
6 Jan 8, 2022