Building an Android Chat App with CometChat UI Kit

Learn how to build and launch a real-time Android chat app quickly using CometChat’s UI Kits. This step-by-step tutorial covers integration, theme customization, and component tailoring to create a fully functional, personalized chat experience.

Haris Kumar

Building a full-featured chat application for Android from scratch presents numerous complex challenges that developers must overcome:

  • Setting up real-time infrastructure for message exchanges

  • Managing message delivery and storage

  • Implementing user authentication

  • Scaling for multiple users and heavy usage

  • Designing an intuitive and functional chat interface

  • Implementing push notifications

CometChat's Android UI Kit simplifies this process by providing pre-built, customizable chat components that handle these complexities while giving developers the flexibility to create a unique chat experience that aligns with their app's requirements.

To illustrate how CometChat accelerates your Android chat development process, here's a detailed comparison between building a chat app using traditional methods versus leveraging CometChat:

Feature/ComponentDIY ApproachWith CometChat
Setup Time
3-4 weeks for basic features
2-3 days for full implementation
Backend Infrastructure
Build and maintain custom servers, databases, and WebSocket connections. Handle data synchronization across devices.
Fully managed by CometChat. Scalable infrastructure with automatic synchronization.
Real-time Communication
Implement complex WebSocket handling, connection management.
Built into SDK with automatic handling of Android lifecycle events and background states
User Management
Create user systems, implement presence tracking, manage token-based authentication
Pre-built user management system with presence handling and secure authentication
Message Delivery
Build queuing systems, implement retry logic, handle offline messages, manage Android service limitations
Automatic with guaranteed delivery and offline support
Media Handling
Implement file compression, handle Android storage permissions, manage upload/download states
Built-in media handling with automatic permission management and efficient caching
Push Notifications
Set up FCM, handle token management, implement notification channels, manage background/foreground states
Ready-to-use FCM integration with customizable notification settings
Security
Implement encryption, manage secure storage, handle Android keystore
Enterprise-grade security with automatic encryption handling
UI Components
Build custom Android layouts, implement Material Design, handle different screen sizes
Pre-built, customizable Material Design components
Performance
Handle memory management, implement efficient recycling, optimize battery usage
Optimized components with automatic memory management

In this tutorial, we'll build a feature-rich Android chat application that includes:

  • One-on-one and group messaging 

  • Rich media sharing 

  • Message threads and reactions

  • Real-time presence and typing indicators

  • Push notifications using Firebase Cloud Messaging (FCM)

  • Customizable UI components

Prerequisites

Before starting this tutorial, make sure you have:

  • Android Studio installed (latest version)

  • Basic knowledge of Android development with Kotlin

  • Firebase project set up for push notifications

  • Android device or emulator with Android version 6.0 or above

  • Android 5.0 (API level 21) or higher

  • Java 8 or higher

  • Android Gradle plugin 4.0.1 or higher

  • CometChat account (free plan available)

Getting Started

Step 1. Create new android project

First, create a new Android project:

  • Open Android Studio

  • Select "Create New Project"

  • Choose "Empty Activity"

  • Set application name as "AndroidChatApp"

  • Select minimum SDK level (API 21 or higher)

  • Choose Kotlin as the programming language

Step 2. Configure dependencies

Open your project-level settings.gradle file and add:

In your app-level build.gradle, configure CometChat credentials and add dependencies:

To obtain your CometChat app credentials, follow these steps:

  • Sign Up for a CometChat Account from here.

  • Once signed in, go to your dashboard and create a new app.

  • After creating the app, locate and copy the following credentials: App ID, Auth Key and Region.

Update your gradle.properties:

Step 3. Configure android manifest

Open AndroidManifest.xml and add the required permissions:

Basic permissions (Required):
  • INTERNET: For chat communication

  • ACCESS_NETWORK_STATE: For network connectivity monitoring

Media permissions (Optional):
  • Storage permissions for handling media files.

  • Camera and audio permissions for media capture

  • New Android 13+ media permissions for granular access

Step 4. Initialize CometChat

Create an Application class for proper initialization:

Step 5. Add the application class to your manifest

Building the chat app interface 

1. User login and authentication flow 

Before diving into building the chat interface, we'll create a login component that authenticates users with CometChat using their unique User ID. We'll create a login component that:

  • Accepts a User ID input from the user

  • Authenticates the User ID against CometChat's backend

  • Handles loading states and error messages

  • Establishes a user session upon successful login

Step 1: Create the Login Activity

First, we'll create the login activity that will handle user authentication. This activity will:

  • Check for existing sessions

  • Handle user input

  • Manage the authentication process

  • Navigate to the chat interface upon successful login

Step 2: Designing the Login Screen

Next, we'll create a clean, simple login interface. The layout includes:

  • A text field for the user ID

  • A login button

  • Loading and error indicators to keep users informed of what's happening

 Step 3: Update the Application Class

To handle user sessions effectively, we'll update our Application class to:

  • Initialize CometChat when the app starts

  • Track authentication state

  • Provide logout functionality

Finally, we'll update the manifest to make the login screen our app's entry point. This ensures users see the login screen first unless they're already authenticated

Step 4: Configuring Build Settings

Before we can use CometChat's authentication features and ViewBinding, we need to update our build configuration. These settings enable:

  • View binding for easier UI handling

  • BuildConfig fields for secure credential storage

  • Kotlin optimizations for better performance

2. Building the Chat Interface

After successfully implementing user authentication, we'll now create the main chat interface where users can view conversations and exchange messages. This section demonstrates how to integrate CometChat's UI components into your Android app.

For messaging-focused apps like WhatsApp or Telegram, this interface serves as the main screen where users land after logging in. For apps where chat is a supplementary feature, it functions as the messaging inbox.

The chat interface consists of two primary components:

  • Conversation List: Shows recent chats and their latest messages

  • Message screen: Provides the messaging interface with features like: Message composition and sending, Real-time message delivery, Read receipts, Typing indicators, Media sharing

To simplify development, we'll use the CometChatConversationsWithMessages component from CometChat's Android UI Kit. This component offers a complete chat interface with all essential features through a single implementation.

Understanding CometChatConversationsWithMessages

The CometChatConversationsWithMessages component is a powerful, all-in-one solution that combines everything you need for a full-featured chat interface. This single component includes:

1. Conversation Management

  • Complete conversation list

  • Real-time updates for new messages

  • Unread message indicators

  • Last message previews

  • Timestamp displays

  • Automatic conversation sorting

2. Messaging Interface

  • Message composition and sending

  • Rich media messaging (images, videos, files)

  • Message reactions

  • Message threads and replies

  • Link previews

  • @mentions support

  • Real-time message delivery

  • Read receipts

  • Typing indicators

3. User Presence Features

  • Online/offline status

  • Last seen timestamps

  • Typing indicators

  • Read receipts

  • User avatars

All these features come pre-built and require no additional configuration. Let's implement this comprehensive chat interface:

Implementing the Chat Interface

First, let's create the layout for our main chat screen:

Next, implement the MainActivity that will host our chat interface:

This implementation follows a straightforward flow:

  • When MainActivity launches, it verifies the user's authentication status

  • For authenticated users: Displays the chat interface with conversations and messages. Automatically handles real-time message updates.

  • For unauthenticated users: Redirects to the login screen and prevents access to chat functionality

Adding advanced functionalities on top of the existing features

1. Setting up notifications

Now that your chat functionality is up and running, it's time to enable notifications so users never miss a message. CometChat’s Notifications module allows you to set up and manage notifications across multiple providers directly from the dashboard, ensuring centralized control and effortless configuration. You can easily integrate push notifications with APNs and FCM, email notifications with SendGrid, and SMS alerts with Twilio, or use webhooks to connect with any provider of your choice.

You can also enable notification preferences for your users, allowing them to customize when and how they receive notifications. Additionally, our customizable templates let you tailor notifications to your app’s tone and branding.

 2. Setting up advanced moderation

Next, we’ll explore CometChat’s powerful moderation capabilities, which you can enable using the CometChat SDK. These features are designed to help maintain a safe, respectful environment for users and allow you to moderate content in real time.

Front-end moderation

  • User reporting: Empower your users to report inappropriate behavior or content directly from the chat interface.

  • User blocking: Allow users to block others, preventing unwanted interactions.

  • Message flagging: Enables users to flag specific messages for review by administrators.

Moderation queue:

Use our centralized moderation dashboard to give app admins an organized view of flagged messages, reported users, and blocked content. From this dashboard, admins can take real-time action on flagged content, issue user bans or warnings, and escalate issues for higher-level review, all in one place.

Proactive content moderation:

Use our advanced AI filters to prevent harmful content from entering your chat. These filters automatically screen every message exchanged in your app for violations defined by you and take action based on the moderation rules you’ve set up with our rules engine.

CometChat’s rules engine lets you create custom rules to address common moderation scenarios. You can define which filters to use for identifying violations and specify how to handle them, such as blocking a user or removing them from a group. This helps you keep your app free from:

  • Spam: Block unwanted or malicious content.

  • Harassment: Automatically filter harmful messages or behavior.

  • Image and Video Moderation: Analyze and filter media content to ensure it follows guidelines

3. Using Webhooks to extend your chat app's functionality

Leverage webhooks to trigger actions based on key events like message exchanges, user interactions, group changes, and call activities. You can use them to automate tasks, integrate with external services, and optimize the chat experience in your app. You can configure these webhooks directly from the CometChat dashboard.

Here’s a list of available webhooks:

CategoryWebhook Event
Message
Message Sent, Edited, Deleted, Reacted, Mentioned, Delivered, Read
User
User Blocked, Unblocked, Connection Status Changed
Group
Group Created, Member Added, Member Left, Group Owner Changed, Member Kicked
Calling
Call Started, Call Ended, Call Initiated, Participant Joined, Participant Left, Call Recording Generated

Customizing your android chat app : Theme, fonts and component appearance

After implementing the chat interface, you might want to customize its appearance to match your app's design. CometChat's UI Kit provides simple ways to customize the look and feel through its theming system.

1. Theme-level Customization

CometChat's theme system consists of two main components:

  • Palette: Controls colors throughout the app

  • Typography: Manages text styles

Color customization

You can easily customize the color scheme using the Palette class:

  • Set primary color for main elements

  • Set accent color for interactive elements

  • Test in both light and dark modes

Text style customization

The typography class gives you full control over your app's text appearance.

  • Choose fonts that complement your app's identity.

  • Define bold, medium, and regular weights for emphasis.

  • Customize titles, subtitles, and captions for clear hierarchy and readability.

2. Component-level customisation

In addition to theme customization, CometChat allows for in-depth customization of individual components within its UI Kits. This enables you to tailor the appearance and behavior of specific elements to suit your application’s needs.

In this section, we'll focus on customizing two essential components that form the backbone of our chat interface: the Conversations and Messages components. We'll explore the various customization options available for these components, demonstrate how to implement them effectively, and walk through the different parameters you can modify to create a tailored chat experience.

Conversations component customisation

The Conversations component displays all conversations related to the currently logged-in user. To ensure the component aligns with your app's design and branding, you can easily customize its appearance by adjusting the properties exposed by the ConversationsStyle class. Below, you'll find a table outlining all the properties you can modify to tailor the component to your specific needs.

CategoryCustomizable ElementsDescription
Layout & Appearance
List Item View
Height, width, background colors, hover states
Layout & Appearance
Avatar Display
Shape, size, border radius, default icons
Layout & Appearance
Status Indicators
Size, color, position, visibility
Content Display
Conversation Title
Font style, size, color, formatting
Content Display
Last Message Preview
Length, style, condensed view options
Content Display
Timestamps
Format, position, localization
Interactive Elements
Search Bar
Visibility, placeholder text, icon customization
Interactive Elements
Selection Mode
Single/multi select, selection indicators
Interactive Elements
Empty States
Custom messages, actions, layouts

For more advanced customization, you can define custom views within the Conversations component. This allows you to fully control and tailor each element of the interface, such as layouts, views, and UI elements, ensuring that the component perfectly matches your app's overall aesthetics and functionality. .

Messages component customization 

The Messages component is a central feature of our chat interface, responsible for rendering the area where messages are exchanged between users and groups. It plays a key role in managing the real-time flow of messages within the app. Below, you'll find a table outlining all the properties you can modify to tailor the messages component to your specific needs

CategoryCustomizable ElementsDescription
Message Bubbles
Layout
Size, shape, padding, margins
Message Bubbles
Styling
Colors, borders, shadows
Message Bubbles
Alignment
Left/right positioning, spacing
Message Types
Text Messages
Font styles, sizes, colors
Message Types
Media Messages
Preview size, player controls
Message Types
Link Previews
Size, layout, information display
Interactive Features
Reactions
Position, size, layout
Interactive Features
Thread Replies
Thread view, indicators
Interactive Features
Message Actions
Custom actions, menus
Metadata Display
Timestamps
Format, position
Metadata Display
Read Receipts
Style, position, indicators
Metadata Display
Typing Indicators
Animation, position

Testing and deploying Your Chat App

Now that you've built your Android chat app with CometChat, let's ensure everything works correctly before deployment.

Testing user authentication

Testing Chat Functionality

To test your chat implementation:

  • Login with "cometchat-uid-1" on one device

  • Login with "cometchat-uid-2" on another device/emulator

Test chat features between these users:

  • Send and receive messages

  • Verify real-time delivery

  • Check conversation updates

  • Test media sharing if implemented

Pre-deployment Checklist and Deployment

Configuration Verification

Release Configuration

Add to your app-level  build.gradle

Verify essential permissions

Verify AndroidManifest.xml:

Deploy the app


Haris Kumar

Lead Content Strategist , CometChat

Haris brings nearly half a decade of expertise in B2B SaaS content marketing, where he excels at developing strategic content that drives engagement and supports business growth. His deep understanding of the SaaS landscape allows him to craft compelling narratives that resonate with target audiences. Outside of his professional pursuits, Haris enjoys reading, trying out new dishes and watching new movies!