Creating a text chat app

Java

Sending a Signal

Now that you have connected to the session and have a session object, you can now send a Signal. Signals are arbitrary text or data that are sent in a session which can be sent to a specific client or all connected clients. You can learn more about them in the Vonage Video Signaling developer guide. For this tutorial you will be sending text.

Create a new class called SignalMessage with this code:

public class SignalMessage {

    private String messageText;
    private Boolean remote;

    public SignalMessage(String messageText) {
        this.messageText = messageText;
        this.remote = false;
    }

    public SignalMessage(String messageText, Boolean remote) {
        this.messageText = messageText;
        this.remote = remote;
    }

    public String getMessageText() {
        return this.messageText;
    }

    public Boolean isRemote() {
        return this.remote;
    }
}

This class will be used to show the Signals in the UI.

Copy the following code and paste it below the existing code in your MainActivity class after the onCreate function:

private void sendMessage() {
  Log.d(TAG, "Send Message");
  String data = messageEditTextView.getText().toString();
  session.sendSignal("msg", data);

  SignalMessage message = new SignalMessage(data);
  messageHistory.add(message);

  messageEditTextView.setText("");
}

This code adds a function that will be called from the UI. session.signal is called to send the text as a Signal. session.signal takes the type of Signal and some data. The type is optional but can be used to differentiate between types of Signals in your app. If the Signal sends successfully, it is added to the array of messages that the UI is using.

In the MainActivity class, update the end of the onCreate function to add a listener to the EditTextView which uses the sendMessage function:

messageEditTextView.setOnEditorActionListener(new TextView.OnEditorActionListener() {
    @Override
    public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
        if (actionId == EditorInfo.IME_ACTION_DONE) {
            InputMethodManager inputMethodManager = (InputMethodManager) v.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);
            inputMethodManager.hideSoftInputFromWindow(v.getWindowToken(), 0);
            sendMessage();
            return true;
        }
        return false;
    }
});

When the EditTextView emits a done action, the sendMessage function will be called. Now time to update the UI:

Open the activity_main.xml layout file (res > layout).
Open the code view.
Copy this XML over the existing layout:

  <?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:keepScreenOn="true"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="16dp"
    android:paddingBottom="16dp"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/message_history_list_view"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/message_edit_text"
        android:transcriptMode="alwaysScroll"
        android:layout_marginBottom="8dp" />

    <EditText
        android:id="@+id/message_edit_text"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:enabled="false"
        android:hint="Message"
        android:imeOptions="actionDone"
        android:inputType="text"
        android:maxLines="1" />
  </RelativeLayout>

Create a new layout file called message_single_local.xml with this XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="horizontal">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Local Message"
        android:id="@+id/message_text"
        android:gravity="end"
        android:layout_marginTop="1dp"
        android:layout_marginBottom="1dp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="2dp" />
</LinearLayout>

Duplicate the message_single_local.xml, call it message_single_remote.xml, and change the gravity to start.
Add an adapter for the message history ListView, create a class called SignalMessageAdapter with this code:

public class SignalMessageAdapter extends ArrayAdapter<SignalMessage> {

  public static final int VIEW_TYPE_LOCAL = 0;
  public static final int VIEW_TYPE_REMOTE = 1;
  private static final Map<Integer, Integer> viewTypes;

  static {
      Map<Integer, Integer> aMap = new HashMap<>();
      aMap.put(VIEW_TYPE_LOCAL, R.layout.message_single_local);
      aMap.put(VIEW_TYPE_REMOTE, R.layout.message_single_remote);
      viewTypes = Collections.unmodifiableMap(aMap);
  }

  public SignalMessageAdapter(Context context) {
      super(context, 0);
  }

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
      SignalMessage message = getItem(position);

      if (convertView == null) {
          int type = getItemViewType(position);
          convertView = LayoutInflater.from(getContext()).inflate(viewTypes.get(type), null);
      }

      TextView messageTextView = (TextView) convertView.findViewById(R.id.message_text);
      if (messageTextView != null) {
          messageTextView.setText(message.getMessageText());
      }

      return convertView;
  }

  @Override
  public int getItemViewType(int position) {

      SignalMessage message = getItem(position);
      return message.isRemote() ? VIEW_TYPE_REMOTE : VIEW_TYPE_LOCAL;
  }

  @Override
  public int getViewTypeCount() {
      return viewTypes.size();
  }
}

Adapters are used to populate views in a ListView, this defines a custom one for the Signals. Make sure to import any classes that are needed.

Basic text chat

Follow this tutorial to build basic text chat from scratch using the Vonage Video API. It is the quickest way to build a proof of concept for this functionality on the video platform.

Available on:

JavaScript Java Swift

Steps

Overview

Before You Begin

Configure a Vonage Video Application

Creating the Project

Setting Up Authentication

Connecting to the Session

Sending a Signal

Receiving a Signal

Testing your Code