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 avartar.

User Display name

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

Back button

Redirect 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 customise 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)
.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)

Compose bar Option

There are two compose bar options avaialble in the UIKit.

  1. AmityChatRoomComposeBar.DEFAULT : A compose bar with full functionalities including text, audio and, image message sending.

  2. AmityChatRoomComposeBar.TEXT : A compose bar with simple functionalities which only limited to text message sending.

By default the UIKit comes with AmityChatRoomComposeBar.DEFAULT

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