Other Components

Customizing strings, icons, and style resources is straightforward: Simply overwrite the resources files by changing the UIKit-defined style values in them. The xml elements and tables below show the supported sets of components you can customize.

Note : Do not change the names of the UIKit-defined items and parents when customizing.

StringSet#

 <!-- Header Title -->
    <string name="mf_text_header_chat_list">Chats</string>
    <string name="mf_text_header_chat_settings">chat information</string>
    <string name="mf_text_header_member_list">Members</string>
    <string name="mf_text_header_invite_member">Invite users</string>
    <string name="mf_text_header_create_chat">New chat</string>
    <string name="mf_text_header_select_members">Select members</string>
    <string name="mf_text_header_participants">Participants</string>
    <string name="mf_text_header_participants_count">%s participants</string>
    <string name="mf_lastmsgtime">10:10 AM</string>
    <string name="msg_no_internet">Please check your internet connection</string>

    <!-- Views -->
    <string name="mf_text_yesterday">Yesterday</string>
    <string name="mf_text_permission_yes">Yes</string>
    <string name="mf_text_permission_no">No</string>
    <string name="mf_text_dialog_delete_file_message">Delete this file?</string>
    <string name="mf_text_dialog_delete_message">Delete this message?</string>
    <string name="mf_text_toast_success_push_on">Notifications turned on</string>
    <string name="mf_text_toast_success_push_off">Notifications turned off</string>
    <string name="mf_text_toast_success_copy">Copied</string>
    <string name="mf_text_toast_success_start_upload_file">Uploading&#8230;</string>
    <string name="mf_text_toast_success_start_download_file">Downloading&#8230;</string>
    <string name="mf_text_toast_success_download_file">File saved</string>
    <string name="mf_text_button_edit">Edit</string>
    <string name="mf_text_button_invite">Invite</string>
    <string name="mf_text_button_cancel">Cancel</string>
    <string name="mf_text_button_create">Create</string>
    <string name="mf_text_button_save">Save</string>
    <string name="mf_text_button_delete">Delete</string>
    <string name="mf_text_button_retry">Retry</string>

    <!-- Chat List -->
    <string name="mf_text_chat_list_title_no_members">(No members)</string>
    <string name="mf_text_chat_list_title_unknown">(No name)</string>
    <string name="mf_text_chat_list_unread_count_max">99+</string>
    <string name="mf_text_chat_list_last_message_file">%1$s sent a file.</string>
    <string name="mf_text_chat_list_last_message_file_unknown">Unknown</string>
    <string name="mf_text_chat_list_push_on">Turn on notifications</string>
    <string name="mf_text_chat_list_push_off">Turn off notifications</string>
    <string name="mf_text_chat_list_leave">Leave chat</string>
    <string name="mf_text_chat_list_empty">No chats</string>

Header (Toolbar / Appbar)#

The header acts as an optional ActionBar used in every style.

header

<style name="Custom" parent="MirrorFly">
    <item name="mf_appbar_style">@style/custom</item>
</style>

<style name="custom" parent="Widget.MirrorFly.AppBar">
    <item name="android:background"></item>
    <item name="mf_appbar_title_appearance"></item>
    <item name="mf_appbar_description_appearance"></item>
    <item name="mf_appbar_button_tint"></item>
    <item name="mf_appbar_divider_color"></item>
    <item name="mf_appbar_left_button_text_appearance"></item>
    <item name="mf_appbar_left_button_text_color"></item>
    <item name="mf_appbar_left_button_tint"></item>
    <item name="mf_appbar_left_button_background"></item>
    <item name="mf_appbar_right_button_text_appearance"></item>
    <item name="mf_appbar_right_button_text_color"></item>
    <item name="mf_appbar_right_button_tint"></item>
    <item name="mf_appbar_right_button_background"></item>
</style>

List of attributes of Widget.MirrorFly.AppBar#

Attribute	Resource type	Description
android:background	drawable/color	The background of the header.
mf_appbar_title_appearance	text appearance	The text size, color, font, and style of the header title.
mf_appbar_description_appearance	text appearance	The text size, color, font, and style of the header description. The header description is used to show the typing indicator and the time of when a user has last seen.
mf_appbar_button_tint	color	The color of the buttons.
mf_appbar_divider_color	color	The color of the line divider located at the bottom.
mf_appbar_left_button_text_appearance	text appearance	The text size, color, font, and style of the left button.
mf_appbar_left_button_text_color	color	The text color of the left button.
mf_appbar_left_button_tint	color	The color of the left button.
mf_appbar_left_button_background	drawable/color	The background of the left button.
mf_appbar_right_button_text_appearance	text appearance	The text size, color, font, and style of the right button.
mf_appbar_right_button_text_color	color	The text color of the right button.
mf_appbar_right_button_tint	color	The color of the right button.
mf_appbar_right_button_background	drawable/color	The background of the right button.

RecyclerView#

RecyclerView is used to show the chat list, user list, and message list.

<style name="Custom" parent="MirrorFly">
    <item name="mf_recycler_view_style">@style/custom</item>
</style>

<style name="custom" parent="Widget.MirrorFly.RecyclerView">
    <item name="android:background"></item>
    <item name="mf_pager_recycler_view_use_divide_line"></item>
    <item name="mf_pager_recycler_view_divide_line_color"></item>
    <item name="mf_pager_recycler_view_divide_line_height"></item>
    <item name="mf_pager_recycler_view_divide_margin_left"></item>
    <item name="mf_pager_recycler_view_divide_margin_right"></item>
</style>

List of attributes of Widget.MirrorFly.RecyclerView#

Attribute	Resource type	Description
android:background	drawable/color	The background of the `RecyclerView.`
mf_pager_recycler_view_use_divide_line	boolean	Determines whether to use line dividers between messages.
mf_pager_recycler_view_divide_line_color	color	The color of the line divider.
mf_pager_recycler_view_divide_line_height	size	The height of the line divider.
mf_pager_recycler_view_divide_margin_left	size	The width of the empty space to the left of the line divider.
mf_pager_recycler_view_divide_margin_right	size	The width of the empty space to the right of the line divider.

Dialog#

UIKit provides dialog through the MirrorFlyDialogFragment. This dialog includes a list type, an edit text type, a content view type, up to three buttons, and more. The following table lists the dialog styles that appear in UIKit.

Dialog styles#

Resource type	Attribute
List
Confirm

<style name="Custom" parent="MirrorFly">
    <item name="mf_dialog_view_style">@style/custom</item>
</style>

<style name="custom" parent="Widget.MirrorFly.DialogView">
    <item name="mf_dialog_view_background"></item>
    <item name="mf_dialog_view_background_bottom"></item>
    <item name="mf_dialog_view_background_anchor"></item>
    <item name="mf_dialog_view_title_appearance"></item>
    <item name="mf_dialog_view_message_appearance"></item>
    <item name="mf_dialog_view_list_item_appearance"></item>
    <item name="mf_dialog_view_list_item_background"></item>
    <item name="mf_dialog_view_edit_text_appearance"></item>
    <item name="mf_dialog_view_edit_text_tint"></item>
    <item name="mf_dialog_view_edit_text_cursor_drawable"></item>
    <item name="mf_dialog_view_edit_text_hint_color"></item>
    <item name="mf_dialog_view_icon_tint"></item>
    <item name="mf_dialog_view_positive_button_text_appearance"></item>
    <item name="mf_dialog_view_positive_button_text_color"></item>
    <item name="mf_dialog_view_positive_button_background"></item>
    <item name="mf_dialog_view_negative_button_text_appearance"></item>
    <item name="mf_dialog_view_negative_button_text_color"></item>
    <item name="mf_dialog_view_negative_button_background"></item>
    <item name="mf_dialog_view_neutral_button_text_appearance"></item>
    <item name="mf_dialog_view_neutral_button_text_color"></item>
    <item name="mf_dialog_view_neutral_button_background"></item>
</style>

List of attributes of Widget.MirrorFly.DialogView#

Attribute	Resource type	Description
mf_dialog_view_background	drawable/color	The background of the dialog.
mf_dialog_view_background_bottom	drawable	The background of the bottom dialog.
mf_dialog_view_title_appearance	text appearance	The text size, color, font, and style of the title..
mf_dialog_view_message_appearance	text appearance	The text size, color, font, and style of the message.

StatusFrame#

StatusFrame displays the current state when data is loading and data loading failed. header

<style name="Custom" parent="MirrorFly">
    <item name="mf_status_frame_style">@style/custom</item>
</style>

<style name="custom" parent="Widget.MirrorFly.StatusFrame">
    <item name="mf_status_frame_background"></item>
    <item name="mf_status_frame_text_appearance"></item>
    <item name="mf_status_frame_icon_tint"></item>
    <item name="mf_status_frame_action_text_appearance"></item>
    <item name="mf_status_frame_action_background"></item>
</style>

List of attributes of Widget.MirrorFly.StatusFrame#

Attribute	Resource type	Description
mf_status_frame_background	drawable/color	The background of the status frame.
mf_status_frame_text_appearance	text appearance	The text size, color, font, and style of the text on the status frame.
mf_status_frame_icon_tint	color	The color of the icons.
mf_status_frame_action_text_appearance	text appearance	The text size, color, font, and style of the action.
mf_status_frame_action_background	drawable/color	The background of the action.

SelectChatTypeView#

This style will be used when you select a chat.

<style name="Custom" parent="MirrorFly">
    <item name="mf_select_chat_type_style">@style/custom</item>
</style>

<style name="custom" parent="Widget.MirrorFly.SelectChatTypeView">
    <item name="android:background"></item>
    <item name="mf_select_chat_type_menu_background"></item>
    <item name="mf_select_chat_type_menu_title_appearance"></item>
    <item name="mf_select_chat_type_menu_name_appearance"></item>
    <item name="mf_select_chat_type_menu_icon_tint"></item>
</style>

List of attributes of Widget.MirrorFly.SelectChatTypeView#

Attribute	Resource type	Description
android:background	drawable/color	The background of component.
mf_select_chat_type_menu_background	drawable	The background of each menu item.
mf_select_chat_type_menu_title_appearance	The text size, color, font, and style of the menu title.
mf_select_chat_type_menu_name_appearance	text appearance	The text size, color, font, and style of the menu name.
mf_select_chat_type_menu_icon_tint	color	The color of the icons.

style_custom.xml#

To customize the user defined style for each widget like Appbar, Recyclerview, MessageInput, Timeline and etc, create a style_custom.xml in the res/values and add the style attributes as follows.

<style name="AppThemeCustom" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/primary_300</item>
        <item name="colorPrimaryDark">@color/primary_500</item>
        <item name="colorAccent">@color/secondary_300</item>
    </style>

    <style name="MirrorFly.Custom" parent="AppThemeCustom">
        <!-- Chat list -->
        <item name="mf_chat_preview_style">@style/Widget.MirrorFly.ChatPreview.Custom</item>

        <item name="mf_message_admin_style">@style/Widget.MirrorFly.Message.Admin.Custom</item>

        <!-- Common components -->
        <item name="mf_appbar_style">@style/Widget.MirrorFly.AppBar.Custom</item>
        <item name="mf_recycler_view_style">@style/Widget.MirrorFly.RecyclerView.Custom</item>
        <item name="mf_toast_view_style">@style/Widget.MirrorFly.ToastView.Custom</item>

    </style>

    <style name="Widget.MirrorFly.AppBar.Custom">
        <item name="android:background">@color/primary_300</item>
        <item name="mf_appbar_title_appearance">@style/MirrorFlyH2OnDark01</item>
        <item name="mf_appbar_description_appearance">@style/MirrorFlyCaption2OnDark02</item>
        <item name="mf_appbar_divider_color">@color/primary_500</item>

        <item name="mf_appbar_left_button_text_appearance">@style/MirrorFlyButtonOnDark01</item>
        <item name="mf_appbar_left_button_text_color">@color/selector_on_primary</item>
        <item name="mf_appbar_left_button_tint">@color/ondark_01</item>
        <item name="mf_appbar_left_button_background">@drawable/mf_button_uncontained_background_custom</item>
        <item name="mf_appbar_right_button_text_appearance">@style/MirrorFlyButtonOnDark01</item>
        <item name="mf_appbar_right_button_text_color">@color/selector_on_primary</item>
        <item name="mf_appbar_right_button_tint">@color/ondark_01</item>
        <item name="mf_appbar_right_button_background">@drawable/mf_button_uncontained_background_custom</item>
    </style>

    <style name="Widget.MirrorFly.RecyclerView.Custom">
        <item name="android:background">@color/background_50</item>
        <item name="mf_pager_recycler_view_use_divide_line">true</item>
        <item name="mf_pager_recycler_view_divide_line_color">@color/onlight_04</item>
        <item name="mf_pager_recycler_view_divide_line_height">@dimen/mf_size_1</item>
        <item name="mf_pager_recycler_view_divide_margin_left">0dp</item>
        <item name="mf_pager_recycler_view_divide_margin_right">0dp</item>
    </style>

    <style name="Widget.MirrorFly.ChatPreview.Custom">
        <item name="android:background">@drawable/selector_rectangle_light</item>
        <item name="mf_chat_preview_title_appearance">@style/MirrorFlySubtitle1OnLight01</item>
        <item name="mf_chat_preview_member_count_appearance">@style/MirrorFlyCaption1OnLight02</item>
        <item name="mf_chat_preview_updated_at_appearance">@style/MirrorFlyCaption2OnLight02</item>
        <item name="mf_chat_preview_unread_count_appearance">@style/MirrorFlyCaption1OnDark01</item>
        <item name="mf_chat_preview_last_message_appearance">@style/MirrorFlyBody3OnLight03</item>
    </style>

    <style name="Widget.MirrorFly.ToastView.Custom">
        <item name="mf_toast_background">@drawable/mf_toast_background_light</item>
        <item name="mf_toast_text_appearance">@style/MirrorFlyBody3OnDark01</item>
    </style>


</resources>