Single & Group Chat

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:Header,Message List,and Message Input Field.

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.

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

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

</style>

Attributes reference

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