Starting from 4.5.0 version, the SDK allows host applications to change which buttons will appear in the call UI during a call.

• Overview
• Buttons provider
• Custom buttons
• Buttons layout

The Kaleyra Video SDK now allows host app to decide which buttons should appear in the call interface. This allows you to add, remove or change the order of the buttons in the call bottom sheet. This feature will also allow you to add custom buttons to the bottom sheet appearing alongside with SDK supplied buttons. This is an opt-in feature, if you opt-out for this feature the SDK will present the required buttons needed to support a voice or a video call, as it did in previous versions.

The buttons provider is a custom supplied function provided to the CallUI object handling the user interface for a call. This function is the customisation point your app can use to change or update the buttons presented by the call UI. This function will be invoked by the SDK whenever it is about to display the call control buttons on screen, providing a mutable set containing all the default CallButtons it will display for the current call.

By implementing the buttons provider callback, it will be possible to:

• Add call buttons to the mutable set
• Remove call buttons from the mutable set
• Sort the set according to the use case requirements
• Return a new set of call buttons

Following are shown various use cases of buttons provider implementation.

Let's pretend you want to add the "file share" button. Then in your implementation, you'd do as follows:

KaleyraVideo.conference.call.onEach { ongoingCall ->
                
	ongoingCall.buttonsProvider = { defaultButtons ->
		defaultButtons + CallUI.Button.FileShare
	}
                
}.launchIn(MainScope())

Here's an image representation showing you how adding the file share button to the default button list provided for a voice call would look like on screen:

Let's now pretend you want to remove the microphone from the list of buttons presented to the user in a call:

KaleyraVideo.conference.call.onEach { ongoingCall ->

	ongoingCall.buttonsProvider = { defaultButtons ->
		defaultButtons - CallUI.Button.Microphone
	}

}.launchIn(MainScope())

The Kaleyra Video SDK allows you to add custom buttons to the call controls interface. Here's an example:

KaleyraVideo.conference.call.onEach { ongoingCall ->

	ongoingCall.buttonsProvider = { defaultButtons ->
		defaultButtons + CallUI.Button.Custom(
			config = CallUI.Button.Custom.Configuration(
				icon = R.drawable.icon,
				text = "map",
				action = {
					Log.d("Call UI Buttons", "touched custom button!")
				},
				badgeValue = 2,
				isEnabled = true,
				accessibilityLabel = "Open map button",
				appearance = CallUI.Button.Custom.Configuration.Appearance(
					background = ContextCompat.getColor(applicationContext, R.color.my_red_color),
					tint = ContextCompat.getColor(applicationContext, R.color.my_white_color)
				)
			)
		)
	}

}.launchIn(MainScope())

When you add a custom button you are required to provide a string representing the button's title and the button's icon. If you keep a reference to the Custom Call Button object provided, and you change one of its properties, those changes will be reflected immediately on screen.

The SDK will layout the buttons grouping them into two sections, the "main" section, the one containing the buttons always visible during a call, is placed at the bottom of the screen, the second section will contain all other buttons. These buttons will appear when the user expands the bottom sheet, otherwise they will be concealed during the call. Each section is divided into rows containing the maximum number of items fitting into the available space reserved for the call controls view. When laying out the buttons provided by the buttons provider, the SDK will put the first items contained in the returned array into the main section as well as the next items until the maximum number of fitting items is reached, then if this limit is exceeded the remaining items will be put into the secondary section filling the section starting from the top left corner. Let's pretend you're buttons provider implementation returns an array containing 11 buttons:

KaleyraVideo.conference.call.onEach { ongoingCall ->

	ongoingCall.buttonsProvider = { defaultButtons ->
		setOf(
			CallUI.Button.HangUp,
			CallUI.Button.Microphone,
			CallUI.Button.Camera,
			CallUI.Button.FlipCamera,
			CallUI.Button.CameraEffects,
			CallUI.Button.AudioOutput,
			CallUI.Button.FileShare,
			CallUI.Button.ScreenShare(onTap = ScreenShare.ScreenShareTapAction.RecordEntireScreen),
			CallUI.Button.Volume,
			CallUI.Button.Chat,
			CallUI.Button.Whiteboard,
		)
	}

}.launchIn(MainScope())

Then the SDK will try to fit as many buttons as it can in the main section of the bottom sheet, moving the ones that don't fit inside that section in the "concealed" section:

As you can see from the image above the "main" section of the call controls is filled with the first 4 buttons found in the array returned by the buttonsProvider. The remaining buttons appear in the "concealed" section displayed left to right from top to bottom.