1 of 8

Chat UIKit

With our chat functionality in UIKit, you can find out how best to integrate and design messaging features and what they will look like in your app

Using as a whole feature with the default settings

This is the quickest way to start using the Chat feature , all the default logic and navigations have already been defined.

Usage

Chat home page

Chat home page shows a list of the most recent chats.

Start an Activity

val chatIntent  = Intent(this, AmityChatHomePageActivity::class.java)
startActivity(chatIntent)

Create a Fragment

class MainActivity : AppCompatActivity(), IRecentChatItemClickListener {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val chatHomeFragment = AmityChatHomePageFragment.Builder()
       /**
         * set the listener to override recentItem click event
         * No Need to implement [IRecentChatClickListener] if you don't want to override click event
         */
       .recentChatItemClickListener(this)
       .build(this)
       
        val transaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.fragmentContainer, chatHomeFragment)
        transaction.addToBackStack(null)
        transaction.commit()
   }
}

Using Only Some Components

There are many components that you can use and integrate into your existing application.

Limitation

UIKit provides already built UI elements in one page. You can change the appearances, such as color and typography in the global settings. However, UIKit does not allow you to replace these small components with other views. And you cannot modify the view hierarchy inside the page.

Chat Home Page

This page consists of one component in a single tab

Components

Recent chat

Usage

Create a Fragment

AmityChatHomePageFragment
           .newInstance()
           .build(activity)

Customize Components with Fragment Builder

A delegate can be passed to customize the components.

Recent Chat

This page shows a list of the most recent chats

Features

Usage

Create a Fragment

class MainActivity : AppCompatActivity(), IRecentChatItemClickListener {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

      val recentChatFragment = AmityRecentChatFragment.newInstance()
      /**
         * set the listener to override recentItem click event
         * No Need to implement [IRecentChatClickListener] if you don't want to override click event
         */
      .recentChatItemClickListener(this)
      .build(this)
        val transaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.fragmentContainer, recentChatFragment)
        transaction.addToBackStack(null)
        transaction.commit()
   }
}

Chatroom Page

This page is a chatroom.

Message List Page Header

Message List

Message bubble - Text message bubble

Message bubble - Image message bubble

Image Preview Page

Message Bubble - Audio Message Bubble

Audio message recorder

Edit Text Message Page

Usage

Start an Activity

If you don’t need to do any customisation other than global theme customisation, you can use our AmityMessageListActivity. Use the intent to move from one activity to the AmityChatHomePageActivity as follows:

//replace "channelId" with actual channelID
val messageIntent = AmityMessageListActivity.newIntent(this, "channelId")
startActivity(messageIntent)

Create a Fragment

If you need to customize the user interface, you can use our AmityChatRoomFragment.

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

        val chatRoomFragment = AmityChatRoomFragment
                                .newInstance("channelId")
                                .composeBar(AmityChatRoomComposeBar.TEXT)
                                .enableChatToolbar(boolean)
                                .enableConnectionBar(boolean)
                                .build(activity)
       
        val transaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.fragmentContainer, chatRoomFragment)
        transaction.addToBackStack(null)
        transaction.commit()
   }
}

Toolbar Option

We provide an ability to enable or disable Chatroom's toolbar by using enableChatToolbar(boolean) when initializing a fragment instance.

By default the UIKit comes with toolbar enabled.

AmityChatRoomFragment.newInstance(channelId)
            .enableChatToolbar(boolean)
            .build(this)

Connection Bar Option

We provide an ability to enable or disable Chatroom's connection bar by using enableConnectionBar(boolean) when initializing a fragment instance.

By default the UIKit comes with connection bar enabled.

AmityChatRoomFragment.newInstance(channelId)
            .enableConnectionBar(boolean)
            .build(this)

Compose bar Option

There are two compose bar options avaialble in the UIKit.

AmityChatRoomComposeBar.DEFAULT - has full functionalities including text, audio, and image message sending
AmityChatRoomComposeBar.TEXT - has simple functionalities which are only limited to text message sending

By default the UIKit comes with AmityChatRoomComposeBar.DEFAULT.

AmityChatRoomFragment.newInstance(channelId)
            .composeBar(AmityChatRoomComposeBar.TEXT)
            .build(this)

Using Your Own Component

UIKIT allows some parts of the component to be customized.

Message Bubble

UIKit allows all types of message bubble to be replaced

Text Message Bubble

Image Massage Bubble

Audio Message Bubble

Usage

To customize message bubble, implement AmityMessageListAdapter.CustomViewHolder and pass a custom ViewHolder for the corresponding message type.

class MainActivity : AppCompatActivity(), AmityMessageListAdapter.CustomViewHolder {


   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
       
        /**
         * Implement [AmityMessageListAdapter.CustomViewHolder] if customization is required for messageViews
         * set the customView listener using [AmityChatRoomFragment] instance
         */
       val chatRoomFragment = AmityChatRoomFragment
                                .newInstance("channelId")
                                .enableChatToolbar(boolean)
                                .customViewHolder(this)
                                .build(this)
        
        val transaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.fragmentContainer, messageListFragment)
        transaction.addToBackStack(null)
        transaction.commit()
   }
}

Override method getViewHolder() to pass a custom ViewHolder

override fun getViewHolder(
        inflater: LayoutInflater,
        parent: ViewGroup,
        viewType: Int
    ): AmityChatMessageBaseViewHolder? {
        return when(viewType) {
            MessageType.MESSAGE_ID_TEXT_RECEIVER -> TextReceiverViewHolder(
                inflater.inflate(R.layout.custom_item_text_receiver, parent, false), EkoChatMessageBaseViewModel())
            MessageType.MESSAGE_ID_TEXT_SENDER -> TextSenderViewHolder(
                inflater.inflate(R.layout.custom_item_text_sender, parent, false), EkoChatMessageBaseViewModel()
            )
            //pass null for all the types where no customisation is required
            //Default UIKIT Ui will be rendered for all those types
            else -> null
        }
    }

Chatroom Page

This page is a chatroom.

Message List Page Header

Message List

Message bubble - Text message bubble

Message bubble - Image message bubble

Image Preview Page

Message Bubble - Audio Message Bubble

Audio message recorder

Edit Text Message Page

Usage

Start an Activity

//replace "channelId" with actual channelID
val messageIntent = AmityMessageListActivity.newIntent(this, "channelId")
startActivity(messageIntent)

Create a Fragment

If you need to customize the user interface, you can use our AmityChatRoomFragment.

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

        val chatRoomFragment = AmityChatRoomFragment
                                .newInstance("channelId")
                                .composeBar(AmityChatRoomComposeBar.TEXT)
                                .enableChatToolbar(boolean)
                                .enableConnectionBar(boolean)
                                .build(activity)
       
        val transaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.fragmentContainer, chatRoomFragment)
        transaction.addToBackStack(null)
        transaction.commit()
   }
}

Toolbar Option

We provide an ability to enable or disable Chatroom's toolbar by using enableChatToolbar(boolean) when initializing a fragment instance.

By default the UIKit comes with toolbar enabled.

AmityChatRoomFragment.newInstance(channelId)
            .enableChatToolbar(boolean)
            .build(this)

Connection Bar Option

We provide an ability to enable or disable Chatroom's connection bar by using enableConnectionBar(boolean) when initializing a fragment instance.

By default the UIKit comes with connection bar enabled.

AmityChatRoomFragment.newInstance(channelId)
            .enableConnectionBar(boolean)
            .build(this)

Compose bar Option

There are two compose bar options avaialble in the UIKit.

AmityChatRoomComposeBar.DEFAULT - has full functionalities including text, audio, and image message sending
AmityChatRoomComposeBar.TEXT - has simple functionalities which are only limited to text message sending

By default the UIKit comes with AmityChatRoomComposeBar.DEFAULT.

AmityChatRoomFragment.newInstance(channelId)
            .composeBar(AmityChatRoomComposeBar.TEXT)
            .build(this)

Message Bubble

UIKit allows all types of message bubble to be replaced

Text Message Bubble

Image Massage Bubble

Audio Message Bubble

Usage

To customize message bubble, implement AmityMessageListAdapter.CustomViewHolder and pass a custom ViewHolder for the corresponding message type.

class MainActivity : AppCompatActivity(), AmityMessageListAdapter.CustomViewHolder {


   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
       
        /**
         * Implement [AmityMessageListAdapter.CustomViewHolder] if customization is required for messageViews
         * set the customView listener using [AmityChatRoomFragment] instance
         */
       val chatRoomFragment = AmityChatRoomFragment
                                .newInstance("channelId")
                                .enableChatToolbar(boolean)
                                .customViewHolder(this)
                                .build(this)
        
        val transaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.fragmentContainer, messageListFragment)
        transaction.addToBackStack(null)
        transaction.commit()
   }
}

Override method getViewHolder() to pass a custom ViewHolder

override fun getViewHolder(
        inflater: LayoutInflater,
        parent: ViewGroup,
        viewType: Int
    ): AmityChatMessageBaseViewHolder? {
        return when(viewType) {
            MessageType.MESSAGE_ID_TEXT_RECEIVER -> TextReceiverViewHolder(
                inflater.inflate(R.layout.custom_item_text_receiver, parent, false), EkoChatMessageBaseViewModel())
            MessageType.MESSAGE_ID_TEXT_SENDER -> TextSenderViewHolder(
                inflater.inflate(R.layout.custom_item_text_sender, parent, false), EkoChatMessageBaseViewModel()
            )
            //pass null for all the types where no customisation is required
            //Default UIKIT Ui will be rendered for all those types
            else -> null
        }
    }