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

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

StyleSet#

StyleSet is the list of styles provided by MirrorFly UIKit. Customizing the style of Image attachment list items is straightforward: Simply inherit the MirrorFly UIKit-defined styles, then override the res/values/styles.xml or res/values/themes.xml file from the list below.

For example, the MessageInput, AppBar, theme can be changed by overriding the Widget.MirrorFly.MessageInput.

Listed below are all the Recent Chat style used in UIKit for Android. Styles can be changed by overwriting the res/values/styles.xml or res/values/themes.xml files with the same name.

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.MFUIKITTest" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorAccent">@color/primary_300</item>
<item name="colorOnPrimary">@color/white</item>
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- UIKit Single/Group Chat style theme. -->
<item name="mf_message_input_style">@style/Widget.MirrorFly.MessageInput</item>
<item name="mf_appbar_style">@style/Widget.MirrorFly.AppBar</item>
</style>
<!-- Image attachment MessageInput theme. -->
</style>
<style name="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_enable">true</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>
<item name="mf_message_input_quote_reply_title_text_appearance">@style/MirrorFlyCaption1OnLight01</item>
<item name="mf_message_input_quoted_message_text_appearance">@style/MirrorFlyCaption2OnLight03</item>
<item name="mf_message_input_quote_reply_right_icon">@drawable/icon_close</item>
<item name="mf_message_input_quote_reply_right_icon_tint">@color/onlight_02</item>
<item name="mf_message_input_quote_reply_right_icon_background">@drawable/mf_button_uncontained_background_light</item>
</style>
<!-- Image attachment AppBar theme. -->
</style>
<style name="Widget.MirrorFly.AppBar">
<item name="android:background">@color/error_200</item>
<item name="mf_appbar_title_appearance">@style/MirrorFlyH2OnLight01</item>
<item name="mf_appbar_description_appearance">@style/MirrorFlyCaption2OnLight02</item>
<item name="mf_appbar_button_tint">@color/white</item>
<item name="mf_appbar_divider_color">@color/onlight_04</item>
<item name="mf_appbar_left_button_text_appearance">@style/MirrorFlyButtonPrimary300</item>
<item name="mf_appbar_left_button_text_color">@color/mf_button_uncontained_text_color_light</item>
<item name="mf_appbar_left_button_tint">@color/white</item>
<item name="mf_appbar_left_button_background">@drawable/mf_button_uncontained_background_light</item>
<item name="mf_appbar_right_button_text_appearance">@style/MirrorFlyButtonPrimary300</item>
<item name="mf_appbar_right_button_text_color">@color/mf_button_uncontained_text_color_light</item>
<item name="mf_appbar_right_button_tint">@color/white</item>
<item name="mf_appbar_right_button_background">@drawable/mf_button_uncontained_background_light</item>
</style>

StringSet#

Listed below are all the strings used in UIKit Image attachement for Android. Strings can be changed by overwriting the res/values/strings.xml files with the same name.

<!-- Image attachment List -->
<string name="mf_text_header_preview">Preview</string>
<string name="mf_preview_caption">Add a caption...</string>

IconSet#

Listed below are all the icons used in UIKit Image attachment for Android. Icons can be changed by overwriting the res/drawable files with the same name.

Icon nameImageDescription
ic_delete_mediaic_deleteIcon of delete
ic_add_more_mediaic_deleteIcon of delete
icon_sendSendIcon of Message Send.
icon_arrow_leftBackGoes back to the previous page.