Simple Android Chat App Tutorial with Firebase Integration

Cover0-e1428536616935

Welcome to the Simple Android Chat App Tutorial with Firebase Integration tutorial which will take you on a step by step guide on how to create your very own chat app with a back end that integrates to Firebase.

Before you get started

  1. First download the free Chatt Android app coursework template project from our website here
  2. If you don’t have Android Studio you’ll need to download and install that it, grab it free here
  3. Sign up to Firebase account here

Setting up your app in the Firebase Console

Once you have logged into your Firebase console you will need to create a new project using the create new project wizard by selecting the “CREATE NEW PROJECT” button.

CropperCapture[3]

Once your project is created you will be presented with the following console window,  Select the “Add Firebase to your Android app” menu item.

CropperCapture[4]

You will be prompted to provide your app’s package name for the sample project please enter, com.chatt.demo in the Package name field. Now select the “ADD APP” button.

CropperCapture[6]

You will notice that when you select the “ADD APP” button a file called google-services.json will automatically get downloaded. To allow you application to use the Firebase services you will need to add this file to your project as illustrated in the image below.

CropperCapture[10]

 

To add the SDK to your project you will need to add the following items to your dependencies section in the  build.gradle file located in the root of your project

classpath 'com.google.gms:google-services:3.0.0'

The resulting dependencies section should look at follows.

dependencies {
classpath 'com.android.tools.build:gradle:2.1.3'
classpath 'com.google.gms:google-services:3.0.0'
}

You will also need to add the following items to your dependencies section in the  build.gradle file located in the  app/ folder

compile 'com.google.firebase:firebase-database:9.0.0'
compile 'com.google.firebase:firebase-auth:9.0.0'
compile 'com.google.firebase:firebase-messaging:9.0.0'

The resulting dependencies section should look at follows.

dependencies {
compile 'com.android.support:support-v4:19.1.0'
compile 'com.google.firebase:firebase-database:9.0.0'
compile 'com.google.firebase:firebase-auth:9.0.0'
compile 'com.google.firebase:firebase-messaging:9.0.0'
}

Finally add the following towards the end of you build.gradle file

apply plugin: 'com.google.gms.google-services'

You should notice a notice popup on top of you editor window that looks something

like the following, once you have completed the editing select the “Sync Now” link refresh the build configuration.

CropperCapture[11]

Setting up your app database using the Firebase Console

To support our application we will need a place to store our users and there associated messages, in the project files you will find a firebase_db.json In the console select Database from the left menu, once the database tab opens select the … menu on the right a select “Import JSON”.

CropperCapture[12]

When prompted select “BROWSE” and select the firebase_db.json file included in the project files. Now select “IMPORT”

CropperCapture[13]

Once the import completes successfully your new database should look something like the below image. There is two structures in our database one for messages and one for users.

CropperCapture[14]

Setting up your app authentication using the Firebase Console

From the left menu of your console select Auth and Select the “SIGN-IN METHOD” tab,

CropperCapture[1]

In the Provider list select Email/Password and Select the Enable radio button, then click “SAVE”

Adding code to allow for registration

Finally we are through the setup and we can get down to coding, our first task is to setup the registration form to use the FireAuth and FireDatabase to allow for users registering with your application.

In the class com.chatt.demo.Register we need to handle the onClick event, the first thing we need to do is register our user to the FirebaseAuth module using the Firebase singleton of the same name.

FirebaseAuth.getInstance().createUserWithEmailAndPassword(email, password)

We provide the email address and password the user enters to the createUserWithEmailAndPassword, upon success we set the user profile properties by issuing a call to the updateProfile method.

final FirebaseUser user = task.getResult().getUser();
UserProfileChangeRequest profileUpdates = new UserProfileChangeRequest.Builder()
.setDisplayName(displayName)
.setPhotoUri(Uri.parse("https://example.com/jane-q-user/profile.jpg"))
.build();
user.updateProfile(profileUpdates)

Once the profile is updated we create the associated Users in our users collection

UserList.user = new ChatUser(user.getUid(),displayName, email,true,defaultRoom);
FirebaseDatabase.getInstance().getReference("users").child(user.getUid()).setValue(UserList.user);

Adding code to allow for user login

Now that we can successfully register new users we are going to hook the com.chatt.demo.Login class to allow us to authenticate.

FirebaseAuth.getInstance().signInWithEmailAndPassword(user, password)

This is done by calling the signInWithEmailAndPassword method on the FirebaseAuth sigleton.

Adding code to List Users in our app

Once authenticated our next step is to get a list of all users from our databaseWe will need to add code in the com.chatt.demo.UserList, we will start by initializing our database variable in the OnCreate method.

database = FirebaseDatabase.getInstance().getReference();

Next we will build a query for all users and iterate over them to provide a the data for our ListView.

database.child("users").addListenerForSingleValueEvent(...)

Within the onDataChange we will process the results and create ChatUsers and add them to our list.

uList = new ArrayList();
for(DataSnapshot ds : dataSnapshot.getChildren()) {
ChatUser user = ds.getValue(ChatUser.class);
Logger.getLogger(UserList.class.getName()).log(Level.ALL,user.getUsername());
if(!user.getId().contentEquals(FirebaseAuth.getInstance().getCurrentUser().getUid())) {
uList.add(user);
}
}

Adding code to allow users to chat in our app

To support users sending messages and retrieving conversations we will need to add the following code to the com.chatt.demo.Chat class.

We will start by doing a call to get all the current messages in our messages collection using the loadConversationList method.

FirebaseDatabase.getInstance().getReference("messages")

When the data is returned we will filter for conversations that the current user is a party too.

FirebaseUser user = FirebaseAuth.getInstance().getCurrentUser();
if(user != null) {
for (DataSnapshot ds : dataSnapshot.getChildren()) {
Conversation conversation = ds.getValue(Conversation.class);
if (conversation.getReceiver().contentEquals(user.getUid()) || conversation.getSender().contentEquals(user.getUid())) {
convList.add(conversation);
if (lastMsgDate == null || lastMsgDate.before(conversation.getDate())) {
lastMsgDate = conversation.getDate();
}
adp.notifyDataSetChanged();
}
}
}

This data will provide the content of our messages ListView if you select one of these Conversations you will be shown the message entry view. To support sending messages to the other parties in a conversation we will modify sendMessage method. Messages are sent by creating Conversation objects .

final Conversation conversation = new Conversation(s,Calendar.getInstance().getTime(),user.getUid(),buddy.getId(),"");

Once the conversation has been established we will create a new message in the messages collection by first creating a object key.

final String key = FirebaseDatabase.getInstance().getReference("messages").push().getKey();

Then using the .child() method in the FirebaseDatabase we will insert the new message.

FirebaseDatabase.getInstance().getReference("messages").child(key).setValue(conversation)

As part of the completion code we set the status on the message record to show that the message was sent successfully or if it had errored.

if (task.isSuccessful()) {
convList.get(convList.indexOf(conversation)).setStatus(Conversation.STATUS_SENT);
} else {
convList.get(convList.indexOf(conversation)).setStatus(Conversation.STATUS_FAILED);
}
FirebaseDatabase.getInstance().getReference("messages").child(key).setValue(convList.get(convList.indexOf(conversation))).addOnCompleteListener(new OnCompleteListener() {@Override
public void onComplete(@NonNull Task task) {
adp.notifyDataSetChanged();
}
});

Conclusion

Congratulations you’ve now got a live Android Chatt app running on Firebase! We hope you’ve found the course interesting, and we’d love feedback about what you liked and what you’d like improved.

 

BY : Johan Van Zilj | CATEGORY : News |CATEGORY SLUG: news | Date : 24 August, 2016 | Tags :