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

File sharing

Copy link

File sharing is a feature that allows users to send files during a chat, such as images, audio files, and videos. File sharing appears in the MessageListComponent of the ChannelModule or OpenChannelModule.


Group channel

Copy link

There are currently four types of file messages that users can send: image file, video file, audio file, and document file. These files can be shared with other members in the channel by either directly taking a photo with the camera on a mobile device or uploading an image, video, audio, or document file from the sender’s mobile device. These file messages can contain a single file with one of the supported types or a group of image files.

Note : In order to use the file sharing feature, you must first create a channel and enable the chat service. To learn how to allow users to chat in a channel, refer to the Chat in a group channel page.

Customize the UI for file sharing

Copy link

You can customize the UI for file sharing using style resource and icon resource. Use the same resources for multiple files messages.

Style resource

Copy link

To customize the style of channel items, 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 Style resource.

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

Icon resource

Copy link

The following table shows customizable file sharing icons.

Icon nameImageDescription

icon_add

An icon used to select and add files.

icon_document

An icon used to select a file to send.

icon_file_audio

An icon indicating an audio file message.

icon_file_document

An icon indicating a document file message.

icon_gif

An icon indicating a GIF, the Graphics Interchange Format, file message.

icon_play

An icon indicating a video file message.

Image compression

Copy link

UIKit for Android allows users to compress images when sending them to other users in the channel on a client app. By reducing the image size, they can send and receive image files faster and minimize the usage of data storage as well as the data usage. Image compression can be applied to both file message and multiple files messages. The following image types are supported: jpg, jpeg, and png.

The following table lists methods in the SendbirdUIKit instance that are related to image compression.

List of methods

Copy link
MethodDescription

setUseImageCompression(boolean)

Determines whether to compress the image when sending an image file message. This method only applies to the following image types: image/jpg, image/jpeg, and image/png. (Default: true)

shouldUseImageCompression()

Retrieves the set value of setUseImageCompression(boolean) on whether the image should be compressed when sending it as an image file message.

setCompressQuality()

Sets the value of the compression rate to apply to the image. Acceptable values are 0 to 100, inclusive. (Default: 70)

getCompressQuality()

Retrieves the set value of the compression rate to apply to the image.

setResizingSize()

Sets the new width and height to apply to the image. The given value is shown in the order of the width first, then the height. (Default: 1080x1920)

* When displaying the compressed image as a thumbnail, the value of the new width and height will be halved. The minimum value for the compressed thumbnail is 100x100.

getResizingSize()

Retrieves the resized width and height to apply to the image.

kotlinJava
// To determine whether to compress an image
SendbirdUIKit.setUseImageCompression(true)
// The default value changed from false to true starting in v3.3.2.
val useImageCompression = SendbirdUIKit.shouldUseImageCompression()

// To set a compression rate value
SendbirdUIKit.setCompressQuality(50)
// The default value changed from 100 to 70 starting in v3.3.2.
val compressQuality = SendbirdUIKit.getCompressQuality()

// To resize an image
SendbirdUIKit.setResizingSize(Pair(1080, 1920))
val resizingSize = SendbirdUIKit.getResizingSize()

Note: To compress an image without changing the width and height, use the setCompressQuality() method. To resize the width and height of an image, use the setResizingSize() method.

Multiple files message

Copy link

Users can share multiple images and videos in a single message using the multiple files message type. UIKit for Android supports this functionality with the same UI resources and image compression used for single file messages.

Requirements

Copy link

Make sure that your client app uses the latest version of the Chat SDK and UIKit to properly use multiple files messages.

  • Sendbird Chat SDK v4.9.0 or later
  • Sendbird UIKit v3.5.7 or later

Depending on the version of the SDKs, multiple files messages can't be drawn in the view. For example, if a client app uses the latest Chat SDK but the UIKit lower than v3.5.7, the UIKit can't read type of a multiple files message and the message will be treated as an UnknownMessage. If the message contained both video and image files, the video files are sent as individual file messages while the image files appear as a single unknown message.

If the client app uses the Chat SDK and UIKit that don't support multiple files messages, only one file is drawn in the view as a single file message. The file that appears may vary depending on the device's OS version.

Settings

Copy link

By default, multiple files messages are turned off for UIKit. In order to display them, enable the feature through its setter in UIKitConfig.

kotlinJava
UIKitConfig.groupChannelConfig.enableMultipleFilesMessage = true

You can also configure the settings by group channel through ChannelConfig setter in ChannelFragment.

kotlinJava
val fragment = ChannelFragment.Builder(CHANNEL_URL)
    .setChannelConfig(
        UIKitConfig.groupChannelConfig.clone().apply {
            this.enableMultipleFilesMessage = true
        }
    )
    .build()

By default, the UIKit allows up to ten files per message, 25MB per file. To adjust the number of file attachments, contact our Sales team and set multiple_file_send_max_size to a higher or lower number. Between the UIKit's default settings and the multiple_file_send_max_size value, the lower number is set as the maximum number of files allowed for multiple files messages.

UI for message senders

Copy link

A user can select multiple image or video files from their gallery. When the user selects both images and videos simultaneously, the image thumbnails are grouped together in the UI, while video files are shared individually.

Note: The files are sorted by the OS' photo picker on the device.

If one of the files fails to send, the message is marked as failed. As auto resend isn't supported for multiple files messages, add a resend() option to the long-tab menu to allow the message sender to retry sending the message.

UI for recipients

Copy link

For those who receive multiple files messages, the image thumbnails are grouped together in the UI, while video files appear individually.

A short-tab on the image or video file can show the file preview and a download button for individual files. For a long tab, display a menu list that includes reaction emojis, a delete button, and a reply button.


Open channel

Copy link

There are currently four types of file messages that users can send: image file, video file, audio file, and document file. These files can be shared with other participants in the channel by either directly taking a photo with the camera on a mobile device or uploading an image, video, audio, or document file from the sender’s mobile device.

Note : In order to use the file sharing feature, you must first create a channel and enable chat service. To learn how to allow users to chat in a channel, refer to Chat in open channel.

Customize the UI for file sharing

Copy link

You can customize the UI for file sharing using Style resource and Icon resource.

Style resource

Copy link

To customize the style of channel items, 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 Style resource.

<style name="Widget.Sendbird.OpenChannel.Message.File">
</style>

Icon resource

Copy link

The following table shows customizable file sharing icons.

Icon nameImageDescription

icon_add

An icon used to select and add files.

icon_document

An icon used to select a file to send.

icon_file_audio

An icon indicating an audio file message.

icon_file_document

An icon indicating a document file message.

icon_gif

An icon indicating a GIF, the Graphics Interchange Format, file message.

icon_play

An icon indicating a video file message.

Image compression

Copy link

UIKit for Android allows users to compress images when sending them to other users in the channel on a client app. By reducing the image size, they can send and receive image files faster and minimize the usage of data storage as well as the data usage. Image compression can be applied to the following image types: jpg, jpeg, and png.

The following table lists methods in the SendbirdUIKit instance that are related to image compression.

List of methods

Copy link
MethodDescription

setUseImageCompression()

Determines whether to compress the image when sending an image file message. This method only applies to the following image types: image/jpg, image/jpeg, and image/png. (Default: true)

shouldUseImageCompression()

Retrieves the set value of setUseImageCompression() on whether the image should be compressed when sending it as an image file message.

setCompressQuality()

Sets the value of the compression rate to apply to the image. Acceptable values are 0 to 100, inclusive. (Default: 70)

getCompressQuality()

Retrieves the set value of the compression rate to apply to the image.

setResizingSize()

Sets the new width and height to apply to the image. The given value is shown in the order of the width first, then the height. (Default: 1080x1920)

* When displaying the compressed image as a thumbnail, the value of the new width and height will be halved. The minimum value for the compressed thumbnail is 100x100.

getResizingSize()

Retrieves the resized width and height to apply to the image.

KotlinJava
// To determine whether to compress an image
SendbirdUIKit.setUseImageCompression(true)
// The default value changed from false to true starting in v3.3.2.
val useImageCompression = SendbirdUIKit.shouldUseImageCompression()

// To set a compression rate value
SendbirdUIKit.setCompressQuality(50)
// The default value changed from 100 to 70 starting in v3.3.2.
val compressQuality = SendbirdUIKit.getCompressQuality()

// To resize an image
SendbirdUIKit.setResizingSize(Pair(1080, 1920))
val resizingSize = SendbirdUIKit.getResizingSize()

Note: To compress an image without changing the width and height, use the setCompressQuality() method. To resize the width and height of an image, use the setResizingSize() method.