Xamarin

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)

  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.     }  
  20. } 

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.     }  
  25. } 

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.     }  
  39. } 

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.     }  
  58. } 

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

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs