Chat

Fly Recent chat

This page explains the key functions of fly recent chat in MirrorFly UIKit for Android.

A Fly Recent chat is the complete list of recent chats that you're made with single conversation. The recent chat list is displayed once a connection with Mirrorfly server is established, and can be easily managed without complex implementation because the FlyRecentChatActivity or FlyRecentChatFragment class handles core features such as chat pagination and real-time updates.

Start an activity

Use the intent to move from one activity to the FlyRecentChatActivity as follows:

val intent: Intent = FlyRecentChatActivity.newIntent(context)

startActivity(intent)

If you want to customize the recent chat activity, use CustomFlyRecentChatActivity as follows:

val intent: Intent = FlyRecentChatActivity.newIntentFromCustomActivity(context, CustomFlyRecentChatActivity::class.java)

startActivity(intent)

Create a fragment

UIKit’s FlyRecentChatFragment 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 flyrecentchat view isn’t visible when using the FlyRecentChatFragment.

open class FlyRecentChatActivity : AppCompatActivity {

...

private lateinit var binding: ActivityFlyRecentChatBinding

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

binding = ActivityFlyRecentChatBinding.inflate(layoutInflater)

setContentView(binding.root)

val fragment = createFlyRecentChatFragment()

val manager = supportFragmentManager

manager.popBackStack()

manager.beginTransaction().replace(R.id.mf_frag_container, fragment).commit()

}

private fun createFlyRecentChatFragment(): FlyRecentChatFragment {

return FlyRecentChatFragment.Builder()

.setUseHeader(true)!!

.build()

}

}

Overridable method

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

Method	Return type	Description
createFlyRecentChatFragment()	FlyRecentChatFragment	Called when the FlyRecentChatActivity is created.

Build the fragment

The FlyRecentChatFragment class enables you to customize the UI of your fly recenct chat view. As shown below, the fragment class is composed of two regions: the header and recent chat.

Recent chat view

Fragment regions

Region	Description
Header	Acts as an optional ActionBar in the fly recent chat activity. By default, it displays the title and 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 close the current activity. If the right button is clicked, the user can determine which chat type to select. After the user selects a chat type, the user will be taken to ContactActivity.
Fly Recent chat	Displays the chat's cover image, chat name, number of unread messages, last message sent. If a chat is clicked, the user will be taken to the corresponding FlyChatActivity. It is fully customizable.

Set the fragment.builder()

The FlyRecentChatFragment.Builder class provides APIs that enable you to create a customized FlyRecentChatFragment. Before building, the FlyRecentChatFragment’s settings can be customized using the builder’s setters. The following is an example of how to build the FlyRecentChatFragment:

var fragment: FlyRecentChatFragment = FlyRecentChatFragment.Builder()

.setCustomFlyRecentChatFragment(CustomFlyRecentChatFragment())

.setUseHeader(true)

.setHeaderTitle("Chat")

.setUseHeaderLeftButton(true)

.setUseHeaderRightButton(true)

.setHeaderLeftButtonIconResId(R.drawable.icon_arrow_left)

.setHeaderRightButtonIconResId(R.drawable.icon_create)

.setHeaderLeftButtonListener(leftButtonListener)

.setHeaderRightButtonListener(rightButtonListener)

.setItemClickListener(itemClickListener)

.build()

List of setter methods

Setter method	Description
setCustomFlyRecentChatFragment()	Applies CustomFlyRecentChatFragment to FlyRecentChatFragment. By inheritance, CustomFlyRecentChatFragment should be a subclass of FlyRecentChatFragment.
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: Channels)
setUseHeaderLeftButton()	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)
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_create)
setHeaderRightButtonIcon()	Specifies the icon and the tint on the right button of the header. (Default: icon_create, light mode : primary_300, dark mode : primary_200)
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 ContactActivity)
setItemClickListener()	Specifies the action of the click listener on an item of the channel list. (Default: start the FlyChatActivity)

Customize the fragment methods by inheritance

You can customize the methods in the FlyRecentChatFragment class as follows:

• Create a new fragment which inherits FlyRecentChatFragment as a subclass.
• Override the methods in the fragment. The following table lists the methods you can use.
• Apply the customized fragment by using the FlyRecentChatFragment.Builder().setCustomFlyRecentChatFragment() method.

Add a click listener to a fly recent chat item

Click listeners can be added to fly recent chat items to perform specific actions when clicked. Through the listeners, the Chat instance is passed as an argument to a parameter, which includes the chat information of the clicked chat. Based on this information, click listeners can be added to perform specific actions.

builder.setItemClickListener(object : OnItemClickListener<RecentChat>{

override fun onItemClick(view: View?, position: Int, data: RecentChat?) {

TODO("Not yet implemented")

}

})

Customize the fly recent chat

A customized fly recent chat list can be created by inheriting the FlyRecentChatAdapter and BaseViewHolder<RecentChat> provided by the UIKit, implementing the adapter, and applying it to the fragment.

Create a CustomFlyRecentChatAdapter class by inheriting the FlyRecentChatAdapter class and implement a custom adapter as follows:

class CustomFlyRecentChatAdapter : FlyRecentChatAdapter() {

fun onCreateViewHolder(parent: ViewGroup, viewType: Int): BaseViewHolder<RecentChat> {

// Create a custom ViewHolder and return it.

// Create a custom ViewHolder or call the super.onCreateViewHolder() if you want to use the default ViewHolder.

return CREATE_YOUR_CUSTOM_VIEWHOLDER()

}

fun onBindViewHolder(holder: BaseViewHolder<RecentChat?>, position: Int) {

// When you call the super, the listener implemented through Builder is attached.

// A custom listener can be implemented instead of calling the super.

super.onBindViewHolder(holder, position)

// Bind the custom ViewHolder.

}

}

Create a CustomFlyRecentChatViewHolder class by inheriting the BaseViewHolder<RecentChat> class and implement a custom ViewHolder class as follows:

class CustomFlyRecentChatViewHolder(itemView: View) : BaseViewHolder<RecentChat?>(itemView) {

override fun bind(item: RecentChat) {

// Bind the data to the ViewHolder.

}

}

Apply the custom adapter to the fragment.

builder.setFlyRecentChatAdapter(CustomFlyRecentChatAdapter())

Customize the style of the fly recent chat

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

Note : To apply our Dark theme, create a res/values/styles_dark.xml file and then add .Dark to the UIKit-defined style names.

<style name="Custom" parent="MirrorFly">

<item name="mf_chat_preview_style">@style/custom</item>

</style>

<style name="custom" parent="Widget.MirrorFly.ChatPreview">

<item name="android:background"></item>

<item name="mf_channel_preview_title_appearance"></item>

<item name="mf_channel_preview_member_count_appearance"></item>

<item name="mf_channel_preview_updated_at_appearance"></item>

<item name="mf_channel_preview_unread_count_appearance"></item>

<item name="mf_channel_preview_last_message_appearance"></item>

</style>

List of attributes of Widget.MirrorFly.ChatPreview

Attribute	Resource type	Description
android:background	drawable/color	The chat item background.
mf_channel_preview_title_appearance	text appearance	The size, color, font, and style of text of the channel name.
mf_channel_preview_member_count_appearance	text appearance	The size, color, font, and style of text of the number of users that have entered the channel.
mf_channel_preview_updated_at_appearance	text appearance	The size, color, font, and style of text of the number indicating the time the channel was last updated at.
mf_channel_preview_unread_count_appearance	text appearance	The size, color, font, and style of text of the number indicating the number of unread messages.
mf_channel_preview_last_message_appearance	text appearance	The size, color, font, and style of text of the last message sent in the channel.

To apply the declared custom styles, pass the R.style.Custom to the FlyRecentChatFragment.Builder constructor as follows:

FlyRecentChatFragment.Builder(R.style.Custom).build()

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.

Method	Return type	Description
createFlyChatFragment()	FlyChatFragment	Called 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

Region	Description
Header	Acts 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 list	UIKit provides three different types of messages. Refer to the table below.
Message input field	Enables users to send a text message

Enumerated message types

Enumerated message type	Description
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(channelName)

.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 method	Description
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: channel 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 ChannelSettingsActivity)
setChatAdapter()	Specifies the message list adapter. (Default: UIKit's ChatAdapter)

Customize the style of the fly chat

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

Note : To apply our Dark theme, create a res/values/styles_dark.xml file and then add .Dark to the UIKit-defined style names.

<style name="Custom" parent="MirrorFly">

<item name="mf_channel_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

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.

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()

Contact

User contact can be selected in MirrorFly UIKit through the ContactActivity. Using the ContactListAdapter class, users can be selected and immediately moved to FlyChatActivity. By default, contact name and profile images are used to select the contact name and cover image.

Start an activity

Use the intent to move from one activity to the ContactActivity.

Intent intent = ContactActivity.newIntent(context);

startActivity(intent);

If you want to use the ContactActivity for a specific chat type, refer to the following sample code.

Note : The CreatableContactType consists of Normal and Group types.

startActivity(ContactActivity.newIntent(context = requireContext()))

If you want to customize the contact activity, use CustomContactActivity as follows:

startActivity(ContactActivity.newIntentFromCustomActivity(context = requireContext(),"type))

Create a fragment

UIKit’s ContactFragment 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 create a channel view isn’t visible when using the ContactFragment.

class ContactActivity : AppCompatActivity() {

private lateinit var binding : ActivityContactBinding

private val chatType: CreateableChatType = CreateableChatType.Normal

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

binding = ActivityContactBinding.inflate(layoutInflater)

setContentView(binding.root)

val fragment: ContactFragment? = createCreateContactFragment()

val manager = supportFragmentManager

manager.popBackStack()

manager.beginTransaction()

.replace(R.id.contact_fragment_container, fragment!!)

.commit()

}

private fun createCreateContactFragment(type: CreateableChatType?): ContactFragment {

return ContactFragment.Builder(type!!)

.setUseHeader(true)

.setHeaderTitle("Contact")

.build()

}

}

Overridable method

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

Method	Return type	Description
createCreateContactFragment()	ContactFragment	Called when the ContactActivity is created.

Customize the style of contact items

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

Note : To apply our Dark theme, create a res/values/styles_dark.xml file and then add .Dark to the UIKit-defined style names.

<style name="Custom" parent="MirrorFly">

<item name="mf_contact_preview_style">@style/custom</item>

</style>

<style name="custom" parent="Widget.MirrorFly.ContactPreview">

<item name="android:background"></item>

<item name="mf_contact_preview_nickname_appearance"></item>

</style>

List of attributes of Widget.MirrorFly.ContactPreview

Attribute	Resource type	Description
android:background	drawable/color	The user item background.
mf_user_preview_nickname_appearance	text appearance	Size, color, font, and style of the user nickname.

To apply the declared custom styles, pass the R.style.Custom to the ContactFragment.Builder as follows:

ContactFragment.Builder(R.style.Custom).build()