Xamarin.Android - Simsimi Chat App

Ahsan Siddique
Dec 09, 2017
1.9k
0
1
Article

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.