Common Style

StringSet#

String customization is identical to style customization: change the UIKit-defined style values in the res/strings.xml file which consists of the following xml elements.

 <!-- 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_chat">Chat</string>
    <string name="mf_text_header_select_members">Select members</string>
    <string name="mf_text_header_forward_message">Forward to</string>
    <string name="mf_text_channel_input_reply_text_hint">Reply to message</string>
    <string name="mf_text_header_media_preview">Media Preview</string>


    <!-- Views -->
    <string name="mf_text_yesterday">Yesterday</string>
    <string name="mf_text_button_edit">Edit</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>

    <!-- Recent Chat List -->
    <string name="mf_text_chat_list_title_unknown">(No name)</string>
    <string name="mf_text_chat_list_unread_count">99+</string>
    <string name="mf_text_chat_list_empty">No chats</string>
    <string name="mf_text_select_contact_type">Contact Type</string>

    <!-- Chat -->
    <string name="mf_text_chat_input_text_hint">Enter message</string>
    <string name="mf_text_chat_input_camera">Camera</string>
    <string name="mf_text_chat_input_gallery">Gallery</string>
    <string name="mf_text_chat_typing_indicator_single">%s is typing&#8230;</string>
    <string name="mf_text_chat_last_seen_at">Last seen %s</string>
    <string name="mf_text_chat_reaction_count_max">99</string>
    <string name="mf_text_chat_message_empty">No messages</string>
       <string name="mf_text_chat_anchor_reply">Reply</string>
    <string name="mf_text_chat_anchor_forward">Forward</string>

     <!-- Contact List -->
    <string name="mf_text_user_list_empty">No contacts</string>
    <string name="mf_text_error_get_user_list">Couldn\&#39;t retrieve contact list.</string>

How to apply string set#

Apply_String_Set

IconSet#

Listed below are all the icons used in UIKit for Android. Icons can be changed by overwriting the res/drawable files with the same name.

Icon name	Image	Description
ic_close		Closes a file viewer.
ic_delete		Deletes an item.
ic_delivered		Indicates the message has been delivered to the recipient user.
ic_hour		Indicates the message is in sending state to the server.
ic_seen		Inidicates the message has been seen/read by the recipient user.
ic_sent		Indicates the message has been sent to the server.
ic_upload		Uploads a media message
iconAdd		Adds a file.
iconBack		Goes back to the previous page.
iconChevronDown		Adds a file.
iconError		Adds a file
iconForward		Forwards a message.
iconReply		Indicates reply to a message.
iconSend		Sends a message.
iconSingleChat		Indicates Single Chat.
iconSpinner		Indicates that a message or a screen is loading.
plumflack		Invites a user to a chat from the contact list.
User		Default Avatar of the User.

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>

        <!-- 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>
        

    </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>

</resources>

StyleSet#

The StyleSet is a collection of styles applied to UIKit items by default.

Header#

The header acts as an optional ActionBar/ Toolbar 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">@color/background_50</item>
    <item name="mf_appbar_title_appearance">@style/MirrorFlyH2OnLight01</item>
    <item name="mf_appbar_description_appearance">@style/MirrorFlyCaption2OnLight02</item>
    <item name="mf_appbar_button_tint">@color/primary_300</item>
    <item name="mf_appbar_divider_color">@color/onlight_04</item>
    <item name="mf_appbar_left_button_text_appearance">@style/MirrorFlyButtonPrimary300</item>
    <item name="mf_appbar_left_button_text_color">@color/mf_button_uncontained_text_color_light</item>
    <item name="mf_appbar_left_button_tint">@color/primary_300</item>
    <item name="mf_appbar_left_button_background">@drawable/mf_button_uncontained_background_light</item>
    <item name="mf_appbar_right_button_text_appearance">@style/MirrorFlyButtonPrimary300</item>
    <item name="mf_appbar_right_button_text_color">@color/mf_button_uncontained_text_color_light</item>
    <item name="mf_appbar_right_button_tint">@color/primary_300</item>
    <item name="mf_appbar_right_button_background">@drawable/mf_button_uncontained_background_light</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">@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>

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">@drawable/mf_rounded_rectangle_light</item>
        <item name="mf_dialog_view_background_bottom">@drawable/mf_top_rounded_rectangle_light</item>
        <item name="mf_dialog_view_background_anchor">@drawable/layer_dialog_anchor_background_light</item>
        <item name="mf_dialog_view_title_appearance">@style/MirrorFlyH1OnLight01</item>
        <item name="mf_dialog_view_message_appearance">@style/MirrorFlySubtitle2OnLight01</item>
        <item name="mf_dialog_view_list_item_appearance">@style/MirrorFlySubtitle2OnLight01</item>
        <item name="mf_dialog_view_list_item_text_color">@color/mf_selector_enabled_01_light</item>
        <item name="mf_dialog_view_list_item_background">@drawable/selector_rectangle_light</item>
        <item name="mf_dialog_view_edit_text_appearance">@style/MirrorFlySubtitle2OnLight01</item>
        <item name="mf_dialog_view_edit_text_tint">@color/primary_300</item>
        <item name="mf_dialog_view_edit_text_cursor_drawable">@drawable/mf_message_input_cursor_light</item>
        <item name="mf_dialog_view_edit_text_hint_color">@color/onlight_03</item>
        <item name="mf_dialog_view_icon_tint">@color/mf_selector_enabled_primary_light</item>

        <item name="mf_dialog_view_positive_button_text_appearance">@style/MirrorFlyButtonPrimary300</item>
        <item name="mf_dialog_view_positive_button_text_color">@color/mf_button_uncontained_text_color_light</item>
        <item name="mf_dialog_view_positive_button_background">@drawable/mf_button_uncontained_background_light</item>
        <item name="mf_dialog_view_negative_button_text_appearance">@style/MirrorFlyButtonPrimary300</item>
        <item name="mf_dialog_view_negative_button_text_color">@color/mf_button_uncontained_text_color_light</item>
        <item name="mf_dialog_view_negative_button_background">@drawable/mf_button_uncontained_background_light</item>
        <item name="mf_dialog_view_neutral_button_text_appearance">@style/MirrorFlyButtonPrimary300</item>
        <item name="mf_dialog_view_neutral_button_text_color">@color/mf_button_uncontained_text_color_light</item>
        <item name="mf_dialog_view_neutral_button_background">@drawable/mf_button_uncontained_background_light</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">@color/background_50</item>
   <item name="mf_status_frame_text_appearance">@style/MirrorFlyBody3OnLight03</item>
   <item name="mf_status_frame_icon_tint">@color/onlight_03</item>
   <item name="mf_status_frame_action_text_appearance">@style/MirrorFlyButtonPrimary300</item>
   <item name="mf_status_frame_action_background">@drawable/selector_button_retry_light</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#

ChatTypeView

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">@color/background_50</item>
    <item name="mf_select_channel_type_menu_background">@drawable/mf_button_uncontained_background_light</item>
    <item name="mf_select_channel_type_menu_title_appearance">@style/MirrorFlyH1OnLight01</item>
    <item name="mf_select_channel_type_menu_name_appearance">@style/MirrorFlyCaption2OnLight01</item>
    <item name="mf_select_channel_type_menu_icon_tint">@color/primary_300</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	text 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.