Help Center> Meeting> Client SDK Reference> Android SDK> API Reference> UI Customization> Customizing the Bottom Menu Bar
Updated on 2023-03-23 GMT+08:00
View PDF

Customizing the Bottom Menu Bar

You can add, delete, and customize menu items on the bottom menu bar of a meeting screen.

There are four types of bottom menu bars and four customization methods:

1. CallAudioToolbar: customizes the bottom menu bar for P2P voice calls (see Customizing a Menu for P2P Voice Calls).

2. CallVideoToolbar: customizes the bottom menu bar for P2P video calls (see Customizing a Menu for P2P Video Calls).

3. ConfAudioToolbar: customizes the bottom menu bar for voice meetings (see Customizing a Menu for Voice Meetings).

4. ConfVideoToolbar: customizes the bottom menu bar for video meetings (see Customizing a Menu for Video Meetings).

Application Scenarios

Menu items on the bottom menu bar need to be adjusted.

Precautions

1. sdkConfig takes effect only when this configuration is passed during SDK initialization.

Customizing Menu Settings

Sample Code

1
2
3
4
5
6
7
 
ToolBarMenuProxy toolBarMenuProxy = new ToolBarMenuProxy();
toolBarMenuProxy.setCallAudioToolbarHandle(new CustomCallAudioToolbarHandle());
toolBarMenuProxy.setCallVideoToolbarHandle(new CustomCallVideoToolbarHandle());
toolBarMenuProxy.setConfAudioToolbarHandle(new CustomConfAudioToolbarHandle());
toolBarMenuProxy.setConfVideoToolbarHandle(new CustomConfVideoToolbarHandle());
sdkConfig.setToolBarMenuProxy(toolBarMenuProxy);
sdkConfig.setParticipantMenuStrategy(new CustomParticipantMenuHandle());

Customizing a Menu for P2P Voice Calls

Figure 1 Custom menu for P2P voice calls

Sample Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
/**
 * Demonstrate the custom toolbar in the voice call scenario.
 */
public class CustomCallAudioToolbarHandle implements IToolbarMenuStrategy {
    @Override
    public List<IConfMenu> buildMenuItems() {
        List<IConfMenu> confMenus = new ArrayList<>();
        confMenus.add(new MicMenu());
        confMenus.add(new SpeakerMenu());
        if (TupConfig.isNeedScreenShare()) {
            confMenus.add(new ShareMenu());
        }
        confMenus.add(new InviteMenu());
        confMenus.add(new TransVideoMenu());
        return confMenus;
    }
    @Override
    public List<IConfMenu> buildMoreMenuItems() {
        return null;
    }
    @Override
    public List<IConfMenu> buildSettingMenuItems() {
        return null;
    }
}

Customizing a Menu for P2P Video Calls

Figure 2 Custom menu for P2P video calls
Figure 3 Custom More menu for P2P video calls
Figure 4 Sample of a custom Meeting settings menu for video calls

Sample Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
/**
 * Demonstrate the custom toolbar in the video call scenario.
 */
public class CustomCallVideoToolbarHandle implements IToolbarMenuStrategy {
    @Override
    public List<IConfMenu> buildMenuItems() {
        List<IConfMenu> confMenus = new ArrayList<>();
        confMenus.add(new MicMenu());
        confMenus.add(new SpeakerMenu());
        confMenus.add(new CameraMenu());
        if (TupConfig.isNeedScreenShare()) {
            confMenus.add(new ShareMenu());
        }
        confMenus.add(new InviteMenu());
        confMenus.add(new MoreMenu());
        return confMenus;
    }
    @Override
    public List<IConfMenu> buildMoreMenuItems() {
        List<IConfMenu> confMenus = new ArrayList<>();
        confMenus.add(new InviteMoreMenu());
        confMenus.add(new SwitchCameraMenu());
        confMenus.add(new CallVideoToAudioMenu());
        confMenus.add(new CallAudioToVideoMenu());
        confMenus.add(new ConfSettingMenu());
        return confMenus;
    }
    @Override
    public List<IConfMenu> buildSettingMenuItems() {
        List<IConfMenu> menus = new ArrayList<>();

        List<IConfMenu> audioVideomenuChildren = new ArrayList<>();
        IConfMenu beautyMenu = new SwitchMenu(com.huawei.hwmmobileconfui.R.id.hwmconf_confsetting_beauty, R.string.hwmconf_setting_beauty, true);
        IConfMenu pipMenu = new SwitchMenu(com.huawei.hwmmobileconfui.R.id.hwmconf_confsetting_hide_self, R.string.hwmconf_setting_pip, true);
        audioVideomenuChildren.add(beautyMenu);
        audioVideomenuChildren.add(pipMenu);
        MenuContainer audioVideoMenuContainer = new MenuContainer(com.huawei.hwmmobileconfui.R.id.hwmconf_setting_menu_audio_video, R.string.hwmconf_setting_audio_video, audioVideomenuChildren);

        List<IConfMenu> commonMenuChildren = new ArrayList<>();
        // Detect the network quality.
        IConfMenu networkDetectMenu = new RouterMenu(com.huawei.hwmmobileconfui.R.id.hwmconf_confsetting_network_detect, R.string.hwmconf_network_check, "cloudlink://hwmeeting/networkdetection");
        commonMenuChildren.add(networkDetectMenu);
        MenuContainer commonMenuContainer = new MenuContainer(com.huawei.hwmmobileconfui.R.id.hwmconf_setting_menu_common, R.string.hwmconf_setting_common, commonMenuChildren);

        menus.add(audioVideoMenuContainer);
        menus.add(commonMenuContainer);
        return menus;
    }
}

Customizing a Menu for Voice Meetings

Figure 5 Sample of a custom menu for voice meetings
Figure 6 Sample of a custom More menu for voice meetings
Figure 7 Sample of a custom Meeting settings menu for voice meetings

Sample Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
/**
 * Demonstrate the custom toolbar in the voice meeting scenario.
 */
public class CustomConfAudioToolbarHandle implements IToolbarMenuStrategy {
    @Override
    public List<IConfMenu> buildMenuItems() {
        List<IConfMenu> confMenus = new ArrayList<>();
        confMenus.add(new MicMenu());
        confMenus.add(new SpeakerMenu());
        confMenus.add(new ParticipantMenu());
        // [Demo] Add a custom menu.
        confMenus.add(new CustomMenu());
        confMenus.add(new MoreMenu());
        return confMenus;
    }
    @Override
    public List<IConfMenu> buildMoreMenuItems() {
        List<IConfMenu> confMenus = new ArrayList<>();
        confMenus.add(new ChatMenu());
        confMenus.add(new HandsUpOrDownMenu());
        confMenus.add(new OpenOrCloseRecordMenu());
        confMenus.add(new ConfSettingMenu());
        // [Demo] Add a custom menu.
        confMenus.add(new CustomMenu());
        return confMenus;
    }
    @Override
    public List<IConfMenu> buildSettingMenuItems() {
        List<IConfMenu> menus = new ArrayList<>();

        List<IConfMenu> audioVideomenuChildren = new ArrayList<>();
        IConfMenu howlDetectMenu = new SwitchMenu(com.huawei.hwmmobileconfui.R.id.hwmconf_confsetting_whistle_detection, R.string.hwmconf_setting_howling_detect, true);
        audioVideomenuChildren.add(howlDetectMenu);
        MenuContainer audioVideoMenuContainer = new MenuContainer(com.huawei.hwmmobileconfui.R.id.hwmconf_setting_menu_audio_video, R.string.hwmconf_setting_audio_video, audioVideomenuChildren);

        List<IConfMenu> securityMenuChildren = new ArrayList<>();
        // Lock the meeting.
        IConfMenu lockConfMenu = new SwitchMenu(com.huawei.hwmmobileconfui.R.id.hwmconf_confsetting_lock_meeting, R.string.hwmconf_lock, false);
        securityMenuChildren.add(lockConfMenu);
        MenuContainer securityMenuContainer = new MenuContainer(com.huawei.hwmmobileconfui.R.id.hwmconf_setting_menu_security, R.string.hwmconf_setting_safe, securityMenuChildren);

        List<IConfMenu> attendeePermissionMenuChildren = new ArrayList<>();
        // Allow the unmute operation.
        IConfMenu allowReleaseMuteMenu = new SwitchMenu(com.huawei.hwmmobileconfui.R.id.hwmconf_confsetting_allow_unmute, R.string.hwmconf_allow_ummute_self, false);
        IConfMenu allowShareMuteMenu = new SwitchMenu(com.huawei.hwmmobileconfui.R.id.hwmconf_confsetting_allow_sharing, R.string.hwmconf_allow_sharing, false);
        attendeePermissionMenuChildren.add(allowReleaseMuteMenu);
        attendeePermissionMenuChildren.add(allowShareMuteMenu);
        MenuContainer attendeePermissionMenuContainer = new MenuContainer(com.huawei.hwmmobileconfui.R.id.hwmconf_setting_menu_paticipant_permission, R.string.hwmconf_setting_participant_permission, attendeePermissionMenuChildren);

        List<IConfMenu> commonMenuChildren = new ArrayList<>();
        // Detect the network quality.
        IConfMenu networkDetectMenu = new RouterMenu(com.huawei.hwmmobileconfui.R.id.hwmconf_confsetting_network_detect, R.string.hwmconf_network_check, "cloudlink://hwmeeting/networkdetection");
        commonMenuChildren.add(networkDetectMenu);
        MenuContainer commonMenuContainer = new MenuContainer(com.huawei.hwmmobileconfui.R.id.hwmconf_setting_menu_common, R.string.hwmconf_setting_common, commonMenuChildren);

        menus.add(audioVideoMenuContainer);
        menus.add(securityMenuContainer);
        menus.add(attendeePermissionMenuContainer);
        menus.add(commonMenuContainer);
        return menus;
    }
}

Customizing a Menu for Video Meetings

Figure 8 Sample of a custom menu for video meetings
Figure 9 Sample of a custom More menu for video meetings
Figure 10 Sample of a custom Meeting settings menu for video meetings

Sample Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
/**
 * Demonstrate the custom toolbar in the video meeting scenario.
 */
public class CustomConfVideoToolbarHandle implements IToolbarMenuStrategy {
    @Override
    public List<IConfMenu> buildMenuItems() {
        List<IConfMenu> confMenus = new ArrayList<>();
        confMenus.add(new MicMenu());
        confMenus.add(new CameraMenu());
        confMenus.add(new ParticipantMenu());
        // [Demo] Add a custom menu.
        confMenus.add(new CustomMenu());
        confMenus.add(new MoreMenu());
        return confMenus;
    }
    @Override
    public List<IConfMenu> buildMoreMenuItems() {
        List<IConfMenu> confMenus = new ArrayList<>();
        confMenus.add(new ChatMenu());
        confMenus.add(new HandsUpOrDownMenu());
        confMenus.add(new OpenOrCloseRecordMenu());
        confMenus.add(new SwitchCameraMenu());
        confMenus.add(new ConfSettingMenu());
        // [Demo] Add a custom menu.
        confMenus.add(new CustomMenu());
        return confMenus;
    }
    @Override
    public List<IConfMenu> buildSettingMenuItems() {
        List<IConfMenu> menus = new ArrayList<>();

        List<IConfMenu> audioVideomenuChildren = new ArrayList<>();
        IConfMenu howlDetectMenu = new SwitchMenu(com.huawei.hwmmobileconfui.R.id.hwmconf_confsetting_whistle_detection, R.string.hwmconf_setting_howling_detect, true);
        IConfMenu beautyMenu = new SwitchMenu(com.huawei.hwmmobileconfui.R.id.hwmconf_confsetting_beauty, R.string.hwmconf_setting_beauty, true);
        IConfMenu pipMenu = new SwitchMenu(com.huawei.hwmmobileconfui.R.id.hwmconf_confsetting_hide_self, R.string.hwmconf_setting_pip, true);
        audioVideomenuChildren.add(howlDetectMenu);
        audioVideomenuChildren.add(beautyMenu);
        audioVideomenuChildren.add(pipMenu);
        MenuContainer audioVideoMenuContainer = new MenuContainer(com.huawei.hwmmobileconfui.R.id.hwmconf_setting_menu_audio_video, R.string.hwmconf_setting_audio_video, audioVideomenuChildren);

        List<IConfMenu> securityMenuChildren = new ArrayList<>();
        // Lock the meeting.
        IConfMenu lockConfMenu = new SwitchMenu(com.huawei.hwmmobileconfui.R.id.hwmconf_confsetting_lock_meeting, R.string.hwmconf_lock, false);
        securityMenuChildren.add(lockConfMenu);
        MenuContainer securityMenuContainer = new MenuContainer(com.huawei.hwmmobileconfui.R.id.hwmconf_setting_menu_security, R.string.hwmconf_setting_safe, securityMenuChildren);


        List<IConfMenu> attendeePermissionMenuChildren = new ArrayList<>();
        // Allow the unmute operation.
        IConfMenu allowReleaseMuteMenu = new SwitchMenu(com.huawei.hwmmobileconfui.R.id.hwmconf_confsetting_allow_unmute, R.string.hwmconf_allow_ummute_self, false);
        IConfMenu allowShareMuteMenu = new SwitchMenu(com.huawei.hwmmobileconfui.R.id.hwmconf_confsetting_allow_sharing, R.string.hwmconf_allow_sharing, false);
        attendeePermissionMenuChildren.add(allowReleaseMuteMenu);
        attendeePermissionMenuChildren.add(allowShareMuteMenu);
        /*
         * [Demo] Add a setting item to Meeting settings.
         */
        IConfMenu customeSettingMenuTest1 = new SwitchMenu(R.id.conf_setting_menu_test1, R.string.menu_conf_setting_menu_test1, false);
        attendeePermissionMenuChildren.add(customeSettingMenuTest1);
        MenuContainer attendeePermissionMenuContainer = new MenuContainer(com.huawei.hwmmobileconfui.R.id.hwmconf_setting_menu_paticipant_permission, R.string.hwmconf_setting_participant_permission, attendeePermissionMenuChildren);


        List<IConfMenu> commonMenuChildren = new ArrayList<>();
        // Detect the network quality.
        IConfMenu networkDetectMenu = new RouterMenu(com.huawei.hwmmobileconfui.R.id.hwmconf_confsetting_network_detect, R.string.hwmconf_network_check, "cloudlink://hwmeeting/networkdetection");
        commonMenuChildren.add(networkDetectMenu);
        MenuContainer commonMenuContainer = new MenuContainer(com.huawei.hwmmobileconfui.R.id.hwmconf_setting_menu_common, R.string.hwmconf_setting_common, commonMenuChildren);

        menus.add(audioVideoMenuContainer);
        menus.add(securityMenuContainer);
        menus.add(attendeePermissionMenuContainer);
        menus.add(commonMenuContainer);


        /*
         * [Demo] Add a group of setting items to Meeting settings.
         */
        List<IConfMenu> customChildren = new ArrayList<>();
        // Detect the network quality.
        IConfMenu customeSettingMenuTest2 = new RouterMenu(R.id.conf_setting_menu_test2, R.string.menu_conf_setting_menu_test1, "test");
        customChildren.add(customeSettingMenuTest2);
        MenuContainer customContainer = new MenuContainer(R.id.conf_setting_menu_test_group, R.string.menu_conf_setting_menu_test_group, customChildren);
        menus.add(customContainer);

        return menus;
    }
}

Parent topic: UI Customization