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 chat 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?) {
binding = ActivityContactBinding.inflate(layoutInflater)
val fragment: ContactFragment? = createContactFragment()
val manager = supportFragmentManager
.replace(, fragment!!)
private fun createContactFragment(type: CreateableChatType?): ContactFragment {
return ContactFragment.Builder(type!!)

Contact Screen#


Overridable method#

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

MethodReturn typeDescription
createContactFragment()ContactFragmentCalled when the ContactActivity is created.

Build the fragment#

The CreateContactFragment class enables you to customize the UI of your contact view. As shown below, the fragment class is composed of two regions: the header and user list:

Fragment regions#

HeaderActs as an optional ActionBar in the contact activity. By default, it displays the title and buttons on the left, which are all customizable. If the left button is clicked, the finish() method of the activity will be called to close the current activity.
User listConsists of each user’ profile image and nickname. By default, all users registered to the particular licence key in the Mirrorfly UI KIT application are retrieved and shown here.

Set the fragment.builder()#

The ContactFragment.Builder class provides APIs that enable you to create a customized ContactFragment. Before building, the ContactFragment’s settings can be customized using the builder’s setters. The chat type of a contact can be determined in the SelectChatTypeView layout of the FlyRecectChatActivity. Refer to the following sample code to build the ContactFragment.

.setCustomContactFragment(CustomContactFragment()) // Optional
.setHeaderTitle("Custom Contact")

List of setter methods#

Setter methodDescription
BuilderDisplays the chat types you can select. (Default : normal)
setCustomContactFragment()Applies CustomContactFragment to ContactFragment. By inheritance, CustomContactFragment should be a subclass of ContactFragment.
setUserHeader()Determines whether the header is used.
setHeaderTitle()Specifies the title of the header. (Default: Contact)
setUseHeaderLeftButton()Determines whether the left 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)
setHeaderLeftButtonListener()Specifies the action of the click listener on the left button of the header. (Default: finish the current activity)
setContactListAdapter()Specifies the user list adapter. (Default: UIKit's ContactListAdapter)

Customize the style of contact items#

To customize the style of contact items, change the UIKit-defined style values in the res/values/themes.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.

<style name="Custom" parent="MirrorFly">
<item name="mf_contact_preview_style">@style/custom</item>
<style name="custom" parent="Widget.MirrorFly.UserPreview">
<item name="android:background"></item>
<item name="mf_contact_preview_nickname_appearance"></item>

List of attributes of Widget.MirrorFly.UserPreview#

AttributeResource typeDescription
android:backgrounddrawable/colorThe user item background.
mf_user_preview_nickname_appearancetext appearanceSize, color, font, and style of the user nickname.

Note : To apply the declared custom styles, pass the to the ContactFragment.Builder as follows:

.setHeaderTitle("Custom Contact")