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
Read more mode.	When the text is more than 13 lines, the system show read more mode. Once it is clicked on the read more button, it expands text to the full size.
Long press to delete	If the long click event occurs, the system will show the delete option.
Long press to edit	If the long click event occurs, the system will show the edit option. When click the edit option, the system will redirect the user to the edit message page.
Error to send message indicator	If the message can not be sent, the system will show the error indicator in front of the message bubble.
Sent time stamp	Show as time stamp HH :MM
Edited label	If the message is edited , the edited label will be shown.
Deleted message	If the message is deleted , the deleted view will be shown.

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.

1. AmityChatRoomComposeBar.DEFAULT - has full functionalities including text, audio, and image message sending

2. 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)