Customize the menu bar
Live Streaming Kit (ZegoUIkitPrebuiltLiveStreaming) allows you to configure the buttons of the bottom 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 buttons for a host to use.coHostButtons: Use this to set the buttons for a co-host to use.audienceButtons: Use this to set the 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.showMemberButton: Whether to display the member list button, displayed by default.
Java
Kotlin
public class LiveActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_live);
long appID = YourAppID;
String appSign = YourAppSign;
String userID = "userID";
String userName = "userName";
String liveID = "testLiveID";
// Modify your custom configurations here.
ZegoUIKitPrebuiltLiveStreamingConfig config;
if (isHost) {
config = ZegoUIKitPrebuiltLiveStreamingConfig.host();
} else {
config = ZegoUIKitPrebuiltLiveStreamingConfig.audience();
}
config.bottomMenuBarConfig.hostButtons = Arrays.asList(ZegoMenuBarButtonName.TOGGLE_CAMERA_BUTTON);
config.bottomMenuBarConfig.coHostButtons = Arrays.asList(ZegoMenuBarButtonName.TOGGLE_CAMERA_BUTTON,ZegoMenuBarButtonName.COHOST_CONTROL_BUTTON);
config.bottomMenuBarConfig.audienceButtons = Arrays.asList(ZegoMenuBarButtonName.COHOST_CONTROL_BUTTON);
ZegoUIKitPrebuiltLiveStreamingFragment fragment = ZegoUIKitPrebuiltLiveStreamingFragment.newInstance(appID, appSign, userID, userName, liveID, config);
getSupportFragmentManager()
.beginTransaction()
.replace(R.id.fragment_container, fragment)
.commitNow();
}
}
1
class LiveActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_live)
val appID: Long = YourAppID
val appSign: String = YourAppSign
val userID = "userID"
val userName = "userName"
val liveID = "testLiveID"
// Modify your custom configurations here.
val config: ZegoUIKitPrebuiltLiveStreamingConfig = if (isHost) {
ZegoUIKitPrebuiltLiveStreamingConfig.host()
} else {
ZegoUIKitPrebuiltLiveStreamingConfig.audience()
}
config.bottomMenuBarConfig.hostButtons = Arrays.asList<Any>(ZegoMenuBarButtonName.TOGGLE_CAMERA_BUTTON)
config.bottomMenuBarConfig.coHostButtons = Arrays.asList<Any>(ZegoMenuBarButtonName.TOGGLE_CAMERA_BUTTON, ZegoMenuBarButtonName.COHOST_CONTROL_BUTTON)
config.bottomMenuBarConfig.audienceButtons =
Arrays.asList<Any>(ZegoMenuBarButtonName.COHOST_CONTROL_BUTTON)
val fragment = ZegoUIKitPrebuiltLiveStreamingFragment
.newInstance(appID, appSign, userID, userName, liveID, config)
supportFragmentManager
.beginTransaction()
.replace(R.id.fragment_container, fragment)
.commitNow()
}
}
1
Moreover, you can also use the addButtonToBottomMenuBar and clearBottomMenuBarExtendButtons methods to add or clear your customized buttons to the menu bar.
If the total number of built-in buttons and custom buttons does not exceed 5, 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 effect is as follows:
