Custom Theme Style

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>