Xamarin.Android - Simsimi Chat App

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

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)

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">  
  3.     <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" />  
  4.     <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" />  
  5.     <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" />   
  6. </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

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <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">  
  3.     <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" />   
  4. </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

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <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">  
  3.     <ImageView android:id="@+id/simsimi_image" android:src="@drawable/simsimi" android:layout_width="40dp" android:layout_height="40dp" />  
  4.     <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" />   
  5. </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

  1. namespace SimsimiChat.Model {  
  2.     public class SimsimiModel {  
  3.         public string response {  
  4.             get;  
  5.             set;  
  6.         }  
  7.         public int id {  
  8.             get;  
  9.             set;  
  10.         }  
  11.         public int result {  
  12.             get;  
  13.             set;  
  14.         }  
  15.         public string msg {  
  16.             get;  
  17.             set;  
  18.         }  
  19.     }  

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)

  1. namespace SimsimiChat.Model {  
  2.     public class ChatModel {  
  3.         public string ChatMessage {  
  4.             get;  
  5.             set;  
  6.         }  
  7.         public bool IsSend {  
  8.             get;  
  9.             set;  
  10.         }  
  11.     }  
  12. }  

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

  1. using Java.IO;  
  2. using Java.Net;  
  3. using System;  
  4. using System.Text;  
  5. namespace SimsimiChat.Helper {  
  6.     public class HttpDataHandler {  
  7.         static string stream = null;  
  8.         public HttpDataHandler() {}  
  9.         public string GetHTTPData(string urlString) {  
  10.             try {  
  11.                 URL url = new URL(urlString);  
  12.                 HttpURLConnection urLConnection = (HttpURLConnection) url.OpenConnection();  
  13.                 if (urLConnection.ResponseCode == HttpStatus.Ok) {  
  14.                     BufferedReader r = new BufferedReader(new InputStreamReader(urLConnection.InputStream));  
  15.                     StringBuilder sb = new StringBuilder();  
  16.                     String line;  
  17.                     while ((line = r.ReadLine()) != null) sb.Append(line);  
  18.                     stream = sb.ToString();  
  19.                     urLConnection.Disconnect();  
  20.                 }  
  21.             } catch (Exception ex) {}  
  22.             return stream;  
  23.         }  
  24.     }  

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

  1. using Android.Content;  
  2. using Android.Views;  
  3. using Android.Widget;  
  4. using Com.Github.Library.Bubbleview;  
  5. using SimsimiChat.Model;  
  6. using System.Collections.Generic;  
  7. namespace SimsimiChat.Adapter {  
  8.     public class CustomAdapter: BaseAdapter {  
  9.         private List < ChatModel > listChatModel;  
  10.         private Context context;  
  11.         private LayoutInflater inflater;  
  12.         public CustomAdapter(List < ChatModel > listChatModel, Context context) {  
  13.             this.context = context;  
  14.             this.listChatModel = listChatModel;  
  15.             inflater = (LayoutInflater) context.GetSystemService(Context.LayoutInflaterService);  
  16.         }  
  17.         public override int Count {  
  18.             get {  
  19.                 return listChatModel.Count;  
  20.             }  
  21.         }  
  22.         public override Java.Lang.Object GetItem(int position) {  
  23.             return position;  
  24.         }  
  25.         public override long GetItemId(int position) {  
  26.             return position;  
  27.         }  
  28.         public override View GetView(int position, View convertView, ViewGroup parent) {  
  29.             View view = convertView;  
  30.             if (view == null) {  
  31.                 if (listChatModel[position].IsSend) view = inflater.Inflate(Resource.Layout.List_item_message_send, null);  
  32.                 else view = inflater.Inflate(Resource.Layout.List_item_message_recv, null);  
  33.                 BubbleTextView bubbleTextView = view.FindViewById < BubbleTextView > (Resource.Id.text_message);  
  34.                 bubbleTextView.Text = (listChatModel[position].ChatMessage);  
  35.             }  
  36.             return view;  
  37.         }  
  38.     }  

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

  1. using Android.App;  
  2. using Android.Widget;  
  3. using Android.OS;  
  4. using Android.Support.V7.App;  
  5. using Android.Support.Design.Widget;  
  6. using SimsimiChat.Model;  
  7. using System.Collections.Generic;  
  8. using SimsimiChat.Helper;  
  9. using Newtonsoft.Json;  
  10. using SimsimiChat.Adapter;  
  11. namespace SimsimiChat {  
  12.     [Activity(Label = "SimsimiChat", MainLauncher = true, Theme = "@style/Theme.AppCompat.Light.NoActionBar")]  
  13.     public class MainActivity: AppCompatActivity {  
  14.         public ListView list_of_message;  
  15.         public EditText user_message;  
  16.         FloatingActionButton btn_send;  
  17.         public List < ChatModel > list_chat = new List < ChatModel > ();  
  18.         protected override void OnCreate(Bundle savedInstanceState) {  
  19.             base.OnCreate(savedInstanceState);  
  20.             // Set our view from the "main" layout resource  
  21.             SetContentView(Resource.Layout.Main);  
  22.             list_of_message = FindViewById < ListView > (Resource.Id.list_of_message);  
  23.             user_message = FindViewById < EditText > (Resource.Id.user_message);  
  24.             btn_send = FindViewById < FloatingActionButton > (Resource.Id.fab);  
  25.             btn_send.Click += delegate {  
  26.                 string text = user_message.Text;  
  27.                 ChatModel model = new ChatModel();  
  28.                 model.ChatMessage = text;  
  29.                 model.IsSend = true;  
  30.                 list_chat.Add(model);  
  31.                 new SimsimiAPI(this).Execute(user_message.Text);  
  32.                 user_message.Text = "";  
  33.             };  
  34.         }  
  35.     }  
  36.     internal class SimsimiAPI: AsyncTask < string, string, string > {  
  37.         private MainActivity mainActivity;  
  38.         private  
  39.         const string API_KEY = "d3a0b788-28d6-4506-8baa-730335ecc978";  
  40.         public SimsimiAPI(MainActivity mainActivity) {  
  41.             this.mainActivity = mainActivity;  
  42.         }  
  43.         protected override string RunInBackground(params string[] @params) {  
  44.             string url = $ "http://sandbox.api.simsimi.com/request.p?key={API_KEY}&lc=en&ft=1.0&text={@params[0]}";  
  45.             HttpDataHandler dataHandler = new HttpDataHandler();  
  46.             return dataHandler.GetHTTPData(url);  
  47.         }  
  48.         protected override void OnPostExecute(string result) {  
  49.             SimsimiModel simsimiModel = JsonConvert.DeserializeObject < SimsimiModel > (result.ToString());  
  50.             ChatModel model = new ChatModel();  
  51.             model.ChatMessage = simsimiModel.response;  
  52.             model.IsSend = false;  
  53.             mainActivity.list_chat.Add(model);  
  54.             CustomAdapter adapter = new CustomAdapter(mainActivity.list_chat, mainActivity.BaseContext);  
  55.             mainActivity.list_of_message.Adapter = adapter;  
  56.         }  
  57.     }  

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.

  1. <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