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.

Method

Description

recentChatFragmentDelegate

Fragment delegation for AmityRecentChatFragment

Recent Chat

This page shows a list of the most recent chats.

Features

Feature

Description

Recent chat list

User can see a list of the most recent chats.

Navigation to Message list

When a user clicks a chat, UIKit opens a chatroom page.

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

Feature

Description

User avartar

If the user has no avatar, the system will show the default avatar.

User Display name

If the user has no display name, the default display name will be 'anonymous'.

Back button

Redirects user back to the previous page.

Message List

Feature

Description

Show list of message

The latest message bubble will be on the bottom of the screen, and the user can scroll up to see all messages.

Date label

Grouping messages by the sent date.

Message bubble - Text message bubble

Feature

Description

Message bubble - Image message bubble

Feature

Description

Image thumbnails

The system shows the image base on the image ratio. Once it is clicked, it will redirect the user to the edit message page.

Image upload state

The system will show the image uploading indicator while the image is being uploaded.

Image Preview Page

Feature

Description

Pinch zoom gesture

The user can pinch the screen to zoom in or out the image.

back

Redirect user back to the previous page.

Message Bubble - Audio Message Bubble

Feature

Description

Click to play

If the user clicks on the voice message , the system will play the audio.

Click to stop

If the user clicks on the playing voice message or play another voice message, the system will stop playing the playing audio.

Audio message recorder

Feature

Description

Hold to record

The user can hold to record an audio message for up to 60 seconds. Once the user releases the finger, the system will send the audio message.

Discard the record

The user can drag the finger to the bin button to discard the current recording session.

Edit Text Message Page

Feature

Description

Add text

The user can update the text from the original input.

Save

The user can click save button to save the changes he made.

Discard change

The user can click 'x' to discard all changes before the user clicks save.

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