How to build Android Chat App with Firebase for 2 hours?
12 likes12,761 views
The document provides a detailed guide on building an Android chat application using Firebase, highlighting the steps needed to set up the environment, implement the application features, and manage user authentication. Key areas covered include Firebase installation, database interactions, and UI setup in Android Studio. The author, Nguyen Ba Thanh, shares their expertise as a mobile app/game developer and outlines the knowledge attendees will gain from the workshop.
![Lecture Structure
1. Firebase Introduction
2. Demo ChatApp
3. [Key Notes] Firebase technical for ChatApp
4. [Guide] Step by step to build ChatApp with Firebase
thanhnotes.com](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-3-320.jpg)
![4. [Key Notes] Firebase technical
1. Create an account
2. Install Firebase
3. Add Android permission
4. Setup Firebase on Android
5. Read/Write to Firebase Database
6. Authenticate users
7. Secure data
thanhnotes.com](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-8-320.jpg)
![4. [Key Notes] Firebase technical
1. Create an account
2. Install Firebase
3. Add Android permission
4. Setup Firebase on Android
5. Read/Write to Firebase Database
6. Authenticate users
7. Secure data
thanhnotes.com
Link to registry: https://www.firebase.com/signup/](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-9-320.jpg)
![4. [Key Notes] Firebase technical
1. Create an account
2. Install Firebase
3. Add Android permission
4. Setup Firebase on Android
5. Read/Write to Firebase Database
6. Authenticate users
7. Secure data
thanhnotes.com
Download Firebase SDK: edit build.gradle & rebuild](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-10-320.jpg)
![4. [Key Notes] Firebase technical
1. Create an account
2. Install Firebase
3. Add Android permission
4. Setup Firebase on Android
5. Read/Write to Firebase Database
6. Authenticate users
7. Secure data
thanhnotes.com
Add permission INTERNET to AndroidManifest.xml](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-11-320.jpg)
![4. [Key Notes] Firebase technical
1. Create an account
2. Install Firebase
3. Add Android permission
4. Setup Firebase on Android
5. Read/Write to Firebase Database
6. Authenticate users
7. Secure data
thanhnotes.com
Add to your activity (in this case, it’s
MainActivity.java)](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-12-320.jpg)
![4. [Key Notes] Firebase technical
1. Create an account
2. Install Firebase
3. Add Android permission
4. Setup Firebase on Android
5. Read/Write to Firebase Database
6. Authenticate users
7. Secure data
thanhnotes.com
5.1. Create a reference to Firebase database
5.2. Write data
5.3. Read data](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-13-320.jpg)
![4. [Key Notes] Firebase technical
1. Create an account
2. Install Firebase
3. Add Android permission
4. Setup Firebase on Android
5. Read/Write to Firebase Database
6. Authenticate users
7. Secure data
thanhnotes.com
1. Choose the Login & Auth tab.
2. Select the Email & Password tab and enable
authentication.](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-14-320.jpg)
![4. [Key Notes] Firebase technical
1. Create an account
2. Install Firebase
3. Add Android permission
4. Setup Firebase on Android
5. Read/Write to Firebase Database
6. Authenticate users
7. Secure data
thanhnotes.com](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-15-320.jpg)
![5. [Guide] Build ChatApp Firebase
Prepare:
Download and extract files to your computer:
http://bit.ly/chatappvtc
thanhnotes.com](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-16-320.jpg)
![5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
thanhnotes.com](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-17-320.jpg)
![5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by
Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
1. Launch Android Studio
2. File -> New -> New Project
3. Fill infomation of project and finish
4. Try to run on simulator or real device
thanhnotes.com](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-18-320.jpg)
![5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Add this code to build.gradle (app) and rebuild project to download Firebase SDK
dependencies {
compile 'com.firebase:firebase-client-android:2.5.1+’
}
//You can copy this codes in file step2.txt
thanhnotes.com](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-19-320.jpg)
![5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Add more this code to AndroidManifests.xml file (code in file step3.txt)
thanhnotes.com](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-20-320.jpg)
![5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Copy 3 file xml in folder “ShareResource/layout” to your layout
folder of your project and fill code to MainActivity.java as
step4.txt
thanhnotes.com](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-21-320.jpg)
![5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get
data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Copy 2 classes: FirebaseListAdapter.java and Message.java into
your project (app/java/vtc.edu.vn.vtcchatapp/)
thanhnotes.com](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-22-320.jpg)
![5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Copy this code to your MainActivity.java
Firebase.setAndroidContext(this);
thanhnotes.com
(refer code in step6.txt)](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-23-320.jpg)
![5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Step 7.1. Define variables in MainActivity.java
Step 7.2. Add below code to MainActivity.java
thanhnotes.com](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-24-320.jpg)
![5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Copy code in file step8.txt to mLoginButton.setOnClickListener
thanhnotes.com](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-25-320.jpg)
![5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Step 9.1. Define variable FirebaseListAdapter
Step 9.2. Get messages to adapter and display to listview
Copy code in step9.txt
thanhnotes.com](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-26-320.jpg)
![5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Add code in step10.txt to mSend.setOnClickListener
thanhnotes.com](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-27-320.jpg)
![5. [Guide] Build ChatApp Firebase
Step 1. Create ChatApp by Anroid Studio
Step 2. Install Firebase
Step 3. Add Android permission
Step 4. Create UI & implement
Step 5. Prepare classes to get data
Step 6. Setup Firebase
Step 7. Connect database
Step 8. Login with Firebase
Step 9. Get messages to listview
Step 10. Send message
Final: Run
thanhnotes.com](https://image.slidesharecdn.com/androidchatappfirebasepresentation-160324020516/85/How-to-build-Android-Chat-App-with-Firebase-for-2-hours-28-320.jpg)
How to build Android Chat App with Firebase for 2 hours?
- 2. Nguyen Ba Thanh u Mobile App/Game Expert u CoFounder & CEO WePlay u Products u TOP 50 BlueBirdAward 2015 u “Bat Chu” – 10M Downloads 2015 u “Lich Van Nien” – 5M Downloads 2015 - Leading the Viet calendar mobile market for now thanhnotes.com NGUYEN BA THANH fb.com/thanhnb1101 thanhnotes.com [email protected] 0975.705.669
- 3. Lecture Structure 1. Firebase Introduction 2. Demo ChatApp 3. [Key Notes] Firebase technical for ChatApp 4. [Guide] Step by step to build ChatApp with Firebase thanhnotes.com
- 4. 1. 3 key values you will get? 3 key values you will get? 1. Knowledge Firebase basic 2. Know-how to create app on Android Studio 3. Know-how to create Android ChatApp with Firebase for million users thanhnotes.com
- 5. 2. Firebase Introduction u A powerful platform for your mobile or web application u Build cross-platform native mobile/web apps with Android, iOS, and JavaScript SDKs thanhnotes.com
- 6. 2. Firebase Introduction thanhnotes.com
- 7. 3. Demo ChatApp u Demo ChatApp thanhnotes.com
- 8. 4. [Key Notes] Firebase technical 1. Create an account 2. Install Firebase 3. Add Android permission 4. Setup Firebase on Android 5. Read/Write to Firebase Database 6. Authenticate users 7. Secure data thanhnotes.com
- 9. 4. [Key Notes] Firebase technical 1. Create an account 2. Install Firebase 3. Add Android permission 4. Setup Firebase on Android 5. Read/Write to Firebase Database 6. Authenticate users 7. Secure data thanhnotes.com Link to registry: https://www.firebase.com/signup/
- 10. 4. [Key Notes] Firebase technical 1. Create an account 2. Install Firebase 3. Add Android permission 4. Setup Firebase on Android 5. Read/Write to Firebase Database 6. Authenticate users 7. Secure data thanhnotes.com Download Firebase SDK: edit build.gradle & rebuild
- 11. 4. [Key Notes] Firebase technical 1. Create an account 2. Install Firebase 3. Add Android permission 4. Setup Firebase on Android 5. Read/Write to Firebase Database 6. Authenticate users 7. Secure data thanhnotes.com Add permission INTERNET to AndroidManifest.xml
- 12. 4. [Key Notes] Firebase technical 1. Create an account 2. Install Firebase 3. Add Android permission 4. Setup Firebase on Android 5. Read/Write to Firebase Database 6. Authenticate users 7. Secure data thanhnotes.com Add to your activity (in this case, it’s MainActivity.java)
- 13. 4. [Key Notes] Firebase technical 1. Create an account 2. Install Firebase 3. Add Android permission 4. Setup Firebase on Android 5. Read/Write to Firebase Database 6. Authenticate users 7. Secure data thanhnotes.com 5.1. Create a reference to Firebase database 5.2. Write data 5.3. Read data
- 14. 4. [Key Notes] Firebase technical 1. Create an account 2. Install Firebase 3. Add Android permission 4. Setup Firebase on Android 5. Read/Write to Firebase Database 6. Authenticate users 7. Secure data thanhnotes.com 1. Choose the Login & Auth tab. 2. Select the Email & Password tab and enable authentication.
- 15. 4. [Key Notes] Firebase technical 1. Create an account 2. Install Firebase 3. Add Android permission 4. Setup Firebase on Android 5. Read/Write to Firebase Database 6. Authenticate users 7. Secure data thanhnotes.com
- 16. 5. [Guide] Build ChatApp Firebase Prepare: Download and extract files to your computer: http://bit.ly/chatappvtc thanhnotes.com
- 17. 5. [Guide] Build ChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message thanhnotes.com
- 18. 5. [Guide] Build ChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message 1. Launch Android Studio 2. File -> New -> New Project 3. Fill infomation of project and finish 4. Try to run on simulator or real device thanhnotes.com
- 19. 5. [Guide] Build ChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Add this code to build.gradle (app) and rebuild project to download Firebase SDK dependencies { compile 'com.firebase:firebase-client-android:2.5.1+’ } //You can copy this codes in file step2.txt thanhnotes.com
- 20. 5. [Guide] Build ChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Add more this code to AndroidManifests.xml file (code in file step3.txt) thanhnotes.com
- 21. 5. [Guide] Build ChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Copy 3 file xml in folder “ShareResource/layout” to your layout folder of your project and fill code to MainActivity.java as step4.txt thanhnotes.com
- 22. 5. [Guide] Build ChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Copy 2 classes: FirebaseListAdapter.java and Message.java into your project (app/java/vtc.edu.vn.vtcchatapp/) thanhnotes.com
- 23. 5. [Guide] Build ChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Copy this code to your MainActivity.java Firebase.setAndroidContext(this); thanhnotes.com (refer code in step6.txt)
- 24. 5. [Guide] Build ChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Step 7.1. Define variables in MainActivity.java Step 7.2. Add below code to MainActivity.java thanhnotes.com
- 25. 5. [Guide] Build ChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Copy code in file step8.txt to mLoginButton.setOnClickListener thanhnotes.com
- 26. 5. [Guide] Build ChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Step 9.1. Define variable FirebaseListAdapter Step 9.2. Get messages to adapter and display to listview Copy code in step9.txt thanhnotes.com
- 27. 5. [Guide] Build ChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Add code in step10.txt to mSend.setOnClickListener thanhnotes.com
- 28. 5. [Guide] Build ChatApp Firebase Step 1. Create ChatApp by Anroid Studio Step 2. Install Firebase Step 3. Add Android permission Step 4. Create UI & implement Step 5. Prepare classes to get data Step 6. Setup Firebase Step 7. Connect database Step 8. Login with Firebase Step 9. Get messages to listview Step 10. Send message Final: Run thanhnotes.com