Single & Group Chat

Fly 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:

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

If you want to customize the flychat activity, use CustomFlyChatActivity as follows:

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

Create a fragment#

UIKit’s FlyChatFragment class extends the Fragment class and is designed to take up the whole screen of the activity. It is recommended to create this fragment in the onCreate() method of the user-generated activity. By default, the header of the flychat view isn’t visible when using the FlyChatFragment.

class FlyChatActivity : AppCompatActivity() {
lateinit var binding: ActivityFlyChatBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityFlyChatBinding.inflate(layoutInflater)
setContentView(binding.root)
val chatFragment = createFlyChatFragment()
val manager = supportFragmentManager
manager.popBackStack()
manager.beginTransaction().replace(R.id.chat_fragment_container, chatFragment).commit()
}
private fun createFlyChatFragment(): FlyChatFragment {
val builder: FlyChatFragment.Builder = FlyChatFragment.Builder("jid", "chatType")
.setUseHeader(true)
return builder.build()
}
}

Overridable method#

UIKit provides methods that can be overridden so that you can customize your UI.

MethodReturn typeDescription
createFlyChatFragment()FlyChatFragmentCalled when the FlyChatActivity is created.

Build the fragment#

The FlyChatFragment class enables you to customize the UI of your fly chat view. As shown below, the fragment class is composed of three regions: the header, message list, and message input field.

Fragment regions#

RegionDescription
HeaderActs as an optional ActionBar in the activity. By default, it displays the chat cover image, chat name, which other users in the chat are currently typing a message, as well as two buttons on the left and right, which are all customizable and other user’s last seen time is also displayed. If the left button is clicked, the finish() method of the activity will be called to take the user to the fly recent chat of the FlyRecentChatActivity.
Message listUIKit provides three different types of messages. Refer to the table below.
Message input fieldEnables users to send a text message

Enumerated message types#

Enumerated message typeDescription
VIEW_TYPE_TEXT_SENDER(1)A text message sent by the current user.
VIEW_TYPE_TEXT_RECEIVER(10)A text message sent by other users.
VIEW_TYPE_NOTIFICATION(8)A message that displays the message timeline by the date sent if a day or more has passed since delivery.

Set the fragment.builder()#

The FlyChatFragment.Builder class provides APIs that enable you to customize the FlyChatFragment fragment. The FlyChatFragment’s settings can be customized using the builder’s setters before building. The following is an example of how to build the fragment:

val builder: FlyChatFragment.Builder = FlyChatFragment.Builder("jid", "chatType")
.setUseHeader(true)
.setCustomFlyChatFragment(CustomFlyChatFragment())
.setUseHeader(true)
.setHeaderTitle(chatName)
.setUseHeaderLeftButton(true)
.setUseHeaderRightButton(true)
.setUseTypingIndicator(true)
.setHeaderLeftButtonIconResId(R.drawable.icon_arrow_left)
.setHeaderRightButtonIconResId(R.drawable.icon_info)
.setInputLeftButtonIconResId(R.drawable.icon_add)
.setInputRightButtonIconResId(R.drawable.icon_send)
.setInputHint("Type here")
.setHeaderLeftButtonListener(leftButtonListener)
.setHeaderRightButtonListener(rightButtonListener)
.setChatAdapter(adapter)
.showInputRightButtonAlways()
.setInputLeftButtonListener(inputLeftButtonListener)
.setMessageListParams(params)
builder.build()

List of setter methods#

Setter methodDescription
setCustomFlyChatFragment()Applies CustomFlyChatFragment to FlyChatFragment. By inheritance, CustomFlyChatFragment should be a subclass of FlyChatFragment.
setUserHeader()Determines whether the header is used. (Default: calls from an activity: true, calls from a fragment: false)
setHeaderTitle()Specifies the title of the header. (Default: chat name)
SettsetUseHeaderLeftButton()Determines whether the left button of the header is used. (Default: true)
setUseHeaderRightButton()Determines whether the right button of the header is used. (Default: true)
setUseTypingIndicator()Determines whether the typing indicator is used. (Default: true)
setHeaderLeftButtonIconResId()Specifies the icon on the left button of the header. (Default: icon_arrow_left)
setHeaderLeftButtonIcon()Specifies the icon and the tint on the left button of the header. (Default: icon_arrow_left, light mode : primary_300, dark mode : primary_200)
setHeaderRightButtonIconResId()Specifies the icon on the right button of the header. (Default: icon_info)
setHeaderRightButtonIcon()Specifies the icon and the tint on the right button of the header. (Default: icon_info, light mode : primary_300, dark mode : primary_200)
setInputLeftButtonIconResId()Specifies the icon on the left button of the input. (Default: icon_add )
setInputRightButtonIcon()Specifies the icon and the tint on the right button of the input. (Default: icon_send, light mode : primary_300, dark mode : primary_200)
setInputHint()Specifies an input hint for the text input field. (Default: Enter message)
setHeaderLeftButtonListener()Specifies the action of the click listener on the left button of the header. (Default: finish the current activity)
setHeaderRightButtonListener()Specifies the action of the click listener on the right button of the header. (Default: start the ChatSettingsActivity)
setChatAdapter()Specifies the message list adapter. (Default: UIKit's ChatAdapter)

Customize the style of the fly chat#

To customize the style of chat items, change the UIKit-defined style values in the res/values/theme.xml file. The table below shows the style of chat items you can customize. You need to keep the original names of the items and parents defined by the UIKit during the process.

<style name="Custom" parent="MirrorFly">
<item name="mf_chat_message_list_style">CustomMessageList</item>
<item name="mf_message_user_style">CustomUserMessage</item>
<item name="mf_message_file_style">CustomFileMessage</item>
<item name="mf_message_admin_style">CustomAdminMessage</item>
<item name="mf_message_timeline_style">CustomTimelineMessage</item>
<item name="mf_message_input_style">CustomMessageInput</item>
</style>
<style name="CustomMessageList" parent="Widget.MirrorFly.RecyclerView.Message">
<item name="mf_pager_recycler_view_use_divide_line"></item>
<item name="mf_message_recyclerview_background"></item>
<item name="mf_message_recyclerview_tooltip_background"></item>
<item name="mf_message_recyclerview_tooltip_textappearance"></item>
</style>
<style name="CustomMessage" parent="Widget.MirrorFly.Message">
<item name="mf_message_time_text_appearance"></item>
<item name="mf_message_sender_name_text_appearance"></item>
</style>
<style name="CustomUserMessage" parent="Widget.MirrorFly.Message.User">
<item name="mf_message_me_text_appearance"></item>
<item name="mf_message_other_text_appearance"></item>
<item name="mf_message_me_background"></item>
<item name="mf_message_other_background"></item>
<item name="mf_message_me_background_tint"></item>
<item name="mf_message_other_background_tint"></item>
</style>
<style name="CustomTimelineMessage" parent="Widget.MirrorFly.Message.Timeline">
<item name="mf_message_timeline_text_appearance"></item>
<item name="mf_message_timeline_background"></item>
</style>
<style name="CustomMessageInput" parent="Widget.MirrorFly.MessageInput">
<item name="mf_message_input_background"></item>
<item name="mf_message_input_text_background"></item>
<item name="mf_message_input_text_appearance"></item>
<item name="mf_message_input_text_hint_color"></item>
<item name="mf_message_input_text_cursor_drawable"></item>
<item name="mf_message_input_enable"></item>
<item name="mf_message_input_left_button_tint"></item>
<item name="mf_message_input_left_button_background"></item>
<item name="mf_message_input_right_button_tint"></item>
<item name="mf_message_input_right_button_background"></item>
<item name="mf_message_input_edit_save_button_text_appearance"></item>
<item name="mf_message_input_edit_save_button_text_color"></item>
<item name="mf_message_input_edit_save_button_background"></item>
<item name="mf_message_input_edit_cancel_button_text_appearance"></item>
<item name="mf_message_input_edit_cancel_button_text_color"></item>
<item name="mf_message_input_edit_cancel_button_background"></item>
</style>

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.

To apply the declared custom styles, pass the JID and CHATTYPE of the fly chat and the R.style.Custom to the FlyChatFragment.Builder constructor as follows:

FlyChatFragment.Builder("jid","chatType", R.style.Custom).build()