Real Time Chat Application with Kotlin and Firebase
In this tutorial, we will create a simple real time messaging application.
Start by creating a new Android Studio project (make sure to check “Include Kotlin support”).
I am using Android Studio 3.0 Beta 2.
Next we will need to go to https://console.firebase.google.com and create a new project.
Once the project is created, we’ll register our Android application inside the newly created Firebase project. Click “Add Firebase to your Android app” in the console.
Enter the package and app nickname in the new window and hit “Register App.” It will give you the option to download a google-services.json file, which you will want to put in your project’s root directory.
Once the google-services.json is in your project’s root folder, let’s run our new project. If all went well, you should see the classic ‘Hello World’ on your emulator or phone screen.
Great! We have our integration with Firebase done, now we can start writing code. Let’s create an EditText at the bottom of MainActivity where users will be able to enter text. We will also include a RecyclerView above to display messages. Something like this will get the job done for us: https://gist.github.com/JosephRoskopfOPI/6c96f171c903011496355ad0547d9944
Once in your activity_main.xml, your MainActivity should look something like:
Changing Firebase Rules
A note about Firebase authentication before we continue. By default, Firebase has a ‘Rules’ tab under the Realtime Database section containing rules about who can write and read from your database. By default, Firebase requires some kind of authentication. In the interest of this tutorial, we will change the rules so anyone can read and write from the database. However, this is not advised in a real world scenario.
Writing Messages to Firebase
We will work on writing messages to Firebase first, and then displaying after. The basic steps for sending the data to Firebase will be:
1. Create a Message class to hold our data: (https://gist.github.com/JosephRoskopfOPI/593b6c37d2a717542db784ea54ec5bc5)
2. Implement onClick for ImageView with ID: mainActivitySendButton as defined in activity_main.xml (with basic text validation)
3. Write to Firebase: (https://gist.github.com/JosephRoskopfOPI/2bd686efb04c95cd941fec94a5c2226e)
If all went well, you will start seeing your data displayed in Firebase!
Reading and Display Data from Firebase
Now that we’ve successfully written data to Firebase, let’s read it and display it in a RecyclerView with these steps:
1. Create listeners at the location we are writing our messages to monitor data changes and process the data returned from Firebase: https://gist.github.com/JosephRoskopfOPI/8802d952833cf7d80a2f80585fb16416
2. Create and setup an adapter for our RecyclerView: https://gist.github.com/JosephRoskopfOPI/db4d02bbc2f132062cd5badadf00b474
3. Display data in the RecyclerView: https://gist.github.com/JosephRoskopfOPI/5a270125680c1e4732102028358267fe
That is it! You can now send and receive messages on two separate devices and see them appear in real time. This is a very basic example of a messaging app, so there may be additional considerations needed when designing your own. For example, you can place a more efficient structure in Firebase to handle scaling and removing data to ensure the database doesn’t grow infinitely large. You may also want to consider adding an indicator so another user knows when you’re typing.
Final source code can be found here for any further clarification: https://github.com/j-roskopf/Chat