/ UIKit / Android View
UIKit
Chat UIKit Android View v3
Chat UIKit Android View
Chat UIKit
Android View
Version 3

Voice message

Copy link

Voice message is an alternate form of communication between users without sending a text or file message. By delivering voice messages, users can be more expressive with their tone and intentions. It also takes less time to record a voice message than type up a long message, which enhances efficiency for the sender. The receiver can also listen to the message at a convenient time while multi-tasking. The user can record and send a voice message in the input component of the group channel. Then, the message will appear in the message list component of the channel where the receiver can play the file.


Limitations

Copy link

The voice message feature currently has the following limitations:

  • Voice message is available for group channels and supergroup channels only.
  • Users must record for at least one second and up to and including ten minutes.
  • Users can't pause while recording a voice message.

How to use

Copy link

To turn on the feature, refer to the code below:

KotlinJava
UIKitConfig.groupChannelConfig.enableVoiceMessage = true

Send a voice message

Copy link

In order to send a voice message, users have to record a message first in the MessageInputComponent of ChannelModule. By default, a voice message icon is visible on the right side of the input field. Once this icon is tapped, the voice recorder appears. Users can record a message by tapping the red record button. They can select the cancel button to go back to the message input field or they can tap the send button to send the voice message. To listen to the preview of the voice message before sending it, users can tap the play button.

Voice message recorder

Copy link

When recording a voice message, the message must be at least one second long and shorter than ten minutes. Once you tap the stop button, you can't restart to continue recording. You must either cancel the recording and record again or just send what you've recorded so far. If the message is less than one second before tapping the stop button, the message won't be saved and you'll see the message input component with the red record button again. Once you've successfully recorded a voice message, you can listen to it before sending it to others. Pausing the recorded voice message while listening to it is allowed.

Customize the UI for voice message recorder

Copy link

You can customize the UI for voice message recorder in the MessageInputComponent of ChannelModule and the MessageThreadInputComponent of MessageThreadModule through the style resource and icon resource.

Style resource

Copy link

To customize the style of the voice message recorder, you have to change the UIKit-defined style values in the res/values/styles.xml file as shown below. To learn how to customize the style, refer to the style resource page.

<style name="Component.ChannelMessageInput">
    <item name="sb_message_input_voice_recorder_button_icon"></item>
    <item name="sb_message_input_voice_recorder_button_tint"></item>
    <item name="sb_message_input_voice_recorder_button_background"></item>
    <item name="sb_widget_voice_message_input_view"></item>
</style>

<style name="Component.MessageThreadInput">
    <item name="sb_message_input_voice_recorder_button_icon"></item>
    <item name="sb_message_input_voice_recorder_button_tint"></item>
    <item name="sb_message_input_voice_recorder_button_background"></item>
    <item name="sb_widget_voice_message_input_view"></item>
</style>

<style name="Widget.Sendbird.VoiceMessageInputView"></style>

Icon resource

Copy link

The following table shows customizable icons for the voice message recorder.

IconImageDescription

icon-voice-message-on

An icon used as a button to show the voice message recording view in the message input component.

icon_recording

An icon used as a record button start recording a voice message in the message input component.

icon-stop

An icon used as a stop button to stop recording a voice message in the message input component.

icon-play

An icon used as a play button to listen to a voice message recording in the message input component.

icon-pause

An icon used as a pause button to pause a voice message recording from playing in the message input component.


Receive a voice message

Copy link

You can receive voice messages in a group channel like any other messages sent between channel members. The voice message is shown in the MessageListComponent of ChannelModule and the ThreadListComponent of MessageThreadModule. You can only listen to one voice message at a time in the channel. If you try to play another message while listening to a message, the message that was playing first will pause.

Voice message in message list

Copy link

Members of a group channel can view and play voice messages by tapping the play button. They can also pause the message while listening and play it as many times as they wish to. However, users can only listen to voice messages within the client app and they can't save them to their devices.

The voice message feature can be used with reactions and message threading. Users can react to a voice message with various emojis and reply to the message in a thread as shown below. Voice messages can be used starting in UIKit v3.4.0 and in lower versions of the client app that don't provide this feature, all voice messages in a channel will appear and be recognized as an audio message. While voice messages can be played directly in the group channel, audio messages need to be played on an external app.

Note: In the voice message feature, the message resource uses meta array. In the meta array, the value of the KEY_INTERNAL_MESSAGE_TYPE key is set to voice message and the value of the KEY_VOICE_MESSAGE_DURATION key is set to the duration of the message. Since the feature uses these key-value pairs, if you make changes to the meta array, the voice message feature may not function properly.

Customize the UI for voice messages

Copy link

You can customize the UI for voice messages in the MessageListComponent of ChannelModule and the ThreadListComponent of MessageThreadModule through the style resource, string resource, and icon resource.

Style resource

Copy link

To customize the style of a voice message, you have to change the UIKit-defined style values in the res/values/styles.xml file as shown below. To learn how to customize the style, refer to the style resource page.

<style name="Component.List.Channel">
    <item name="sb_widget_my_voice_message"></item>
    <item name="sb_widget_other_voice_message"></item>
</style>
<style name="Component.List.MessageThread">
    <item name="sb_widget_my_voice_message"></item>
    <item name="sb_widget_other_voice_message"></item>
</style>

<style name="Widget.Sendbird.Message.Me.VoiceMessage"></style>
<style name="Widget.Sendbird.Message.Other.VoiceMessage"></style>

<style name="Widget.Sendbird.ParentMessageInfo">
    <item name="sb_parent_message_info_voice_message_progress_color"></item>
    <item name="sb_parent_message_info_voice_message_progress_track_color"></item>
    <item name="sb_parent_message_info_voice_message_timeline_text_appearance"></item>
</style>

String resource

Copy link

The text for a voice message in the channel list view can be customized through the string resource. The string resource is a set of strings used to compose a view. It's a res/strings.xml file containing UIKit-defined string values.

<resources>
    <string name="sb_text_voice_message">Voice message</string>
</resources>

Icon resource

Copy link
IconImageDescription

icon-play

An icon used as a play button to listen to a voice message recording in the message list component.

icon-pause

An icon used as a pause button to pause a voice message recording from playing in the message list component.