TapTalk.io Documentation
  • Introduction
  • OneTalk Omnichannel Documentation
    • Getting Started with OneTalk
      • Team Members
      • Add Topic
      • Assign Agent to Topic
      • Paid Proactive Chat
    • Channel Integration
      • Telegram Integration
      • WhatsApp SME Integration
      • Instagram DM Integration
      • Facebook Messenger Integration
      • Live Chat Integration (iOS, Android, Web)
        • OneTalk Live Chat for Android
          • Get Started
          • Event Listener
          • Authentication
          • Case & Topic
          • Navigate Live Chat UI
          • Customize UI Appearance
        • OneTalk Live Chat for iOS
          • Get Started
          • Background Process in TapTalk.io Omnichannel iOS
          • Event Delegate
          • Authentication
          • Case & Topic
          • Navigate Live Chat UI
          • Customize UI Appearance
        • OneTalk Live Chat for Web
          • Get Started
          • Callback
          • Method
        • OneTalk Live Chat for React Native
          • Get Started - Android
          • Authentication - Android
          • Get Started - iOS
          • Authentication - iOS
        • OneTalk Live Chat for Flutter
          • Get Started - Android
          • Get Started - iOS
      • Google Business Messages Integration
      • Google Business Profile Integration
      • Tokopedia Integration
    • Integration API
      • Inbox API
      • User/Contact API
    • Live Chat Widget Callback Function
    • Social Channel Button
    • Custom Chatbot Integration
      • Get Started
      • Edit or Delete Chatbot
      • Development
    • QnA via API
    • Webhook
  • PowerTalk Chat SDK Documentation
    • Getting Started with PowerTalk
    • PowerTalk Android
      • Get Started
      • Enable Chat Features
      • Authentication
      • TapUI and TapCore
      • Background Process in TapTalk.io
      • Connection
      • Event Listener
      • Push Notification
      • General
      • User
      • Room List
        • Room List - TapUI
        • Room List - TapCore
      • Chat Room and Messages
        • Chat Room and Messages - TapUI
        • Chat Room and Messages - TapCore
      • Contact
      • Message Type
      • Customize UI Appearance
      • Customize Chat Features
      • Customize Chat Message Bubble
      • Customize Navigation Bar
      • Deep Linking
      • Error Codes
    • PowerTalk iOS
      • Get Started
      • TapUI and TapCore
      • Background Process in TapTalk.io
      • Implement Application Delegate
      • Authentication
      • Connection
      • Event Delegate
      • Push Notification
      • General
      • User
      • Room List
        • Room List - TapUI
        • Room List - TapCore
      • Chat Room and Messages
        • Chat Room and Messages - TapUI
        • Chat Room and Messages - TapCore
      • Contact
      • Message Type
      • Customize UI Appearance
      • Customize Chat Features
      • Customize Chat Message Bubble
      • Customize Navigation Bar
      • Deep Linking
      • Error Codes
    • PowerTalk React Native
      • Get Started - Android
      • Get Started - iOS
    • PowerTalk Flutter
      • Get Started - Android
      • Get Started - iOS
    • Javascript SDK
      • Get Started
      • Authentication
      • Connection
      • General
      • Event Listener
      • User
      • Room List
      • Chat Room
      • Messages
      • Contact
      • Message Type
    • Server API
      • Get Started
      • Base URL
      • Authentication
      • User
      • Contact
      • Message
      • Room
    • Webhook
      • Get Started
      • Webhook Payload
  • MeetTalk SDK Documentation
    • Getting Started with MeetTalk
    • MeetTalk Android
      • Get Started
      • Event Listener
    • MeetTalk iOS
      • Get Started
      • Implement Application Delegate
      • Event Delegate
  • SendTalk API Documentation
    • Introduction
    • Whatsapp Verification
Powered by GitBook
On this page
  • Adding a Custom Chat Bubble
  • Showing Your Custom Bubble in Chat

Was this helpful?

  1. PowerTalk Chat SDK Documentation
  2. PowerTalk Android

Customize Chat Message Bubble

When TapTalk.io framework is integrated to your app with the UI implementation method, you can add customized chat message bubbles to be used in chat.

Adding a Custom Chat Bubble

You can check the following example to add a custom bubble to your chat.

Note: To add a custom bubble, you need to implement recyclerView dependency to your app-level build.gradle file.

implementation 'com.android.support:recyclerview-v7:28.0.0'

1. Create an XML layout file for the custom bubble

First, create a new XML layout resource file for your custom bubble, we will name it my_custom_bubble_layout.xml. You are free to customize the custom bubble layout as you wish. In this example, we will be using a simple image and text bubble.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="8dp"
    android:background="@color/tapWhite">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintTop_toTopOf="parent" />
    
    <!--We are using TapTalk'io's default message body style for this TextView-->
    <TextView
        android:id="@+id/textView"
        style="@style/tapLeftBubbleMessageBodyStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp"
        app:layout_constraintTop_toBottomOf="@id/imageView"
        tools:text="Message body" />

</android.support.constraint.ConstraintLayout>

Note: TapTalk.io's default message bubble layouts generally have a 8dp bottom margin and no top margin.

2. Create a custom listener

In order to listen to event callbacks that happens in your custom bubble, we will create a custom interface that extends TapTalkBaseCustomInterface. We will name this interface MyCustomBubbleListener.

import io.taptalk.TapTalk.Interface.TapTalkBaseCustomInterface;
import io.taptalk.TapTalk.Model.TAPMessageModel;

...

public interface MyCustomBubbleListener extends TapTalkBaseCustomInterface {

    // Use this to notify that the user tapped your custom bubble
    void onBubbleTapped(TAPMessageModel message);
}
import io.taptalk.TapTalk.Interface.TapTalkBaseCustomInterface
import io.taptalk.TapTalk.Model.TAPMessageModel

...

interface MyCustomBubbleListener : TapTalkBaseCustomInterface {

    // Use this to notify that the user tapped your custom bubble
    fun onBubbleTapped(message: TAPMessageModel)
}

3. Create a custom bubble ViewHolder

To display your custom bubble layout in a chat room, you will need to create a custom ViewHolder that extends TAPBaseChatViewHolder. We will name this class MyCustomBubbleViewHolder.

import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import io.taptalk.TapTalk.Model.TAPMessageModel;
import io.taptalk.TapTalk.View.Adapter.TAPBaseChatViewHolder;

public class MyCustomBubbleViewHolder extends TAPBaseChatViewHolder {

    private ImageView imageView;
    private TextView textView;

    private MyCustomBubbleListener listener; // The listener that you just created above will be used here

    // Add MyCustomBubbleListener to the constructor parameter
    MyCustomBubbleViewHolder(ViewGroup parent, int itemLayoutId, MyCustomBubbleListener listener) {
        super(parent, itemLayoutId);

        // Bind views on constructor
        imageView = itemView.findViewById(R.id.imageView);
        textView = itemView.findViewById(R.id.textView);

        // Pass the listener from parameter
        this.listener = listener;
    }

    @Override
    protected void onBind(TAPMessageModel message, int index) {
        super.onBind(message, index);

        // Set message text
        textView.setText(message.getBody());

        // Set click listener
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Trigger listener and pass the clicked message
                listener.onBubbleTapped(message);
            }
        });
    }
}
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import io.taptalk.TapTalk.Model.TAPMessageModel
import io.taptalk.TapTalk.View.Adapter.TAPBaseChatViewHolder

class MyCustomBubbleViewHolder internal constructor(
    parent: ViewGroup,
    itemLayoutId: Int,
    private val listener: MyCustomBubbleListener
) : TAPBaseChatViewHolder(parent, itemLayoutId) {

    private val imageView: ImageView = itemView.findViewById(R.id.imageView)
    private val textView: TextView = itemView.findViewById(R.id.textView)

    override fun onBind(message: TAPMessageModel?, index: Int) {
        super.onBind(message, index)
          
        // Set message text
        textView.text = message!!.body
          
        // Pass the listener from parameter
        imageView.setOnClickListener { 
            // Trigger listener and pass the clicked message
            listener.onBubbleTapped(message)
        }
    }
}

4. Create a custom bubble class

Using all the things you have created above, we will create a custom bubble class that extends TAPBaseCustomBubble. This class instance will then be added to the custom bubble list.

import android.view.ViewGroup;

import io.taptalk.TapTalk.Helper.TAPBaseCustomBubble;
import io.taptalk.TapTalk.Model.TAPUserModel;
import io.taptalk.TapTalk.View.Adapter.TAPMessageAdapter;

public class MyCustomBubbleClass extends TAPBaseCustomBubble<MyCustomBubbleViewHolder, MyCustomBubbleListener> {

    public MyCustomBubbleClass(int customBubbleLayoutRes, int messageType, MyCustomBubbleListener listener) {
        super(customBubbleLayoutRes, messageType, listener);
    }

    @Override
    public MyCustomBubbleViewHolder createCustomViewHolder(ViewGroup viewGroup, TAPMessageAdapter tapMessageAdapter, TAPUserModel tapUserModel, MyCustomBubbleListener listener) {
        return new MyCustomBubbleViewHolder(viewGroup, getCustomBubbleLayoutRes(), listener);
    }
}
import android.view.ViewGroup

import io.taptalk.TapTalk.Helper.TAPBaseCustomBubble
import io.taptalk.TapTalk.Model.TAPUserModel
import io.taptalk.TapTalk.View.Adapter.TAPMessageAdapter

class MyCustomBubbleClass(
    customBubbleLayoutRes: Int,
    messageType: Int,
    listener: MyCustomBubbleListener
) : TAPBaseCustomBubble<MyCustomBubbleViewHolder, MyCustomBubbleListener>(
    customBubbleLayoutRes,
    messageType,
    listener
) {

    override fun createCustomViewHolder(
        viewGroup: ViewGroup,
        tapMessageAdapter: TAPMessageAdapter,
        tapUserModel: TAPUserModel,
        listener: MyCustomBubbleListener
    ): MyCustomBubbleViewHolder {
        return MyCustomBubbleViewHolder(viewGroup, customBubbleLayoutRes, listener)
    }
}

5. Add your custom bubble class

To add your custom bubble to TapTalk.io, use the TapUI class and call the addCustomBubble() method. This is typically done in your Application class, after init() has already been called.

import io.taptalk.TapTalk.Helper.TapTalk;
import io.taptalk.TapTalk.Manager.TapUI;
import io.taptalk.TapTalk.Model.TAPMessageModel;

...

TapTalk.init(...);

// Insert the XML layout resource, message type, and your custom listener as parameter
TapUI.getInstance().addCustomBubble(new MyCustomBubbleClass(
    R.layout.my_custom_bubble_layout,
    3001,
    new MyCustomBubbleListener() {
        @Override
        public void onBubbleTapped(TAPMessageModel message) {
            // My custom bubble was tapped by user
        }
    }
));
import io.taptalk.TapTalk.Helper.TapTalk
import io.taptalk.TapTalk.Manager.TapUI
import io.taptalk.TapTalk.Model.TAPMessageModel

...

TapTalk.init(...)

// Insert the XML layout resource, message type, and your custom listener as parameter
TapUI.getInstance().addCustomBubble(MyCustomBubbleClass(
    R.layout.my_custom_bubble_layout,
    3001,
    object : MyCustomBubbleListener() {
        fun onBubbleTapped(message: TAPMessageModel) {
            // My custom bubble was tapped by user
        }
    }
))

After completing all the steps above, your custom bubble will be ready to use.

Showing Your Custom Bubble in Chat

You can use your customized chat bubble in a chat room by constructing a custom TAPMessageModel with constructTapTalkMessageModel() method, then sending the constructed message to the chat room with sendCustomMessage(). Both methods can be accessed from the TapCoreMessageManager class.

Below is an example to send a custom message with the steps mentioned above.

import io.taptalk.TapTalk.Manager.TapCoreMessageManager;
import io.taptalk.TapTalk.Manager.TapCoreChatRoomManager;
import io.taptalk.TapTalk.Listener.TapCoreGetRoomListener;
import io.taptalk.TapTalk.Listener.TapCoreSendMessageListener;
import io.taptalk.TapTalk.Model.TAPMessageModel;
import io.taptalk.TapTalk.Model.TAPRoomModel;

...

// First, we will retrieve a TAPRoomModel required to construct a message
TapCoreChatRoomManager.getInstance().getPersonalChatRoom(RECIPIENT_USER, new TapCoreGetRoomListener() {
    @Override
    public void onSuccess(TAPRoomModel room) {
        // Retrieved room data successfully, we will use this room to construct a TAPMessageModel
        TAPMessageModel customBubbleMessage = TapCoreMessageManager.getInstance().constructTapTalkMessageModel(
            "This is a custom message", // MESSAGE_BODY
            room,                       // ROOM
            3001,                       // MESSAGE_TYPE
            null                        // MESSAGE_DATA
        );
      
        // We will then send the constructed message to its corresponding chat room
        TapCoreMessageManager.getInstance().sendCustomMessage(customBubbleMessage, new TapCoreSendMessageListener() {
            @Override
            public void onSuccess(TAPMessageModel message) {
                // Custom message was sent successfully
            }

            @Override
            public void onError(String errorCode, String errorMessage) {
                
            }
        });
    }
});
import io.taptalk.TapTalk.Manager.TapCoreMessageManager
import io.taptalk.TapTalk.Manager.TapCoreChatRoomManager
import io.taptalk.TapTalk.Listener.TapCoreGetRoomListener
import io.taptalk.TapTalk.Listener.TapCoreSendMessageListener
import io.taptalk.TapTalk.Model.TAPMessageModel
import io.taptalk.TapTalk.Model.TAPRoomModel

...

// First, we will retrieve a TAPRoomModel required to construct a message
TapCoreChatRoomManager.getInstance().getPersonalChatRoom(RECIPIENT_USER, object : TapCoreGetRoomListener() {
    override fun onSuccess(room: TAPRoomModel?) {
        // Retrieved room data successfully, we will use this room to construct a TAPMessageModel
        val customBubbleMessage = TapCoreMessageManager.getInstance().constructTapTalkMessageModel(
            "This is a custom message", // MESSAGE_BODY
            room!!,                     // ROOM
            3001,                       // MESSAGE_TYPE
            null                        // MESSAGE_DATA
        )
      
        // We will then send the constructed message to its corresponding chat room
        TapCoreMessageManager.getInstance().sendCustomMessage(customBubbleMessage, object : TapCoreSendMessageListener() {
            override fun onSuccess(message: TAPMessageModel?) {
                // Custom message was sent successfully
            }

            override fun onError(errorCode: String?, errorMessage: String?) {
                
            }
        })
    }
})
PreviousCustomize Chat FeaturesNextCustomize Navigation Bar

Last updated 1 month ago

Was this helpful?

Note: Please note that the message type for custom bubbles should start with 3 as the prefix. For more information, check the .

To construct a message, you are required to have a TAPRoomModel as a parameter. You can use getPersonalChatRoom() or method in TapCoreChatRoomManager class to obtain a chat room model.

message type page
my_custom_bubble_layout.xml
getGroupChatRoom()