How to Use Firebase ML Kit Smart Replies in Android?

We have seen using chatbots in Android for replying to the most common questions from the users. In this article, we will take a look at the implementation of Firebase ML Kit smart replies in Android. Firebase ML Kit smart replies are used to provide smart replies to the questions asked by the users using the Firebase ML Kit. 

What we are going to build in this article? 

We will be building a simple application in which we will be making a chatting-like interface in which the user will post his query in the chatbox and according to the user’s query we will get to see the message from Firebase ML Kit. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Connect your app to Firebase

After creating a new project in Android Studio connect your app to Firebase. For connecting your app to firebase. Navigate to Tools on the top bar. After that click on Firebase. A new window will open on the right side. Inside that window click on Firebase ML and then click on Use Firebase ML kit in Android. You can see the option below screenshot.  

After clicking on this option on the next screen click on Connect to Firebase option to connect your app to Firebase. 

Step 3: Adding dependency for language translation to build.gradle file

Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.   

// dependency for firebase core.

implementation’com.google.firebase:firebase-core:15.0.2′

// Firebase ML dependency

implementation ‘com.google.firebase:firebase-ml-vision:24.0.3’

// dependency for smart reply

implementation ‘com.google.firebase:firebase-ml-natural-language-smart-reply-model:20.0.7’

Inside the same Gradle file. Add the below code in the android section. 

aaptOptions {

       noCompress “tflite”

  }

Now sync your project and let’s move towards the implementation of Firebase ML Kit smart replies.

Step 4: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

<?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"
    tools:context=".MainActivity">

    <!--recycler view for displaying our chat messages-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/idRVMessage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/idLLmessage" />

    <LinearLayout
        android:id="@+id/idLLmessage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:weightSum="5">

        <!--edit text for entering user message-->
        <EditText
            android:id="@+id/idEdtUserMsg"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_weight="4.5" />

        <!--fab for sending message-->
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/idBtnFAB"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="0.5"
            android:src="@drawable/ic_baseline_send_24"
            app:backgroundTint="@color/purple_200"
            app:fabSize="mini"
            app:tint="@color/white" />
    </LinearLayout>

</RelativeLayout>

Step 5: Creating a modal class for storing our data

As we are displaying all our data in our RecyclerView. So we have to store this data in a modal class. For creating a modal class, Navigate to the app > java > your app’s package name > Right-click on it > New > Java class and name it as ChatMsgModal and add the below code to it. Comments are added inside the code to understand the code in more detail.

Java

public class ChatMsgModal {
    // variable for our string and int for a type of message.
    // type is to use weather the message in our recycler
    // view is from user or from FIrebase ML kit.
    private String message;
    private int type;

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public int getType() {
        return type;
    }

    public void setType(int type) {
        this.type = type;
    }

    public ChatMsgModal(String message, int type) {
        this.message = message;
        this.type = type;
    }
}

Step 6: Creating a layout file for each item of the message 

Navigate to the app > res > layout > Right-click on it > New > layout resource file and name it as msg_rv_item and add the below code to it. 

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/idCVMessage"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    app:cardCornerRadius="8dp"
    app:cardElevation="5dp">

    <!--text view for displaying our message-->
    <TextView
        android:id="@+id/idTVMessage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:padding="5dp"
        android:text="Message"
        android:textColor="@color/black" />

</androidx.cardview.widget.CardView>

Step 7: Creating an adapter class for displaying this data

Navigate to the app > java > your app’s package name > Right-click on it > New > Java class and name it as ChatRVAdapter and add the below code to it.

Java

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.cardview.widget.CardView;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class ChatRVAdapter extends RecyclerView.Adapter<ChatRVAdapter.ViewHolder> {

    // variable for context and array list.
    private Context context;
    private ArrayList<ChatMsgModal> chatMsgModalArrayList;

    // create a constructor for our context and array list.
    public ChatRVAdapter(Context context, ArrayList<ChatMsgModal> chatMsgModalArrayList) {
        this.context = context;
        this.chatMsgModalArrayList = chatMsgModalArrayList;
    }

    @NonNull
    @Override
    public ChatRVAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // inside on create view holder method we are inflating our layout file which we created.
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.msg_rv_item, parent, false);
        return new ChatRVAdapter.ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ChatRVAdapter.ViewHolder holder, int position) {
        ChatMsgModal modal = chatMsgModalArrayList.get(position);
        if (modal.getType() == 0) {
            // when we get type as 0 then the
            // message will be of user type.
            holder.msgTV.setText(modal.getMessage());
        } else {
            // other than this condition we will display
            // the text background color and text color.
            holder.msgTV.setText(modal.getMessage());
            holder.msgCV.setCardBackgroundColor(context.getResources().getColor(R.color.purple_200));
            holder.msgTV.setTextColor(context.getResources().getColor(R.color.white));
        }
    }

    @Override
    public int getItemCount() {
        // on below line returning
        // the size of our array list.
        return chatMsgModalArrayList.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        // creating variables for our
        // card view and text view.
        private TextView msgTV;
        private CardView msgCV;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            // initializing variables for our text view and card view.
            msgTV = itemView.findViewById(R.id.idTVMessage);
            msgCV = itemView.findViewById(R.id.idCVMessage);

        }
    }
}

Step 8: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import com.google.android.gms.tasks.OnFailureListener;
import com.google.android.gms.tasks.OnSuccessListener;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.firebase.ml.naturallanguage.FirebaseNaturalLanguage;
import com.google.firebase.ml.naturallanguage.smartreply.FirebaseSmartReply;
import com.google.firebase.ml.naturallanguage.smartreply.FirebaseTextMessage;
import com.google.firebase.ml.naturallanguage.smartreply.SmartReplySuggestionResult;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    // on below line we are creating
    // a list with Firebase Text Message.
    List<FirebaseTextMessage> messageList;

    // on below line we are creating variables for
    // our edittext, recycler view, floating action button,
    // array list for storing our message
    // and creating a variable for our adapter class.
    private EditText userMsgEdt;
    private RecyclerView msgRV;
    private FloatingActionButton sendFAB;
    private ArrayList<ChatMsgModal> chatMsgModalArrayList;
    private ChatRVAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // initializing all our variables.
        userMsgEdt = findViewById(R.id.idEdtUserMsg);
        msgRV = findViewById(R.id.idRVMessage);
        sendFAB = findViewById(R.id.idBtnFAB);

        // initializing our array list.
        messageList = new ArrayList<>();
        chatMsgModalArrayList = new ArrayList<>();

        // initializing our adapter.
        adapter = new ChatRVAdapter(MainActivity.this, chatMsgModalArrayList);

        // layout manager for our recycler view.
        LinearLayoutManager manager = new LinearLayoutManager(MainActivity.this);

        // setting layout manager
        // for our recycler view.
        msgRV.setLayoutManager(manager);

        // setting adapter to our recycler view.
        msgRV.setAdapter(adapter);

        // adding on click listener for our floating action button
        sendFAB.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // validating if the edit text is empty or not.
                if (TextUtils.isEmpty(userMsgEdt.getText().toString())) {
                    Toast.makeText(MainActivity.this, "Please enter your message..", Toast.LENGTH_SHORT).show();
                    return;
                }
                // calling a method to send our message
                // and getting the response.
                sendMessage();
                userMsgEdt.setText("");
            }
        });
    }

    private void sendMessage() {
        // on below line we are creating a variable for our Firebase text message
        // and passing our user input message to it along with time.
        FirebaseTextMessage message = FirebaseTextMessage.createForRemoteUser(
                userMsgEdt.getText().toString(), // Content of the message
                System.currentTimeMillis(),      // Time at which the message was sent
                "uid"                            // This has to be unique for every other person involved
                                                 // in the chat who is not your user
        );
        // on below line we are adding
        // our message to our message list.
        messageList.add(message);

        // on below line we are adding our edit text field
        // value to our array list and setting type as 0.
        // as we are using type as 0 for our user message
        // and 1 for our message from Firebase.
        chatMsgModalArrayList.add(new ChatMsgModal(userMsgEdt.getText().toString(), 0));

        // on below line we are calling a method
        // to notify data change in adapter.
        adapter.notifyDataSetChanged();

        // on below line we are creating a variable for our Firebase
        // smart reply and getting instance of it.
        FirebaseSmartReply smartReply = FirebaseNaturalLanguage.getInstance().getSmartReply();

        // on below line we are calling a method to suggest reply for our user message.
        smartReply.suggestReplies(messageList).addOnSuccessListener(new OnSuccessListener<SmartReplySuggestionResult>() {
            @Override
            public void onSuccess(SmartReplySuggestionResult smartReplySuggestionResult) {
                // inside on success listener method we are checking if the language is not supported.
                if (smartReplySuggestionResult.getStatus() == SmartReplySuggestionResult.STATUS_NOT_SUPPORTED_LANGUAGE) {
                    // displaying toast message if the language is not supported.
                    Toast.makeText(MainActivity.this, "Language not supported..", Toast.LENGTH_SHORT).show();
                } else if (smartReplySuggestionResult.getStatus() == SmartReplySuggestionResult.STATUS_SUCCESS) {
                    // if we get a successful status message.
                    // we are adding that message  to our
                    // array list and notifying our adapter
                    // that data has been changed.
                    chatMsgModalArrayList.add(new ChatMsgModal(smartReplySuggestionResult.getSuggestions().get(0).getText(), 1));
                    adapter.notifyDataSetChanged();
                }
            }
        }).addOnFailureListener(new OnFailureListener() {
            @Override
            public void onFailure(@NonNull Exception e) {
                // inside on failure method we are displaying a toast message
                Toast.makeText(MainActivity.this, "Fail to get data.." + e.getMessage(), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Now run your app and see the output of the app. 

Output:

Note: You will get a certain delay in reply from Firebase for the first time. Also, the response from Firebase will not be accurate as this response are send from the Firebase ML kit model.