# Chatroom Page
%20\(1\).png?alt=media\&token=6b1d3a57-4e5a-4614-970b-27fa38a666a0)
## Message List Page Header
%20\(1\).png?alt=media\&token=b7cd0f0c-1e5d-48a7-89da-7f4b846246c6)
| 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
%20\(1\).png?alt=media\&token=46b81c9d-ddb4-4082-90af-750dc2bf4cf3)
| 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
%20\(1\).png?alt=media\&token=e17bd5e3-8d05-487d-87e6-60f29d1d4d30)
| 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
%20\(1\).png?alt=media\&token=f97ed6b9-2e52-4870-964d-330ec610a60e)
| 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)
```
