Hello Guys,
In this tutorial , we will make you simple chat application in android using firebase database. It's going to be a very simple Firebase chat app example with just one chat room, which is open to all users.
This Android app will depend on Firebase Auth to manage user registration and sign-in. we will also use Firebase real-time database to store chat messages.
The app will be shown like below picture:
REQUIREMENTS:
- The latest version of Android Studio.
- Firebase Account.
Step 2: Connect Android Studio to Firebase.
- Open Firebase Assistant by clicking on Tools -> Firebase.
- Click on Authentication and after that click on Connect to firebase , your default browser will be open and now login by your google account and you will be redirect in Firebase console page.
- Select "Create new project" in this screen. Once the connection is established , back to the android studio. and see the message "app connected to firebase."
- And then go to firebase console and enable email/password option. then click on firebase real-time database and click on create database button and then allow read and write permission.
- Add Firebase User Interface dependency to your build.gradle file and in this project.
Step 3: Create layout for MainActivity. It's look like this:
compile 'com.firebaseui:firebase-ui:0.6.2'
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/activity_main"
tools:context="com.example.discussion.MainActivity">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_baseline_send"
android:clickable="true"
android:tint="@android:color/white"
android:id="@+id/fab"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
app:fabSize="mini"
/>
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/fab"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:hint="Message..."
android:id="@+id/input"
/>
<ListView
android:id="@+id/list_of_message"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_above="@id/fab"
android:dividerHeight="16dp"
android:divider="@android:color/transparent"
android:layout_marginBottom="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
Step 4: Create list_item.xml file.
- In this xml file created for each chat message. In this layout has 3 TextViews. which display message time , message date and message content:
<?xml version="1.0" encoding="utf-8"?>Step 5: Create main_menu.xml in menu folder.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:id="@+id/message_user"
android:textStyle="normal|bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="@+id/message_user"
android:layout_alignParentEnd="true"
android:id="@+id/message_time"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_below="@id/message_user"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
android:textSize="18sp"
android:layout_alignParentStart="true"
android:id="@+id/message_Text"
android:textStyle="normal|bold"/>
</RelativeLayout>
- we create main_menu.xml for display menu in MainScreen of app. we create menu bar also for sign-out in application. main_menu.xml code look like this:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:title="sign-out" app:showAsAction="never"
android:id="@+id/menu_sign_out"/>
</menu>
Step 6: Edit MainActivity.java Class
- we can edit create account , sign-in , sign-out and display message code in MainActivity class.
import android.content.Intent;
import android.os.Bundle;
import android.text.format.DateFormat;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.firebase.ui.auth.AuthUI;
import com.firebase.ui.database.FirebaseListAdapter;
import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.snackbar.Snackbar;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.database.FirebaseDatabase;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
private static int SIGN_IN_REQUEST_CODE = 1;
private FirebaseListAdapter<chatMessage> adapter;
RelativeLayout activity_main;
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if(item.getItemId() == R.id.menu_sign_out)
{
AuthUI.getInstance().signOut(this).addOnCompleteListener(new OnCompleteListener<Void>() {
@Override
public void onComplete(@NonNull Task<Void> task) {
Snackbar.make(activity_main,"You have been Signed-Out..",Snackbar.LENGTH_SHORT).show();
finish();
}
});
}
return true;
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main_menu,menu);
return true;
}
@Override
protected void onActivityResult(int requestcode, int resultcode, Intent data) {
super.onActivityResult(requestcode,resultcode,data);
if(requestcode == SIGN_IN_REQUEST_CODE)
{
if(resultcode == RESULT_OK)
{
Snackbar.make(activity_main,"SuccessFully sign-in Welcome..",Snackbar.LENGTH_SHORT).show();
displayMessage();
}
else
{
Snackbar.make(activity_main,"Sorry you can't sign-in Please try again later..",Snackbar.LENGTH_SHORT).show();
finish();
}
}
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
activity_main = (RelativeLayout) findViewById(R.id.activity_main);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
EditText input = (EditText) findViewById(R.id.input);
FirebaseDatabase.getInstance().getReference().push().setValue(new chatMessage(input.getText().toString(),
FirebaseAuth.getInstance().getCurrentUser().getEmail()));
input.setText(" ");
}
});
//check if sign-in then navigate the signin page
if(FirebaseAuth.getInstance().getCurrentUser() == null)
{
startActivityForResult(AuthUI.getInstance().createSignInIntentBuilder().build(),SIGN_IN_REQUEST_CODE);
}
else
{
Snackbar.make(activity_main,"Welcome" + FirebaseAuth.getInstance().getCurrentUser().getEmail(),Snackbar.LENGTH_SHORT).show();
displayMessage();
}
//Load content
}
public void displayMessage()
{
ListView listOfMessage = (ListView) findViewById(R.id.list_of_message);
adapter = new FirebaseListAdapter<chatMessage>(this,chatMessage.class , R.layout.list_item,FirebaseDatabase.getInstance().getReference()) {
@Override
protected void populateView(View v, chatMessage model, int position) {
TextView messageText , messageUser , messageTime;
messageText = (TextView) v.findViewById(R.id.message_Text);
messageUser = (TextView) v.findViewById(R.id.message_user);
messageTime = (TextView) v.findViewById(R.id.message_time);
messageText.setText(model.getMessageText());
messageUser.setText(model.getMessageUser());
messageTime.setText(DateFormat.format("dd-MM-yyyy (HH:mm:ss)",model.getMessageTime()));
}
};
listOfMessage.setAdapter(adapter);
};
}
Step 7: Create chatMessage adapter class
- we create chatMessage adapter class for store the chat messages in Firebase real-time database.It's look like this:
package com.example.discussion;
import java.util.Date;
public class chatMessage {
private String MessageText;
private String MessageUser;
private long MessageTime;
public chatMessage(String MessageText,String MessageUser)
{
this.MessageText = MessageText;
this.MessageUser = MessageUser;
MessageTime = new Date().getTime();
}
public chatMessage()
{
}
public String getMessageText()
{
return MessageText;
}
public void setMessageText(String MessageText){
this.MessageText = MessageText;
}
public String getMessageUser()
{
return MessageUser;
}
public void setMessageUser(String MessageUser){
this.MessageUser = MessageUser;
}
public long getMessageTime(){
return MessageTime;
}
public void setMessageTime(long MessageTime){
this.MessageTime = MessageTime;
}
}
Output:
If you liked this post do comment ,share and promote the post 🙏 . Please stay with us and support. 🙏
0 Comments