Squishable Custom Designer Android With New York Embroudery

Creating your own UI with the Smooch Android SDK

This guide shows you how to create your own UI for the Smooch Android SDK.

The Smooch Android SDK comes with a rich prebuilt user interface with the option to configure the interface using the Smooch dashboard or the REST API.

If needed you can completely replace Smooch's default UI with your own interface.

Although you can replace the default UI, note that this means rewriting support for all the Smooch message types, that you want to support in your custom UI.

Overview

The Android SDK can be initialized without displaying it's default UI. You can then make use of the SDK's messaging APIs to send messages, and it's conversation delegate methods to receive messages.

This guide is separated into two parts:

• Part One for setting up a generic UI in Android
• Part Two for dropping Smooch methods in to add the messaging functionality.

It will help to have the SDK documentation on hand while following this guide.

The complete code for this guide is included in this repository.

Part One: setting up the UI

In part one we'll set up the UI that we can drop Smooch into in part two.

1. Create a new project

Create a new project in Android Studio and select "Empty Activity" as a layout.

2. Add UI elements

In the res > layout > activity_main.xml file, remove any existing Hello World elements and add TextView, Plain Text, and Button elements. The elements should have the following IDs:

• TextView: textView
• Plain Text: editText
• Button: button

Arrange the layout to be something like this:

3. Prepare to render conversation history in the TextView element

First we'll set up a property to store the conversation state in text. In java > MainActivity in the MainActivity class add a chatHistoryText String property, like so:

              public              class              MainActivity              extends              AppCompatActivity              {              public              String              conversationText              =                              "                "              ;              ...              }

Now we'll create a render method in the MainActivity class:

              public              void              renderConversationHistory() {              TextView              textView              =              findViewById(R              .id.textView);     textView.setText(conversationText); }

4. Handle input from the Plain Text element

Now we're going to handle the user pressing the send button so that we can treat their text input as a message.

First we'll create a function called sendMessage to handle the event:

              public              void              sendMessage(View              view) {              EditText              editText              =              findViewById(R              .id.editText);              String              text              =              editText.getText().toString();              Log              .d(                "MainActivity"              ,                              "sendMessage:                "                            +              text);     editText.setText(                "                "              ,              TextView              .              BufferType                              .EDITABLE);     conversationText              +=              text              +                              "                \n                "              ;     renderConversationHistory(); }

The sendMessage function is logging the text to the console and resetting the input to an empty state. We're also adding the message to our conversation history and rendering it. When we implement the Smooch pieces, this is where we'll send a message instead of logging it.

In activity_main.xml select the Button element and in the attributes menu set the value of onClick to the sendMessage method, and the value of text to "Send".

---

That concludes the first part of this guide. At this point your MainActivity should look something like this:

              public              class              MainActivity              extends              AppCompatActivity              {              public              String              conversationText              =                              "                "              ;              @Override              protected              void              onCreate(Bundle              savedInstanceState) {              super              .onCreate(savedInstanceState);         setContentView(R              .layout.activity_main);     }              public              void              renderConversationHistory() {              TextView              textView              =              findViewById(R              .id.textView);         textView.setText(conversationText);     }              public              void              sendMessage(View              view) {              EditText              editText              =              findViewById(R              .id.editText);              String              text              =              editText.getText().toString();              Log              .d(                "MainActivity"              ,                              "sendMessage:                "                            +              text);         editText.setText(                "                "              ,              TextView              .              BufferType                              .EDITABLE);         conversationText              +=              text              +                              "                \n                "              ;         renderConversationHistory();     } }

---

Part Two: adding messaging to the app

Now that we've defined the UI for our messaging application, we can call Smooch's core messaging methods to add functionality.

1. Integrate Smooch

See this guide for adding the Smooch framework to your app. We've included a quick start here:

• in Gradle Scripts > build.gradle (Module: app) add the line implementation 'io.smooch:core:X.X.X' to dependencies
• click Sync Now to load the new dependency.

Now you'll have to create an Application class which we'll call CustomUiApp, and link it in manifests > AndroidManifest.xml with this entry under application android:name="<your_package_name>.CustomUiApp".

Now in the CustomUiApp class's onCreate method add the following init call to initialize Smooch:

              package              <your_package_name>;              import              android.app.Application;              import              io.smooch.core.Settings;              import              io.smooch.core.Smooch;              public              class              CustomUiApp              extends              Application              {              @Override              public              void              onCreate() {              super              .onCreate();              Smooch              .init(this,              new              Settings(                "<your_integration_id>"              ),              null);     } }

2. Send messages

When the user enters text input and presses Send we're going to send an app user message to Smooch.

In our sendMessage method in MainActivity replace this line that was logging our message:

              Log              .d(                "MainActivity"              ,                              "sendMessage:                "                            +              text);

with this line, sending the message:

              Smooch              .getConversation().sendMessage(new              Message(text));

The sendMessage method should now look like this:

              public              void              sendMessage(View              view) {              EditText              editText              =              findViewById(R              .id.editText);              String              text              =              editText.getText().toString();              Smooch              .getConversation().sendMessage(new              Message(text));     editText.setText(                "                "              ,              TextView              .              BufferType                              .EDITABLE);     conversationText              +=              text              +                              "                \n                "              ;     renderConversationHistory(); }

3. Display

Smooch exposes conversation delegate methods that allow you to capture incoming and outgoing messages as well as other events. We're going to use these methods to display new messages in our UI.

Before we star adding delegates we need to create a new method to write messages to our conversationText property. In MainActivity add a getMessages method:

              public              void              getMessages() {              List<Message>              messages;     conversationText              =                              "                "                            ;              for              (Message              message              :              messages              =              Smooch              .getConversation().getMessages()) {              String              text              =              !message.isFromCurrentUser()              ?              message.getName()              +                              "                says                "                            +              message.getText()              :              message.getText();         conversationText              +=              text              +                              "                \n                "              ;     } }

Now, we're going to implement the delegate in our MainActivity class with implements ConversationDelegate like so:

              public              class              MainActivity              extends              AppCompatActivity              implements              ConversationDelegate              {...}

Once you add that implementation the Android Studio IDE will give you the option of providing the methods required by them implementation. Add the required methods automatically. They are:

• onMessagesReceived
• onUnreadCountChanged
• onMessagesReset
• onMessageSent
• onConversationEventReceived
• onInitializationStatusChanged
• onLoginComplete
• onLogoutComplete
• onPaymentProcessed
• shouldTriggerAction
• onCardSummaryLoaded
• onSmoochConnectionStatusChanged
• onSmoochShown
• onSmoochHidden

We need to modify two of these delegate methods.

First, we should change shouldTriggerAction to return true instead of false, otherwise it will silently consume outgoing message actions. Change the method to be:

              public              boolean              shouldTriggerAction(MessageAction              messageAction) {              return              true; }

Second, we need to call our getMessages and renderConversationHistory methods in the onMessagesReceived delegate so that we update the UI when new messages are received. Add those calls like so:

              public              void              onMessagesReceived(Conversation              conversation,              List<Message>              list) {     getMessages();     renderConversationHistory(); }

Thirdly, we need to call our getMessages and renderConversationHistory methods in the onInitializationStatusChanged delegate so that we update the UI when the application starts. Add those calls like so:

              public              void              onInitializationStatusChanged(InitializationStatus              initializationStatus) {     getMessages();     renderConversationHistory(); }

Lastly, in the Activity onCreate method, we need to attach our MainActivity as the delegate to the Smooch conversation by adding this line:

              protected              void              onCreate(Bundle              savedInstanceState) {              ...              Smooch              .setConversationDelegate(MainActivity              .              this); }

Wrap up

You've created your own UI for the Smooch Android SDK. It should look something like this:

Now you might want to consider how you'll represent more complex messages and activities, such as:

• structured messages
• conversation extensions
• conversation activity

You can also follow these instructions for handling push notifications.

Squishable Custom Designer Android With New York Embroudery

Source: https://github.com/smooch/custom-smooch-android-ui

Share this post