Tutorial to make a SimSimi Chatbot Android Application

Demo of the App that will get created by following below tutorial

Step 1:- Sign Up in the developer.simsimi.com and follow the steps till you get the API Key for the Trial period of 7 Days.

Step 2:- Now Create a new project in Android Studio.

Step 3:- Now add the following dependency in Project-level Build.Gradle file

maven{
    url 'https://jitpack.io'
}

 

Step 4:- Now add the following dependency in Module-level Build.Gradle file

compile 'com.github.lguipeng:BubbleView:1.0.1'
compile 'com.google.code.gson:gson:2.8.0'

Step 5:- Now download the official SimSimi icon from google and paste it in drawable folder.

 

Step 6:- Now copy your SimSimi API Key as follows into res/values/strings.xml,

<string name="simsimi_api">YOUR_API_KEY_HERE</string>

Step 7:- Set the theme in styles.xml to NoActionBar:-

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> 

Step 8:- Now design the layout in activity_main.xml,

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.himalayabhagwani.testsimsimi.MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:text="SEND"
        android:textColor="#ffffff"
        android:background="#25af03"
        android:id="@+id/fab"
        android:fontFamily="cursive"
        android:textSize="19sp"
        android:textStyle="bold"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:id="@+id/list_of_messages"
        android:stackFromBottom="true"
        android:dividerHeight="0dp"
        android:transcriptMode="alwaysScroll"
        android:divider="@android:color/transparent"
        android:layout_above="@+id/fab" />

    <EditText
        android:layout_toLeftOf="@+id/fab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:id="@+id/user_message"
        android:hint="Enter your message"
        android:textColorHint="#d85fdc"
        android:textColor="#862a83"
        android:background="#ffe100"
        android:layout_alignTop="@+id/fab" />

</RelativeLayout>

Step 9:- Now create a new layout resource file ”list_item_message_send.xml” by right-clicking on res/layout folder.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.github.library.bubbleview.BubbleTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/text_message"
        android:padding="10dp"
        android:layout_alignParentRight="true"
        android:textColor="#FFF"
        app:arrowHeight="10dp"
        app:arrowWidth="8dp"
        app:angle="8dp"
        app:arrowPosition="14dp"
        app:arrowLocation="right"
        app:arrowCenter="true"
        app:bubbleColor="#7EC0EE" />

</RelativeLayout> 

Step 10:- Now create another xml file using the same method of name – “list_item_message_reply.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/simsimi_icon"
        android:id="@+id/reply_icon"/>

    <com.github.library.bubbleview.BubbleTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/text_message"
        android:padding="10dp"
        android:layout_toRightOf="@+id/reply_icon"
        android:textColor="#FFF"
        app:arrowHeight="10dp"
        app:arrowWidth="8dp"
        app:angle="8dp"
        app:arrowPosition="14dp"
        app:arrowLocation="left"
        app:arrowCenter="true"
        app:bubbleColor="#b30202" />

</RelativeLayout> 

Step 11:- Create a package “Models”

Step 12:- Now create a class – “ChatModel” in package “Models”,

public class ChatModel {

    public String message;
    public boolean isSend;

    public ChatModel(String message, boolean isSend) {
        this.message = message;
        this.isSend = isSend;
    }

    public ChatModel() {
    }

    public String getMessage() {
        return message;
    }

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

    public boolean isSend() {
        return isSend;
    }

    public void setSend(boolean send) {
        isSend = send;
    }

}

 

Step 13:- Now create another class – “SimsimiModel” in package “Models”,

public class SimsimiModel {

    public String response;
    public String id;
    public int result;
    public String msg;

    public SimsimiModel(String response, String id, int result, String msg) {
        this.response = response;
        this.id = id;
        this.result = result;
        this.msg = msg;
    }

    public SimsimiModel() {
    }

    public String getResponse() {
        return response;
    }

    public void setResponse(String response) {
        this.response = response;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public int getResult() {
        return result;
    }

    public void setResult(int result) {
        this.result = result;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

}

Step 14:- Now create a package “Helper”

 

Step 15:- Now create a class – “HttpDataHandler” in package “Helper”,

import java.io.BufferedInputStream;
import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;

public class HttpDataHandler {

    static String stream= null;

    public HttpDataHandler() {
    }

    public String getHTTPData(String urlString)
    {
        try{
            URL url = new URL(urlString);
            HttpURLConnection urlConnection = (HttpURLConnection) url.openConnection();

            if(urlConnection.getResponseCode() == HttpURLConnection.HTTP_OK)
            {
                InputStream in = new BufferedInputStream(urlConnection.getInputStream());

                BufferedReader r = new BufferedReader(new InputStreamReader(in));
                StringBuilder sb = new StringBuilder();
                String line;
                while((line = r.readLine())!=null) {
                    sb.append(line);
                }
                    stream = sb.toString();
                    urlConnection.disconnect();

            }

        }
        catch(Exception e)
        {
            e.printStackTrace();
        }
        finally {

        }
        return stream;
    }

}

Step 16:- Now create a package “Adapter”

Step 17:- Now create a class – “CustomAdapter” in package “Adapter”,

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

import com.example.himalayabhagwani.testsimsimi.Models.ChatModel;
import com.example.himalayabhagwani.testsimsimi.R;
import com.github.library.bubbleview.BubbleTextView;

import java.util.List;

public class CustomAdapter extends BaseAdapter {

    private List<ChatModel> list_chat_model;
    private Context context;
    private LayoutInflater layoutInflater;

    public CustomAdapter(List<ChatModel> list_chat_model, Context context, LayoutInflater layoutInflater) {
        this.list_chat_model = list_chat_model;
        this.context = context;
        this.layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public int getCount() {
        return list_chat_model.size();
    }

    @Override
    public Object getItem(int i) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view = convertView;
        if(view == null)
        {
            if (list_chat_model.get(position).isSend)
            {
                view = layoutInflater.inflate(R.layout.list_item_message_send,null);
            }
            else
            {
                view = layoutInflater.inflate(R.layout.list_item_message_reply,null);
            }

            BubbleTextView text_message = (BubbleTextView) view.findViewById(R.id.text_message);
            text_message.setText(list_chat_model.get(position).message);

        }
        return view;

    }

}

Step 18:- Now write the following code in MainActivity.java,

import android.os.AsyncTask;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;

import com.example.himalayabhagwani.testsimsimi.Adapter.CustomAdapter;
import com.example.himalayabhagwani.testsimsimi.Helper.HttpDataHandler;
import com.example.himalayabhagwani.testsimsimi.Models.ChatModel;
import com.example.himalayabhagwani.testsimsimi.Models.SimsimiModel;
import com.google.gson.Gson;

import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    ListView listView;
    EditText editText;
    List<ChatModel> list_chat = new ArrayList<>();
    Button btn_send_message;

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

        listView = (ListView) findViewById(R.id.list_of_messages);
        editText = (EditText) findViewById(R.id.user_message);
        btn_send_message = (Button) findViewById(R.id.fab);

        btn_send_message.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String text = editText.getText().toString();
                ChatModel model = new ChatModel(text,true);
                list_chat.add(model);
                new SimsimiAPI().execute(list_chat);

                editText.setText("");
            }
        });

    }

    private class SimsimiAPI extends AsyncTask<List<ChatModel>,Void,String>{

        String stream = null;
        List<ChatModel> models;
        String text = editText.getText().toString();

        @Override
        protected String doInBackground(List<ChatModel>... params) {
            String url = null;
            try {
                url = String.format("http://sandbox.api.simsimi.com/request.p?key=%s&lc=en&ft=1.0&text=%s",getString(R.string.simsimi_api), URLEncoder.encode(text,"UTF-8"));
            } catch (UnsupportedEncodingException e) {
                e.printStackTrace();
            }
            models = params[0];
            HttpDataHandler httpDataHandler = new HttpDataHandler();
            stream = httpDataHandler.getHTTPData(url);
            return stream;
        }

        @Override
        protected void onPostExecute(String s) {
            Gson gson = new Gson();
            SimsimiModel response = gson.fromJson(s,SimsimiModel.class);

            ChatModel chatModel = new ChatModel(response.getResponse(),false);
            models.add(chatModel);
            CustomAdapter adapter = new CustomAdapter(models,getApplicationContext());
            listView.setAdapter(adapter);

        }
    }

}