Android Java Live Audio Room Kit SDK Customize the bottom menu bar buttons

Documentation
Live Audio Room Kit
Customize prebuilt features
Customize the bottom menu bar buttons

Last updated：2023-06-04 16:49

Live Audio Room Kit (ZegoUIKitPrebuiltLiveAudioRoom) allows you to configure the buttons of the menu bar. You can remove the default buttons or add custom ones. If necessary, you can configure the bottomMenuBarConfig:

hostButtons: Use this to set the prebuilt-in buttons for a host to use.
speakerButtons: Use this to set the prebuilt-in buttons for a speaker to use.
audienceButtons: Use this to set the prebuilt-in buttons for an audience to use.
menuBarButtonsMaxCount: Maximum number of buttons that can be displayed by the menu bar. Value range [1 - 5], the default value is 5.
showInRoomMessageButton: Whether to display the message button, displayed by default.

If the total number of built-in buttons and custom buttons does not exceed menuBarButtonsMaxCount, all buttons will be displayed. Otherwise, other buttons that cannot be displayed will be hidden in the three dots (⋮) button. Clicking this button will pop up the bottom sheet to display the remaining buttons. The following shows the effect and the reference code:

Java Kotlin

public class LiveAudioRoomActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_call);

        addFragment();
    }

    public void addFragment() {
        long appID = yourAppID;
        String appSign = yourAppSign;
        String userID = yourUserID;
        String userName = yourUserName;

        boolean isHost = getIntent().getBooleanExtra("host", false);
        String roomID = getIntent().getStringExtra("roomID");

        ZegoUIKitPrebuiltLiveAudioRoomConfig config;
        if (isHost) {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.host();
        } else {
            config = ZegoUIKitPrebuiltLiveAudioRoomConfig.audience();
        }

        config.bottomMenuBarConfig.hostButtons = Arrays.asList(ZegoMenuBarButtonName.TOGGLE_MICROPHONE_BUTTON, ZegoMenuBarButtonName.SHOW_MEMBER_LIST_BUTTON);
        config.bottomMenuBarConfig.speakerButtons = Arrays.asList(ZegoMenuBarButtonName.TOGGLE_MICROPHONE_BUTTON, ZegoMenuBarButtonName.SHOW_MEMBER_LIST_BUTTON);
        config.bottomMenuBarConfig.audienceButtons = Arrays.asList(ZegoMenuBarButtonName.SHOW_MEMBER_LIST_BUTTON);

        ZegoUIKitPrebuiltLiveAudioRoomFragment fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(appID, appSign, userID, userName,roomID,config);
        getSupportFragmentManager().beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow();
    }
}

class LiveAudioRoomActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_live)
        addFragment()
    }

    private fun addFragment() {
        val appID: Long = yourAppID
        val appSign = yourAppSign
        val userID = YourUserID
        val userName = YourUserName

        val isHost = intent.getBooleanExtra("host", false)
        val roomID = intent.getStringExtra("roomID")

        val config: ZegoUIKitPrebuiltLiveAudioRoomConfig = if (isHost) {
            ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
        } else {
            ZegoUIKitPrebuiltLiveAudioRoomConfig.audience()
        }

        config.bottomMenuBarConfig.hostButtons = Arrays.asList(ZegoMenuBarButtonName.TOGGLE_MICROPHONE_BUTTON, ZegoMenuBarButtonName.SHOW_MEMBER_LIST_BUTTON)
        config.bottomMenuBarConfig.speakerButtons = Arrays.asList(ZegoMenuBarButtonName.TOGGLE_MICROPHONE_BUTTON, ZegoMenuBarButtonName.SHOW_MEMBER_LIST_BUTTON)
        config.bottomMenuBarConfig.audienceButtons = Arrays.asList(ZegoMenuBarButtonName.SHOW_MEMBER_LIST_BUTTON)

        val fragment = ZegoUIKitPrebuiltLiveAudioRoomFragment.newInstance(appID, appSign, userID, userName, roomID, config)
        supportFragmentManager.beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow()
    }
}

In addition, you can also achieve the same effect with these two methods: addButtonToMenuBarand clearBottomBarExtendButtons.

Java Kotlin

class ZegoUIKitPrebuiltLiveAudioRoomFragment{
//...
void addButtonToMenuBar(List<View> widgets, ZegoLiveAudioRoomRole role)；
void clearBottomBarExtendButtons(ZegoLiveAudioRoomRole role)；
//...
}

class ZegoUIKitPrebuiltLiveAudioRoomFragment{
//...
fun addButtonToMenuBar(widgets:List<View>?, role:ZegoLiveAudioRoomRole?)
fun clearBottomBarExtendButtons(role:ZegoLiveAudioRoomRole?)
//...
}

ZEGO UIKits

Cloud Communications Products

Low-Code Products

AIGC

Supporting Services

Customize the bottom menu bar buttons