Attachment

Attachment

Note : If Attachment feature unavailable for your plan then it will not display in FlyChatFragment.

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

In MirrorFly UIKit for Android, there are currently four type of file messages that users can send : image, video, documents and audio. 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 & Video Attachment

Note : If Image & Video Attachment feature unavailable for your plan then it will not display in FlyChatFragment.

Documents Attachment

Note : If Documents Attachment feature unavailable for your plan then it will not display in FlyChatFragment.

Audio Message

Note : If Audio Attachment feature unavailable for your plan then it will not display in FlyChatFragment.

To send audio as a message clicks the microphone icon given in the Message input box to record the audio. Once audio recored tap the send icon button to send the audio message.

Contact Attachment

Note : If Contact Attachment feature unavailable for your plan then it will not display in FlyChatFragment.

To send the contact as a message clicks the attachment icon given in the Message input box to navigate to the contact page. Select the contact from the list and preview the selected contact and then send the contact message.

Location Attachment

Note : If Location Attachment feature unavailable for your plan then it will not display in FlyChatFragment.

To send the location as a message clicks the attachment icon given in the Message input box to navigate to the user location page. Select the location by dragging location pin or by clicking particular location in google map and then send the location message.

Step 1: Add the below dependencies required by the SDK in the app/build.gradle file.

dependencies {

implementation 'com.google.android.gms:play-services-location:18.0.0'

implementation 'com.google.android.gms:play-services-maps:17.0.1'

}

Step 2: Open the AndroidManifest.xml and add below key for google map Location Sharing.

<meta-data

android:name="com.google.android.geo.API_KEY"

android:value="API_KEY" />

Location Sharing Screen.

View All Media

View All Media is a feature that allows users to view the sent and received images, videos, documents and audios. View All Media appears in the User info and Group info.

Use the intent to move from one activity to the ViewAllMediaActivity using the unique JID of the chat as follows:

startActivity(ViewAllMediaActivity.newIntent(requireContext(), "jid"))

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

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 Attachment 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>

<!--Audio Sender SeekBar-->

<style name="SenderSeekBarStyle">

<item name="android:progressDrawable">@drawable/drawable_sender_seek_bar_track</item>

<item name="android:thumb">@drawable/drawable_recipient_seek_bar_thumb</item>

<item name="android:thumbOffset">16dp</item>

<item name="android:max">100</item>

<item name="android:progress">0</item>

<item name="android:focusable">true</item>

<item name="android:clickable">true</item>

<item name="android:minWidth">100dp</item>

</style>

<!--Audio Receiver SeekBar-->

<style name="RecipientSeekBarStyle">

<item name="android:progressDrawable">@drawable/drawable_recipient_seek_bar_track</item>

<item name="android:thumb">@drawable/drawable_recipient_seek_bar_thumb</item>

<item name="android:thumbOffset">16dp</item>

<item name="android:max">100</item>

<item name="android:progress">0</item>

<item name="android:focusable">true</item>

<item name="android:clickable">true</item>

<item name="android:minWidth">100dp</item>

</style>

StringSet

Listed below are all the strings used in UIKit Image & Video 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>

<!-- View All Media Screen -->

<string name="title_media">Media</string>

<string name="title_docs">Docs</string>

<string name="title_links">Links</string>

<string name="label_no_media">No Media Found…!!!</string>

<string name="label_no_docs">No Docs Found…!!!</string>

<string name="label_no_links">No Links Found…!!!</string>

IconSet

Listed below are all the icons used in UIKit Image & Video 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.
ic_microphone		Icon shows to record the audio
ic_audio_recording_icon		Icon shows the recording state of audio
ic_audio_record		Icon shows audio is recorded
ic_audio_record_delete		Icon is to delete the recored audio
ic_play_audio_recipient		Icon to play the recored audio on the sender side
ic_audio_music_icon		Icon of audio music
ic_cancel_grey		Icon to cancel the upload or download
ic_file_download_grey		Icon to download the audio
ic_file_upload_light		Icon to upload the audio
ic_file_upload_light		Icon to upload the audio
ic_profile		Icon shows in the contact message

Drawable

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

Drawable name	Description
drawable_audio_message_sender_background.xml	To change shape of sender background : Audio
drawable_audio_message_background.xml	To change shape of receiver background : Audio
bg_download_progress.xml	To change layout of progress bar : Audio
horizontal_file_receiver_progress_bar.xml	To change horizontal line of progress bar : Audio Receiver
horizontal_file_sender_progress_bar.xml	To change horizontal line of progress bar : Audio Sender