DEV Community

Hiep Le for CometChat

Posted on • Originally published at cometchat.com

How to Build a Java Voice & Video Chat App for Android

What you’ll be building. Git Repo Here.

Popular tutorials

Introduction

App and web development have come a long way over the last few years. We use a lot of voice and video chat app every day, including Messenger, WhatsApp, Snapchat and so on. One of the most widely used features is voice and video chat. Using the CometChat Android UI Kit, Firebase backend services, you will learn how to build a voice and video chat app with minimal effort.

Follow along the steps to build a voice and video chat app that will allow users:

  1. Users
    • A way for end-users to signup(email & password is sufficient)
    • A way for users to log in and have a short profile (Name, UID, Photo, About)
  2. Chat
    • Use the Java UI Kit and configure it such that-
      • List of Users/Contacts is visible to all users with a search bar
      • All users can initiate voice & video calls with individuals and groups
      • Users can create/exit groups and add/remove other users
      • Group chat via text, voice, and video must be enabled for all users
    • Login the logged-in user to CometChat
    • Add API call when a user registers so that the user is created in CometChat

This tutorial will use Android, Firebase, CometChat Android UI Kit to build the voice and video chat app.

Prerequisites

To follow this tutorial, you must have a degree of understanding of the general use of Android. In this project, we will use Android Studio to build the Android app. This will help you to improve your understanding of this tutorial.

Installing the App Dependencies

  • Step 1: you need to have Java - JDK 8 and Android Studio installed on your machine
  • Step 2: create a new project with the name voice-video-chat-app by using Android Studio.
  • Step 3: Replace your dependencies inside build.gradle file (app level) with the following part.
implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'com.google.android.material:material:1.3.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
implementation 'com.google.firebase:firebase-auth:19.2.0'
implementation 'com.google.firebase:firebase-database:19.2.1'
implementation 'com.cometchat:pro-android-chat-sdk:3.0.1'
implementation 'com.cometchat:pro-android-calls-sdk:2.1.0'
Enter fullscreen mode Exit fullscreen mode
  • Step 4: Add the repository URL to the project level build.gradle file in the repositories block under the all projects section
allprojects {
  repositories {
    maven {
      url "https://dl.cloudsmith.io/public/cometchat/cometchat-pro-android/maven/"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

*Note: If you are using Android Studio Arctic Fox 2020.3.1, the repository URL should be included in the settings.gradle file not the build.gradle file (project level).

  • Step 5: Inside your build.gradle file (app level), please add the following section.
android {
  compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
  }
}
Enter fullscreen mode Exit fullscreen mode
  • Step 6: Sync the project.

Configuring CometChat SDK

Head to CometChat Dashboard and create an account.

Figure 1. Register a new CometChat account if you do not have one.

After registering a new account, you need to the log in to the CometChat dashboard.

Figure 2. Log in to the CometChat Dashboard with your created account.

From the dashboard, add a new app called "voice-video-chat-app".

Figure 3. Create a new CometChat app - Step 1.

Figure 4. Create a new CometChat app - Step 2.

Select this newly added app from the list.

Figure 5. Select you created app.

From the Quick Start copy the APP_ID, REGION, and AUTH_KEY, which will be used later.

Figure 6. Copy the the APP_ID, REGION, and AUTH_KEY

Navigate to the Users tab, and delete all the default users (very important).

Figure 7. Navigate to Users tab and delete all the default users

Navigate to the Groups tab and delete all the default groups (very important).

Figure 8. Navigate to Group tab and delete all the default groups.

Create a file called Constants.java in the package folder of your project.

Import and inject your secret keys in the .env file containing your CometChat and Firebase in this manner.

String COMETCHAT_APP_ID = xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx;
String COMETCHAT_REGION = xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx;
String COMETCHAT_AUTH_KEY = xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx;
String FIREBASE_REALTIME_DATABASE_URL = xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx;
String FIREBASE_EMAIL_KEY = "email"; // this is not a secreat value, it is just a constant variable that will be accessed from different places of the application.
String FIREBASE_USERS = "users"; // this is not a secreat value, it is just a constant variable that will be accessed from different places of the application.
Enter fullscreen mode Exit fullscreen mode

Make sure to include the Constants.java file in your gitIgnore file from being exposed online.

Setting Up Firebase Project

According to the requirements of the voice and video chat application, you need to let users create a new account and login to the application, Firebase will be used to achieve that. Head to Firebase to create a new project and activate the email and password authentication service. This is how you do it:
To begin using Firebase, you’ll need a Gmail account. Head over to Firebase and create a new project.

Figure 9. Firebase

Firebase provides support for authentication using different providers. For example, Social Auth, phone numbers, as well as the standard email and password method. Since you will be using the email and password authentication method in this tutorial, you need to enable this method for the project you created in Firebase, as it is by default disabled.
Under the authentication tab for your project, click the sign-in method and you should see a list of providers currently supported by Firebase.

Figure 10. Firebase Authentication.

Next, click the edit icon on the email/password provider and enable it.

Figure 11. Enable Firebase Authentication with Email and Password

Now, you need to go enable Firebase Realtime Database. We will Firebase Realtime Database to store the information of the users in the application. Please refer to the following part for more information.

Figure 12. Choose “Realtime Database” option.

Figure 13. Click on “Create Database".

Figure 14. Select location where you realtime database will be stored.

Figure 15. Select “Start in test mode” for the learning purpose.

Please follow the guidance from Firebase. After following all steps, you will see the database URL. If you just need to update the “FIREBASE_REALTIME_DATABASE_URL” variable in your “Constants.java” file with that value.

Figure 16. Database Url.

On the other hand, your Firebase real-time database will be expired in the future. To update the rules you just need to select the “Rules” tab and update the date/time in milliseconds as you can see in the image below.

Figure 17. Update Firebase Realtime Database Rules.

The below images demonstrate the data structure of the application. A user should have an avatar, an email, an id.

Figure 18. Data Structure - User

To set up Firebase for the Android app, we can use Firebase Assistance. You need to follow the below steps to enable Firebase Assistance inside your Android Studio.

  • Step 1: Click Tools and then choose “Firebase”.

Figure 19. Enable Firebase Assistance - Step 1

  • Step 2: Open the assistance by click on the “Assistance” on the right of your Android Studio.

Figure 20. Enable Firebase Assistance - Step 2

  • Step 3: You can expand “Authentication” part and “Realtime Database” part and follow the tutorials from Firebase Assistance. ## Configuring Strings and Styling, Themes for the Application

Inside our voice and video chat app project structure, you need to follow the below steps to create strings, styling and themes with the below steps, by doing this, we can save time and speed up the development process. We will focus on the business logic in the following section.

  • Copy the values from here and then paste to your “strings.xml” file.
  • Copy the values from here and then paste to your “colors.xml” file.
  • Copy the values from here and then paste to your “themes.xml” file. ## The Login Page

Figure 21. Login Page.

This component is responsible for authenticating our users using the Firebase google authentication service. It accepts the user credentials and either signs him up or in, depending on if he is new to our application. See the code below and observe how our app interacts with Firebase and the CometChat SDK.
The image describes that the user needs to input the email and password. To log in to the application, the user needs to click on the “Login” button. The application will validate the user’s credentials first and then call Firebase Authentication Service. If everything is fine, the application will also let the user log in to the CometChat as well. The details about those parts will be discussed in the following parts of this section.
The UI XML code can be found here and the code logic for the Login Activity can be found here. You can refer to the below code snippet for more information.

As mentioned above, if the user’s credentials are valid, we will call the Firebase Authentication service and the CometChat service. Moreover, we need to initialize CometChat in our application and we also call the “loginCometChat” function, this function will take responsibility for letting the user access the CometChat. You can refer to the below code snippet for more information.

According the the UI, the user can go to the sign up page to create a new account by clicking on the “Register” text. The sign up page will be discussed in the following section.

The Sign Up Page

Figure 22. The Sign Up Page.

According to the requirements, the application needs to provide a way to let the users create new accounts. For this reason, the sign-up page needs to be created to achieve that. From the login page, after the user clicks on the “Register” text, the user will be redirected to the sign-up page. As you can see on the beside image, the user needs to input some information to create a new account such as the user’s name, user’s email, user’s password, and confirm password.
The last but not least, to create a new account, the final step is to click on the “Register” button. After clicking the button, the application will register a new account by using the Firebase Authentication service, insert new user’s information to the Firebase Realtime Database and then register a new account on CometChat.
The UI XML code can be found here. And the code logic for the SignUpActivity can be found here. You can refer to the below code snippet for more information.

What we have done in the “SignUpActivity.java” will be similar to the “LoginActivity.java”. After the user inputs enough information and then clicks on the “Register” button, the “registerCometChatAccount” will be dispatched. You can refer to the below code snippet for more information.

The following section will demonstrate how to integrate CometChat Android UI Kit to achieve text chat, voice, and video calling features in our application.

Integrate CometChat Android UI Kit

To integrate CometChat Android UI Kit, you need to follow the below steps:

Figure 23. Folder Structure after Integrating CometChat Android UI Kit.

  • Step 1: Clone the UI kit from
    android-chat-ui-kit-repository.

  • Step 2: Import uikit Module from Module Settings.( To know how to import uikit as Module visit this link).

  • Step 3: Re-check your folder structure. If the library is added successfully it will look like mentioned in the beside image.

  • Step 4: Add the following parts to your build.gradle file (app level).

android {
  

  dataBinding {
  enabled = true

}

defaultConfig {
  ...
  manifestPlaceholders = [file_provider: "YOUR_PACKAGE_NAME"] 
  //add your application package.
  }
}
Enter fullscreen mode Exit fullscreen mode

After integrating CometChat Android UI Kit successfully, you need to use the following statement to open the CometChat UI Screen. CometChatUI is a way to launch a fully working chat application using the UI Kit .In UI Unified all the UI Screens and UI Components working together to give the full experience of a chat application with minimal coding effort.

startActivity(new Intent(YourActivity.this,CometChatUI.class))
Enter fullscreen mode Exit fullscreen mode

Your UI will look like the following image:

Figure 24. Android CometChat UI Kit - UI.

Conclusion

In conclusion, we have done an amazing job in developing a voice and video chat application by leveraging Android, Firebase, and CometChat. You’ve been introduced to the chemistry behind the voice and video chat application and how the CometChat Android UI Kit makes chat applications buildable.

You have seen how to integrate most of the CometChat functionalities such as texting and real-time messaging. I hope you enjoyed this tutorial and that you were able to successfully build the voice and video chat app. It's time to get busy and build other related applications with the skills you have gotten from this tutorial. You can start building your chat app for free by signing up to the cometchat dashboard here.

About the Author

Hiep Le is a software engineer. He takes a huge interest in building software products and is a full-time software engineer. Most of his work is focused on one thing - to help people learn.

Discussion (0)