Attachment

Attachment

Attachment is a feature that allows users to send images,videos and documents. Attachment appears in the message input field region of the FlyChatFragment class.

In MirrorFly UIKit for Android, there are currently three type of file messages that users can send : image, video and documents. These attachment files can be shared with other members in the single chat or group chat from the sender’s mobile device.

Gallery select option available in the attachment

Image and Video Attachment

Documents Attachment

Customize the UI for Image and video Preview Screen

Preview screen regions

Region	Description
Header	Acts as an ActionBar in the activity. By default, it displays the back navigation button, preview name text, as well as two buttons on the left and right, which are all customizable. If the left button is clicked, the finish() method of the activity will be called to take the user to the media picker of the MeidaPickerActivity. If the right button is clicked, current image in the screen will be deleted
ViewPager	UIKit provides swipe option to see the selected imges.
Caption(Message) input field	Enables users to send a image with caption message which are all customizable

Image Preview Screen

Video Post Preview Screen

The following are the image and video preview screen AppBar style and attributes for customizations.

<style name="Custom" parent="MirrorFly">

<item name="mf_appbar_style">@style/CustomAppBar</item>

</style>

<style name="CustomAppBar" parent="Widget.MirrorFly.AppBar">

<item name="android:background"></item>

<item name="mf_appbar_title_appearance"></item>

<item name="mf_appbar_description_appearance"></item>

<item name="mf_appbar_button_tint"></item>

<item name="mf_appbar_divider_color"></item>

<item name="mf_appbar_left_button_text_appearance"></item>

<item name="mf_appbar_left_button_text_color"></item>

<item name="mf_appbar_left_button_tint"></item>

<item name="mf_appbar_left_button_background"></item>

<item name="mf_appbar_right_button_text_appearance"></item>

<item name="mf_appbar_right_button_text_color"></item>

<item name="mf_appbar_right_button_tint"></item>

<item name="mf_appbar_right_button_background"></item>

</style>

List of attributes of Widget.MirrorFly.AppBar

Attribute	Resource type	Description
android:background	drawable/color	The background of the header.
mf_appbar_title_appearance	text appearance	The text size, color, font, and style of the header title.
mf_appbar_description_appearance	text appearance	The text size, color, font, and style of the header description. The header description is used to show the typing indicator and the time of when a user has last seen.
mf_appbar_button_tint	color	The color of the buttons.
mf_appbar_divider_color	color	The color of the line divider located at the bottom.
mf_appbar_left_button_text_appearance	text appearance	The text size, color, font, and style of the left button.
mf_appbar_left_button_text_color	color	The text color of the left button.
mf_appbar_left_button_tint	color	The color of the left button.
mf_appbar_left_button_background	drawable/color	The background of the left button.
mf_appbar_right_button_text_appearance	text appearance	The text size, color, font, and style of the right button.
mf_appbar_right_button_text_color	color	The text color of the right button.
mf_appbar_right_button_tint	color	The color of the right button.
mf_appbar_right_button_background	drawable/color	The background of the right button.

The following are the image and video preview screen Caption Input style and attributes for customizations.

<style name="Custom" parent="MirrorFly">

<item name="mf_message_input_style">@style/CustomMessageInput</item>

</style>

<style name="CustomMessageInput" parent="Widget.MirrorFly.MessageInput">

<item name="mf_message_input_background">@color/background_50</item>

<item name="mf_message_input_text_background">@drawable/mf_message_input_text_background_light</item>

<item name="mf_message_input_text_appearance">@style/MirrorFlyBody3OnLight01</item>

<item name="mf_message_input_text_hint_color">@drawable/selector_message_input_hint_text_color</item>

<item name="mf_message_input_text_cursor_drawable">@drawable/mf_message_input_cursor_light</item>

<item name="mf_message_input_left_button_tint">@color/mf_selector_input_add_color_light</item>

<item name="mf_message_input_left_button_background">@drawable/mf_button_uncontained_background_light</item>

<item name="mf_message_input_right_button_tint">@color/primary_300</item>

<item name="mf_message_input_right_button_background">@drawable/mf_button_uncontained_background_light</item>

</style>

List of attributes of Widget.MirrorFly.MessageInput

Attribute	Resource type	Description
mf_message_input_background	drawable/color	The background of message input.
mf_message_input_text_background	drawable/color	The background of message input text.
mf_message_input_text_appearance	text appearance	The size, color, font, style of text in message input.
mf_message_input_text_hint_color	color	The color of text hint message input
mf_message_input_text_cursor_drawable	color	The color of text cursor message input
mf_message_input_left_button_tint	color	The left button tint of message input.
mf_message_input_left_button_background	drawable/color	The background of message input left button.
mf_message_input_right_button_tint	color	The right button tint of message input..
mf_message_input_right_button_background	drawable/color	The background of message input right button.

Create a fragment with customization

UIKit’s GalleryPreviewFragment class extends the Fragment class and is designed to take up the whole screen of the activity. It is recommended to create this fragment in the onCreate() method of the user-generated activity. By default, the header of the gallerypreviewfragment view isn’t visible when using the GalleryPreviewFragment.

class CustomGalleryPreviewActivity : AppCompatActivity() {

lateinit var binding: ActivityCustomGalleryPreviewBinding

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

binding = ActivityCustomGalleryPreviewBinding.inflate(layoutInflater)

setContentView(binding.root)

val fragment = createGalleryPreviewFragment()

val manager = supportFragmentManager

manager.popBackStack()

manager.beginTransaction().replace(R.id.mf_gallery_container, fragment).commit()

}

private fun createGalleryPreviewFragment(): GalleryPreviewFragment {

val builder: GalleryPreviewFragment.Builder = GalleryPreviewFragment.Builder("jid")

.setUseHeader(true)

return builder.build()

}

}

Set the customization using fragment.builder() in detail

The GalleryPreviewFragment.Builder class provides APIs that enable you to customize the GalleryPreviewFragment fragment. The GalleryPreviewFragment’s settings can be customized using the builder’s setters before building. The following is an example of how to build the fragment:

Note : To apply the declared custom styles, pass the R.style.Custom to the GalleryPreviewFragment.Builder as follows:

val builder: GalleryPreviewFragment.Builder = GalleryPreviewFragment.Builder(R.style.Custom, "jid")

.setUseHeader(true)

.setCustomGalleryPreviewFragment(CustomGalleryPreviewFragment()) // optional

.setUseHeader(true)

.setHeaderTitle("Preview")

.setUseHeaderLeftButton(true)

.setUseHeaderRightButton(true)

.setHeaderLeftButtonIconResId(R.drawable.icon_arrow_left)

.setHeaderRightButtonIconResId(R.drawable.icon_delete)

.setInputLeftButtonIconResId(R.drawable.icon_attach)

.setInputRightButtonIconResId(R.drawable.icon_send)

.setInputHint("Add a caption")

.setHeaderLeftButtonListener(leftButtonListener)

.setHeaderRightButtonListener(rightButtonListener)

.showInputRightButtonAlways()

.setInputLeftButtonListener(inputLeftButtonListener)

.setInputRightButtonListener(inputRightButtonListener)

builder.build()