Attachment Gallery Activity

LAST EDIT Feb 17 2021

AttachmentGalleryActivity is an Activity used to display attachments that the users have sent in the chat. It is an image gallery where users can see the pictures, share, download, and use a menu to navigate through the pictures.

AttachmentGalleryActivity showing a screen shot.

Handling user inputCopied!

There are 4 behaviours that can be customized by the following handlers:

  • AttachmentGalleryActivity.AttachmentReplyOptionHandler

  • AttachmentGalleryActivity.AttachmentShowInChatOptionHandler

  • AttachmentGalleryActivity.AttachmentDownloadOptionHandler

  • AttachmentGalleryActivity.AttachmentDeleteOptionHandler

The next section shows how to implement the listeners and inject the desired behaviour.

Navigating to Attachment GalleryCopied!

There are two ways to navigate to this screen.

  1. It will be opened from Message List View when a user clicks on an attachment (an image, for example).

  2. It can be called from the client-side using AttachmentGalleryDestination.

The MessageListView already calls the AttachmentGalleryActivity and the click handlers can be set using MessageListView, using setAttachmentReplyOptionClickHandler, setAttachmentShowInChatOptionClickHandler, setDownloadOptionHandler and setAttachmentDeleteOptionClickHandler.

There is no need for specific code to navigate to AttachmentGalleryActivity, just set the handlers mentioned above to change the default behaviour. The next section shows how to navigate to Attachment Gallery from anywhere.

To use AttachmentGalleryDestination, you need to to implement the click handlers of the buttons in its overflow menu (the three dots).

  • AttachmentReplyOptionHandler

  • AttachmentShowInChatOptionHandler

  • AttachmentDownloadOptionHandler

  • AttachmentDeleteOptionHandler

Here's how you set those when creating the destination:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
val destination = AttachmentGalleryDestination( 
    requireContext(), 
    attachmentReplyOptionHandler = { resultItem -> 
        // Handle reply 
    }, 
    attachmentShowInChatOptionHandler = { resultItem -> 
        // Handle show image in chat 
    }, 
    attachmentDownloadOptionHandler = { resultItem -> 
        // Handle download image 
    }, 
    attachmentDeleteOptionClickHandler = { resultItem -> 
        // Handle delete image 
    }, 
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
AttachmentGalleryDestination destination = new AttachmentGalleryDestination( 
        getContext(), 
        resultItem -> { 
            // Handle reply 
        }, 
        resultItem -> { 
            // Handle show in chat 
        }, 
        resultItem -> { 
            // Handle download image 
        }, 
        resultItem -> { 
            // Handle delete image 
        });

Then, you need to register the destination with the ActivityResultRegistry and set the data to display:

1
2
3
4
5
6
7
val attachmentGalleryItems: List<AttachmentGalleryItem> = listOf() 
 
activity?.activityResultRegistry?.let { registry -> 
    destination.register(registry) 
} 
 
destination.setData(attachmentGalleryItems, 0)
1
2
3
4
List<AttachmentGalleryItem> attachmentGalleryItems = new ArrayList(); 
 
destination.register(getActivity().getActivityResultRegistry()); 
destination.setData(attachmentGalleryItems, 0);

As the last step, fire the navigation request:

1
ChatUI.instance().navigator.navigate(destination)
1
ChatUI.instance().getNavigator().navigate(destination);