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

Last updated
October 21, 2021
by
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.

Hiep Le

In this tutorial, we'll walk through how to build a Java voice and video chat app for Android using CometChat Android UI Kit and Firebase backend services.

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

Table of Contents

    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:

    Users

    1. A way for end-users to signup(email & password is sufficient)

    2. A way for users to log in and have a short profile (Name, UID, Photo, About)

    Chat

    1. Use our 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

    2. Login the logged-in user to CometChat

    3. 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.

    Step 4: Add the repository URL to the project level build.gradle file in the repositories block under the all projects section

    *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.

    Step 6: Sync the project.

    Configuring CometChat SDK

    1. Head to CometChat Dashboard and create an account.
    Register a new CometChat account if you do not have one
    Register a new CometChat account if you do not have one
    1. After registering a new account, you need to the log in to the CometChat dashboard.
    Log in to the CometChat Dashboard with your created account
    Log in to the CometChat Dashboard with your created account
    1. From the dashboard, add a new app called "voice-video-chat-app".

    .

    Create a new CometChat app
    Create a new CometChat app - Step 1
    Create a new CometChat app
    Create a new CometChat app - Step 2
    1. Select this newly added app from the list.
    Select you created app
    Select you created app
    1. From the Quick Start, copy the APP_ID, REGION, and AUTH_KEY, which will be used later.
    Copy the the APP_ID, REGION, and AUTH_KEY
    Copy the the APP_ID, REGION, and AUTH_KEY
    1. Navigate to the Users tab, and delete all the default users (very important).
    Navigate to Users tab and delete all the default users
    Navigate to Users tab and delete all the default users
    1. Navigate to the Groups tab and delete all the default groups (very important).
    Navigate to Group tab and delete all the default groups
    Navigate to Group tab and delete all the default groups
    1. Create a file called Constants.java in the package folder of your project.
    2. Import and inject your secret keys in the Constants.java file containing your CometChat and Firebase in this manner.


    1. 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 has to be used. 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.

    Firebase
    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.

    Firebase Authentication
    Firebase Authentication

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

    Enable Firebase Authentication with Email and Password
    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.

    Choose “Realtime Database” option
    Choose “Realtime Database” option
    Click on “Create Database"
    Click on “Create Database"
    Select location where you realtime database will be stored
    Select location where you realtime database will be stored
    Select “Start in test mode” for the learning purpose
    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.

    Database Url
    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.

    Update Firebase Realtime Database Rules
    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.

    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”.
    Enable Firebase Assistance - Step 1
    Enable Firebase Assistance - Step 1
    • Step 2: Open the assistance by click on the “Assistance” on the right of your Android Studio.
    Enable Firebase Assistance - Step 2
    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, Styling, and Themes for the App

    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

    Login Page
    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

    The Sign Up Page
    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:

    Folder Structure after Integrating CometChat Android UI Kit
    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).

    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.

    Your UI will look like the following image:

    Android CometChat UI Kit - UI
    Android CometChat UI Kit - UI


    Wrapping Up

    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.

    What to Read Next