Xamarin.Android - Simsimi Chat App

Introduction

Hello everybody! Today, I shall show you how to make a simple Simsimi chat application.

Prerequisites

• Simsimi API key
• Bubble View
• Newtonsoft.json
• Xamarin Android Support Design
• Icon of Simsimi and Arrow

About Request Parameters:

Parameter	Value	Required	Default	Description
Key	String	Yes	Your key value
Text	String	Yes	Query message
Language code	String	Yes	Language code(List)
Ft	Double(0.0 ~ 1.0)	0.0	1.0 : 'Bad Word Discriminator'

Step 1

First, we need to subscribe Simsimi API key. Go to developer.simsimi.com

Create an account on Simsimi Developer.

 

Step 2

Next, login to your account by providing the login email and password.

 

Step 3

Now, go to application list and click on View Details/Extra function edit and get 7 days’ free trial key.

Step 4

Give this an application name and purpose of trial. Now, you can use this API to request Simsimi to talk.

 

Create Xamarin Android Application

Step 1

Open Visual Studio and go to New Project-> Templates-> Visual C#-> Android-> Blank app. Give it a name, like SimsimiChat.

 

Step 2

Go to Solution Explorer -> Project Name -> Resources-> Drawable right click Arrow and Simsimi icon. Paste into the drawable folder.

Step 3

Next, go to Solution Explorer-> Project Name-> References. Then, right-click to "Manage NuGet Packages" and search for JSON. Install the Newtonsoft.json package.

Step 4

Similarly, go to Solution Explorer-> Project Name-> References. Then, right-click to "Manage NuGet Packages" and search for Bubble. Install the Bubble package.

 

Step 5

Now again, go to Solution Explorer-> Project Name-> References. Then, right-click to "Manage NuGet Packages" and search for Xamarin.Android.Support.Design. Install the Support Design Packages.

Step 6

Next, open Solution Explorer-> Project Name-> Resources-> Layout-> Main.axml. Open this main layout file and add the following code.

(File Name: Main.axml)

(Folder Name: Layout)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">
    <android.support.design.widget.FloatingActionButton android:clickable="true" android:src="@drawable/send" android:id="@+id/fab" android:tint="@android:color/white" android:layout_alignParentBottom="true" android:layout_alignParentEnd="true" android:layout_width="wrap_content" android:layout_height="wrap_content" />
    <ListView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/fab" android:layout_marginBottom="20dp" android:id="@+id/list_of_message" android:stackFromBottom="true" android:transcriptMode="alwaysScroll" android:dividerHeight="0dp" android:divider="@android:color/transparent" />
    <EditText android:layout_toLeftOf="@+id/fab" android:layout_alignParentBottom="true" android:layout_alignParentStart="true" android:id="@+id/user_message" android:layout_width="match_parent" android:layout_height="wrap_content" />
</RelativeLayout>

Step 7

Next, add a new Layout, go to Solution Explorer-> Project Name-> Resources-> Layout-> Right click to add a new item, select Layout, give it a name as List_item_message_send.axml. Open this layout file and add the following code.

(File Name: List_item_message_send.axml)

(Folder Name: Layout)

AXML Code

<?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:id="@+id/text_message" android:padding="10dp" android:textColor="#FFF" android:layout_alignParentRight="true" android:layout_width="wrap_content" android:layout_height="wrap_content" app:arrowWidth="8dp" app:angle="8dp" app:arrowHeight="10dp" app:arrowPosition="14dp" app:arrowLocation="right" app:arrowCenter="true" app:bubbleColor="#7EC0EE" />
</RelativeLayout>

Step 8

Next, add another new Layout. Go to Solution Explorer-> Project Name-> Resources-> Layout-> Right click to add a new item, select Layout, give it a name as List_item_message_recv.axml. Open this layout file and add the following code.

(File Name: List_item_message_recv.axml)

(Folder Name: Layout)

AXML Code

<?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:id="@+id/simsimi_image" android:src="@drawable/simsimi" android:layout_width="40dp" android:layout_height="40dp" />
    <com.github.library.bubbleview.BubbleTextView android:id="@+id/text_message" android:padding="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#FFF" android:layout_toRightOf="@id/simsimi_image" app:arrowWidth="8dp" app:angle="8dp" app:arrowHeight="10dp" app:arrowPosition="14dp" app:arrowLocation="left" app:arrowCenter="true" app:bubbleColor="#FF4081" />
</RelativeLayout>

Step 9

Next, go to Solution Explorer-> Project Name and right-click. Select Add -> New Item-> Class. Give it a name as SimsimiModel.cs and write the following code.

(File Name: SimsimiModel.cs)

C# Code

namespace SimsimiChat.Model {
    public class SimsimiModel {
        public string response {
            get;
            set;
        }
        public int id {
            get;
            set;
        }
        public int result {
            get;
            set;
        }
        public string msg {
            get;
            set;
        }
    }
}

Step 10

Similarly, go to Solution Explorer-> Project Name and right-click. Select Add -> New Item-> Class. Give it a name like, ChatModel.cs and write the following code.

(File Name: ChatModel.cs)

namespace SimsimiChat.Model {
    public class ChatModel {
        public string ChatMessage {
            get;
            set;
        }
        public bool IsSend {
            get;
            set;
        }
    }
}

Step 11

Next, add a HttpDataHandler class. Go to Solution Explorer-> Project Name and right-click. Select Add -> New Item-> Class. Give it a name like, HttpDataHandler.cs and write the following code with appropriate namespaces.

(File Name: HttpDataHandler.cs)

C# Code

using Java.IO;
using Java.Net;
using System;
using System.Text;
namespace SimsimiChat.Helper {
    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.ResponseCode == HttpStatus.Ok) {
                    BufferedReader r = new BufferedReader(new InputStreamReader(urLConnection.InputStream));
                    StringBuilder sb = new StringBuilder();
                    String line;
                    while ((line = r.ReadLine()) != null) sb.Append(line);
                    stream = sb.ToString();
                    urLConnection.Disconnect();
                }
            } catch (Exception ex) {}
            return stream;
        }
    }
}

Step 12

Next, add a new class. Go to Solution Explorer-> Project Name and right-click Add -> New Item-> Class. Give it a name like CustomAdapter.cs, and write the following code.

(FileName: CustomAdapter)

C# Code

using Android.Content;
using Android.Views;
using Android.Widget;
using Com.Github.Library.Bubbleview;
using SimsimiChat.Model;
using System.Collections.Generic;
namespace SimsimiChat.Adapter {
    public class CustomAdapter: BaseAdapter {
        private List < ChatModel > listChatModel;
        private Context context;
        private LayoutInflater inflater;
        public CustomAdapter(List < ChatModel > listChatModel, Context context) {
            this.context = context;
            this.listChatModel = listChatModel;
            inflater = (LayoutInflater) context.GetSystemService(Context.LayoutInflaterService);
        }
        public override int Count {
            get {
                return listChatModel.Count;
            }
        }
        public override Java.Lang.Object GetItem(int position) {
            return position;
        }
        public override long GetItemId(int position) {
            return position;
        }
        public override View GetView(int position, View convertView, ViewGroup parent) {
            View view = convertView;
            if (view == null) {
                if (listChatModel[position].IsSend) view = inflater.Inflate(Resource.Layout.List_item_message_send, null);
                else view = inflater.Inflate(Resource.Layout.List_item_message_recv, null);
                BubbleTextView bubbleTextView = view.FindViewById < BubbleTextView > (Resource.Id.text_message);
                bubbleTextView.Text = (listChatModel[position].ChatMessage);
            }
            return view;
        }
    }
}

Step 13

Lastly, go to Solution Explorer-> Project Name-> MainActivity and add the following code to main activity with appropriate namespaces.

(FileName: MainActivity)

C# Code

using Android.App;
using Android.Widget;
using Android.OS;
using Android.Support.V7.App;
using Android.Support.Design.Widget;
using SimsimiChat.Model;
using System.Collections.Generic;
using SimsimiChat.Helper;
using Newtonsoft.Json;
using SimsimiChat.Adapter;
namespace SimsimiChat {
    [Activity(Label = "SimsimiChat", MainLauncher = true, Theme = "@style/Theme.AppCompat.Light.NoActionBar")]
    public class MainActivity: AppCompatActivity {
        public ListView list_of_message;
        public EditText user_message;
        FloatingActionButton btn_send;
        public List < ChatModel > list_chat = new List < ChatModel > ();
        protected override void OnCreate(Bundle savedInstanceState) {
            base.OnCreate(savedInstanceState);
            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
            list_of_message = FindViewById < ListView > (Resource.Id.list_of_message);
            user_message = FindViewById < EditText > (Resource.Id.user_message);
            btn_send = FindViewById < FloatingActionButton > (Resource.Id.fab);
            btn_send.Click += delegate {
                string text = user_message.Text;
                ChatModel model = new ChatModel();
                model.ChatMessage = text;
                model.IsSend = true;
                list_chat.Add(model);
                new SimsimiAPI(this).Execute(user_message.Text);
                user_message.Text = "";
            };
        }
    }
    internal class SimsimiAPI: AsyncTask < string, string, string > {
        private MainActivity mainActivity;
        private
        const string API_KEY = "d3a0b788-28d6-4506-8baa-730335ecc978";
        public SimsimiAPI(MainActivity mainActivity) {
            this.mainActivity = mainActivity;
        }
        protected override string RunInBackground(params string[] @params) {
            string url = $ "http://sandbox.api.simsimi.com/request.p?key={API_KEY}&lc=en&ft=1.0&text={@params[0]}";
            HttpDataHandler dataHandler = new HttpDataHandler();
            return dataHandler.GetHTTPData(url);
        }
        protected override void OnPostExecute(string result) {
            SimsimiModel simsimiModel = JsonConvert.DeserializeObject < SimsimiModel > (result.ToString());
            ChatModel model = new ChatModel();
            model.ChatMessage = simsimiModel.response;
            model.IsSend = false;
            mainActivity.list_chat.Add(model);
            CustomAdapter adapter = new CustomAdapter(mainActivity.list_chat, mainActivity.BaseContext);
            mainActivity.list_of_message.Adapter = adapter;
        }
    }
}

Step 14

We need permission for internet. Let's open Solution Explorer and go to Properties-> AndroidManifest and add the following code inside application tags.

<uses-permission android:name="android.permission.INTERNET" />

Finally, we have made an app with our Simsimi chat app. Just rebuild and run the project. You will have the result like below.

Output