Group audio/video Call

Group audio and video call is a feature that allows users to communicate between group of members throught audio and video call. Group audio and video call appears in the DashBoardActivity class.

In MirrorFly UIKit for Android, there are currently two type of calls that users can Communicate : audio and video. These audio and video call can be communicate with other members in the single chat and group chat.

Group Audio Screen

Group Video Screen

Group Call Flow

Add participants Flow

After call is connected, you can able to add users to the ongoing call. once they accepted the incoming call, they will join in the ongoing call.

The following are the user selection AppBar style and attributes for customizations.

<style name="Custom" parent="MirrorFly">

<item name="mf_appbar_style">@style/CustomAppBar</item>

</style>

<style name="CustomAppBar" parent="Widget.MirrorFly.AppBar">

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

The following are the user selection Recyclerview style and attributes for customizations.

<style name="Custom" parent="MirrorFly">

<item name="mf_recycler_view_style">@style/CustomRecyclerView</item>

</style>

<style name="CustomRecyclerView" 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>

Customize the style of user selection items

To customize the style of selection items, change the UIKit-defined style values in the res/values/themes.xml file. The table below shows the style of user selection 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>

<style name="custom" parent="Widget.MirrorFly.UserPreview">

<item name="android:background"></item>

<item name="mf_contact_preview_nickname_appearance"></item>

</style>

List of attributes of Widget.MirrorFly.UserPreview

Attribute	Resource type	Description
android:background	drawable/color	The user item background.
mf_user_preview_nickname_appearance	text appearance	Size, color, font, and style of the user nickname.

Note : To apply the declared group id Group Jid,call_type CallType.AUDIO_CALL || CallType.VIDEO_CALL, custom styles R.style.Custom to the ContactFragment.Builder as follows:

ContactFragment.Builder(R.style.Custom)

.setUseHeader(true)

.setHeaderTitle("Add Participants")

.setGroupID(GROUPID)

.setCallType(CALL_TYPE)

.build()