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

Image Attachment

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

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 name	Image	Description
ic_delete_media		Icon of delete
ic_add_more_media		Icon of delete
icon_send		Icon of Message Send.
icon_arrow_left		Goes back to the previous page.