Single & Group Chat

A flychat is a chat that allows close interaction among a two users, and is displayed once a connection with Mirrorfly server is established. Fly chat can be easily managed without the need for complex implementation because the FlyChatActivity or FlyChatFragment uses the ChatAdapter to display and update chat information, as well as handle core features and real-time updates.

Plain text messages can be sent from UIKit. All messages in chats are stored using local db.

Note : If one to one call feature unavailable for your plan then voice and video call option will not display in FlyChatFragment.

Start an activity#

Use the below function to open the FlyChatActivity using the unique JID and CHATTYPE of the chat as follows:

info

User can get their chatType from RecentChat model object by using the flag "recentChat.isGroup". If it is true CHATTYPE is "groupchat" or else "chat".

MirrorFlyUIKit.openChat("jid", chatType, requireContext())

flychat

Search in chat screen#

Search is used to search a text message, image & video caption, contact name, audio and document title from chat screen. you can refer the below image.

StyleSet#

StyleSet is the list of styles provided by MirrorFly UIKit. Customizing the style of Chat 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 User, Message, MessageInput, Timeline, AppBar, RecyclerView theme can be changed by overriding the Widget.MirrorFly.Message.User Widget.MirrorFly.RecyclerView.Message Widget.MirrorFly.Message.MessageInput Widget.MirrorFly.Message.Timeline Widget.MirrorFly.AppBar Widget.MirrorFly.RecyclerView.

<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_user_style">@style/Widget.MirrorFly.Message.User</item>
        <item name="mf_chat_message_list_style">@style/Widget.MirrorFly.RecyclerView.Message</item> 
        <item name="mf_message_input_style">@style/Widget.MirrorFly.MessageInput</item>   
        <item name="mf_appbar_style">@style/Widget.MirrorFly.AppBar</item>
        <item name="mf_recycler_view_style">@style/Widget.MirrorFly.RecyclerView</item>

    <!-- UIKit Single/Group Chat selection toolbar close icon. -->
        <item name="actionModeCloseDrawable">@drawable/close_startaction_mode</item>
        
    </style>


    <style name="Widget.MirrorFly.Message.User">
        <item name="mf_message_me_text_appearance">@style/MirrorFlyBody3OnDark01</item>
        <item name="mf_message_other_text_appearance">@style/MirrorFlyBody3OnLight01</item>
        <item name="mf_message_me_background">@drawable/mf_shape_chat_bubble</item>
        <item name="mf_message_other_background">@drawable/mf_shape_chat_bubble</item>
        <item name="mf_message_me_background_tint">@color/mf_message_me_tint_light</item>
        <item name="mf_message_other_background_tint">@color/mf_message_other_tint_light</item>
    </style>

    <style name="Widget.MirrorFly.RecyclerView.Message">
        <item name="mf_pager_recycler_view_use_divide_line">false</item>
        <item name="mf_message_recyclerview_background">@color/background_50</item>
        <item name="mf_message_recyclerview_tooltip_background">@drawable/selector_tooltip_background_light</item>
        <item name="mf_message_recyclerview_tooltip_textappearance">@style/MirrorFlyCaption1Primary300</item>
        <item name="mf_message_typing_indicator_textappearance">@style/MirrorFlyCaption1OnLight02</item>
    </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>

    <style name="Widget.MirrorFly.Message.Timeline">
        <item name="mf_message_timeline_text_appearance">@style/MirrorFlyCaption1OnDark01</item>
        <item name="mf_message_timeline_background">@drawable/mf_shape_timeline_background</item>
    </style>
     
</resources>     

List of attributes of Widget.MirrorFly.RecyclerView.Message#

Attribute	Resource type	Description
mf_pager_recycler_view_use_divide_line	boolean	Determines whether to use line dividers between messages.
mf_message_recyclerview_background	drawable/color	The background of the entire message list.

List of attributes of Widget.MirrorFly.Message#

Attribute	Resource type	Description
mf_message_time_text_appearance	text appearance	The size, color, font, and style of the text indicating the time the message was generated.
mf_message_sender_name_text_appearance	text appearance	The size, color, font, and style of the text indicating the user's nickname.

List of attributes of Widget.MirrorFly.User#

Attribute	Resource type	Description
mf_message_me_text_appearance	text appearance	The size, color, font, and style of text messages sent by the current user.
mf_message_other_text_appearance	text appearance	The size, color, font, and style of text messages sent by other users.
mf_message_me_background	drawable/color	The background of text messages sent by the current user.
mf_message_other_background	drawable/color	The background of text messages sent by other users.
mf_message_me_background_tint	color	The background tint of text messages sent by the current user.
mf_message_other_background_tint	color	The background tint of text messages sent by other users.

List of attributes of Widget.MirrorFly.Timeline#

Attribute	Resource type	Description
mf_message_timeline_text_appearance	text appearance	The size, color, font, style of text in timeline messages.
mf_message_timeline_background	drawable/color	The background of timeline messages.

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.

StringSet#

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

    <!-- Single/Group Chat List -->
    <string name="mf_text_chat_input_text_hint">Enter message</string>
    <string name="mf_text_chat_input_gallery">Gallery</string>
    # <string name="mf_text_chat_anchor_reply">Reply</string>
    # <string name="mf_text_chat_anchor_forward">Forward</string>
    # <string name="mf_text_chat_message_info">Message Info</string>
    <string name="mf_text_chat_input_contact">Contact</string>
    <string name="mf_text_chat_input_location">Location</string>
    <string name="mf_text_chat_input_document">Documents</string>
    <string name="mf_text_chat_input_audio">Audio</string>

IconSet#

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

Icon name	Image	Description
ic_call		Icon of Call button.
ic_video_call		Icon of Video button.
icon_gallery		Icon of Gallery.
ic_reply		Icon of Replay.
ic_share		Icon of Forward.
ic_message_info		Icon of Message Info.
icon_send		Icon of Message Send.
icon_attachment		Icon of Attachment.
ic_message_unsent		Icon of Message Unsent.
ic_message_seen		Icon of Message Seen.
ic_message_delivered		Icon of Message Delivered.
ic_message_acknowledged		Icon of Message Ack.
icon_contact		Icon of Contact Attachment.
icon_arrow_left		Goes back to the previous page.
ic_pin		Icon of Location Attachment.