Attachment

Image Attachment#

Image sharing is a feature that allows users to send images. Image sharing appears in the message input field region of the FlyChatFragment class.

In MirrorFly UIKit for Android, there are currently one type of file messages that users can send : image file. These image 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#

gallery

Image Attachment#

image_attach

Customize the UI for Image Preview Screen#

Preview screen regions#

RegionDescription
HeaderActs 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
ViewPagerUIKit provides swipe option to see the selected imges.
Caption(Message) input fieldEnables users to send a image with caption message which are all customizable

Image Preview Screen#

image_preview

The following are the image 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#

AttributeResource typeDescription
android:backgrounddrawable/colorThe background of the header.
mf_appbar_title_appearancetext appearanceThe text size, color, font, and style of the header title.
mf_appbar_description_appearancetext appearanceThe 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_tintcolorThe color of the buttons.
mf_appbar_divider_colorcolorThe color of the line divider located at the bottom.
mf_appbar_left_button_text_appearancetext appearanceThe text size, color, font, and style of the left button.
mf_appbar_left_button_text_colorcolorThe text color of the left button.
mf_appbar_left_button_tintcolorThe color of the left button.
mf_appbar_left_button_backgrounddrawable/colorThe background of the left button.
mf_appbar_right_button_text_appearancetext appearanceThe text size, color, font, and style of the right button.
mf_appbar_right_button_text_colorcolorThe text color of the right button.
mf_appbar_right_button_tintcolorThe color of the right button.
mf_appbar_right_button_backgrounddrawable/colorThe background of the right button.
The following are the image 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#

message_nput

AttributeResource typeDescription
mf_message_input_backgrounddrawable/colorThe background of message input.
mf_message_input_text_backgrounddrawable/colorThe background of message input text.
mf_message_input_text_appearancetext appearanceThe size, color, font, style of text in message input.
mf_message_input_text_hint_colorcolorThe color of text hint message input
mf_message_input_text_cursor_drawablecolorThe color of text cursor message input
mf_message_input_left_button_tintcolorThe left button tint of message input.
mf_message_input_left_button_backgrounddrawable/colorThe background of message input left button.
mf_message_input_right_button_tintcolorThe right button tint of message input..
mf_message_input_right_button_backgrounddrawable/colorThe 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()