Welcome to Chatly, a learning-focused Android chat application demonstrating modern best practices in app architecture, real-time communication, and cloud integration.
This project is designed for students, hobbyists, and anyone interested in understanding how to build a scalable chat app using MVVM, Firebase, Room, and popular open-source libraries.
Chatly is a modern Android chat app using:
- MVVM architecture
- Room for local database (offline support)
- Firebase Authentication for auth
- Firestore for user & message storage
- Cloudinary for profile photo uploads
- Glide for image loading
- MVVM Architecture: How to separate UI, business logic, and data layers for maintainable code.
- Firebase Authentication: Secure user login and registration.
- Cloud Firestore: Real-time storage and retrieval of user profiles and chat messages.
- Room Database: Implementing offline caching and local-first data access.
- Cloudinary Integration: Uploading and showing profile images from the cloud.
- Modern UI: Using Material Design, RecyclerView, custom views, and Glide for image loading.
- Asynchronous Programming: Using Kotlin coroutines, StateFlow, and LiveData for reactive updates.
- Clean Repository Pattern: Abstracting data sources for robust, testable code.
Chatly follows the MVVM (Model-View-ViewModel) architecture:
- UI Layer: Activities, RecyclerViews, Adapters, and custom views (e.g., TypingIndicatorView).
- ViewModel Layer: Holds UI state, business logic, and exposes reactive data (LiveData/Flow).
- Repository Layer: Manages data sources (local Room database and remote Firebase/Cloudinary).
- Model Layer: Data classes for users and messages.
- Local Database: Room for offline support and caching.
- Remote Services: Firebase Auth for authentication, Firestore for real-time data, Cloudinary for image upload.
flowchart TD
subgraph UI
A1(SplashScreenActivity)
A2(GreetingActivity)
A3(LoginActivity)
A4(RegisterActivity)
A5(MainActivity)
A6(ChatActivity)
A7(ProfileActivity)
A8(EditProfileActivity)
A9(UserDetailActivity)
end
subgraph ViewModel
VM1(AuthViewModel)
VM2(ProfileViewModel)
VM3(ChatViewModel)
end
subgraph Repository
R1(ProfileRepository)
R2(ChatRepository)
end
subgraph Local
L1(Room DB)
L2(UserDao)
L3(MessageDao)
end
subgraph Remote
F1(Firebase Auth)
F2(Firestore)
F3(Cloudinary)
end
%% UI to ViewModel
A3 --> VM1
A4 --> VM1
A5 --> VM2
A7 --> VM2
A8 --> VM2
A6 --> VM3
%% ViewModel to Repository
VM1 --> R1
VM2 --> R1
VM3 --> R2
%% Repository to Local/Remote
R1 --> L2
R1 --> F2
R2 --> L3
R2 --> F2
%% Room
L1 <--> L2
L1 <--> L3
%% Remote dependencies
R1 --> F1
R1 --> F3
VM1 --> F1
%% Extra: Image Loading
A5 -.->|Glide| A5
A6 -.->|Glide| A6
A7 -.->|Glide| A7
A8 -.->|Glide| A8
A9 -.->|Glide| A9
| Layer | Technology/Library | Purpose |
|---|---|---|
| UI | Android Activities | User interface |
| UI | RecyclerView, Adapters | List users/messages |
| UI | Glide | Image loading |
| UI | DataBinding/ViewBinding | View binding |
| Local DB | Room, DAO | Local caching (messages, users) |
| Auth | Firebase Auth | Login/Register/Logout |
| Remote DB | Firestore | User/message cloud storage |
| Image Upload | Cloudinary, OkHttp | Profile photo upload |
| MVVM | ViewModel, LiveData | State & business logic |
| Networking | OkHttp | Cloudinary upload |
- User types and sends a message in
ChatActivity. ChatViewModel.sendMessage()is called.ChatRepository.sendMessage():- Stores the message in Room for offline support.
- Sends the message to Firestore for cloud sync.
- Firestore triggers updates for other users/devices.
- UI observes Room for real-time updates.
- User/UserEntity: uid, email, displayName, mobile, photoUrl, dob, gender
- Message: id, messageId, senderId, receiverId, content, timestamp, isMine
- SplashScreenActivity: Logo animation, auth check, route to main/greeting.
- GreetingActivity: Welcome screen, go to login.
- LoginActivity/RegisterActivity: Auth forms, state via AuthViewModel.
- MainActivity: User list, launches chats, handles logout.
- ChatActivity: One-on-one chat, message send/receive, user detail.
- ProfileActivity/EditProfileActivity: Show/edit profile, Cloudinary upload.
- UserDetailActivity: Show other user info.
- TypingIndicatorView: Custom view for "is typing" status.
-
Firestore
/users/{userId}/messages/{messageId}
-
Room (local)
usertablemessagestable
-
Cloudinary
- Used to store profile images, save URL in Firestore.
- Add presence, typing, and read receipts using Firestore/Realtime Database.
- Secure data with Firebase Security Rules.
- Test offline/online sync thanks to Room + Firestore.
- Arrows show dependencies and data flow.
- Glide is used in multiple Activities for images.
- Repositories mediate between ViewModels and data sources (local/remote).
- Room ensures offline support, Firestore syncs real-time chat.
- Full Source Code: Readable, well-commented code suitable for self-study.
- Learning-Oriented Structure: Clear separation of concerns; easy to extend with new features (presence, typing, group chat, etc.).
- Offline-First Approach: See how Room and Firestore interact to provide a seamless experience.
- Profile Management: Edit, update, and upload profile images.
- Material Design: Learn how to craft beautiful and usable Android interfaces.
-
Clone the repository
git clone https://github.com/MohsinMuzamil/Chatly.git cd Chatly -
Open with Android Studio
-
Firebase Setup
- Add your
google-services.jsonto the/appdirectory. - Enable Authentication and Firestore in the Firebase Console.
- Add your
-
Cloudinary (Image Upload)
- Sign up at Cloudinary.
- Replace
cloud_nameandunsigned_presetin the code with your details.
-
Build and Run on an emulator or device.
- Kotlin, Android Jetpack (ViewModel, LiveData, Room)
- Firebase Authentication, Firestore
- Cloudinary (Image upload via OkHttp)
- Glide (Image loading)
- Coroutines & Flows (Async/reactive programming)
- Authentication required for all chat features.
- Firestore rules restrict access to own data/messages.
- Repository pattern for data abstraction.
- MVVM for a clean, maintainable codebase.
- Read the code, change it, break it, extend it!
- Try adding features like group chat, presence, push notifications, or dark mode.
- Pull requests and suggestions are welcome.
MIT License
Made with ❤️ by Mohsin Muzamil