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.

Start an activity#

Use the intent to move from one activity to 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".

startActivity(FlyChatActivity.newIntent(requireContext(), "jid", "chatType"))

If you want to customize the flychat activity, use CustomFlyChatActivity as follows and refer in adveance section for more details:

startActivity(FlyChatActivity.newIntentFromCustomActivity(requireContext(), "jid", "chatType"))

flychat

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>
</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#

AttributeResource typeDescription
mf_pager_recycler_view_use_divide_linebooleanDetermines whether to use line dividers between messages.
mf_message_recyclerview_backgrounddrawable/colorThe background of the entire message list.

List of attributes of Widget.MirrorFly.Message#

AttributeResource typeDescription
mf_message_time_text_appearancetext appearanceThe size, color, font, and style of the text indicating the time the message was generated.
mf_message_sender_name_text_appearancetext appearanceThe size, color, font, and style of the text indicating the user's nickname.

List of attributes of Widget.MirrorFly.User#

AttributeResource typeDescription
mf_message_me_text_appearancetext appearanceThe size, color, font, and style of text messages sent by the current user.
mf_message_other_text_appearancetext appearanceThe size, color, font, and style of text messages sent by other users.
mf_message_me_backgrounddrawable/colorThe background of text messages sent by the current user.
mf_message_other_backgrounddrawable/colorThe background of text messages sent by other users.
mf_message_me_background_tintcolorThe background tint of text messages sent by the current user.
mf_message_other_background_tintcolorThe background tint of text messages sent by other users.

List of attributes of Widget.MirrorFly.Timeline#

AttributeResource typeDescription
mf_message_timeline_text_appearancetext appearanceThe size, color, font, style of text in timeline messages.
mf_message_timeline_backgrounddrawable/colorThe background of timeline messages.

List of attributes of Widget.MirrorFly.MessageInput#

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.

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>

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 nameImageDescription
ic_callAdd 2Icon of Call button.
ic_video_callAdd 2Icon of Video button.
icon_galleryAdd 2Icon of Gallery.
ic_replyReplyIcon of Replay.
ic_shareForwardIcon of Forward.
ic_message_infoAdd 2Icon of Message Info.
icon_sendSendIcon of Message Send.
icon_attachmentAdd 2Icon of Attachment.
ic_message_unsentic_hourIcon of Message Unsent.
ic_message_seenic_seenIcon of Message Seen.
ic_message_deliveredic_deliveredIcon of Message Delivered.
ic_message_acknowledgedic_sentIcon of Message Ack.
icon_arrow_leftBackGoes back to the previous page.