Video View Customisation

Customize the main video container appearance, aspect ratio, and UI controls in Android calls

Quick Reference for AI Agents & Developers

// Customize main video container
val videoSettings = MainVideoContainerSetting()
videoSettings.mainVideoAspectRatio = CometChatCallsConstants.ASPECT_RATIO_CONTAIN
videoSettings.setFullScreenButtonParams(CometChatCallsConstants.POSITION_BOTTOM_RIGHT, true)
videoSettings.setNameLabelParams(CometChatCallsConstants.POSITION_BOTTOM_LEFT, true, "#333333")
videoSettings.setZoomButtonParams(CometChatCallsConstants.POSITION_BOTTOM_RIGHT, true)

// Apply to call settings
val callSettings = CometChatCalls.CallSettingsBuilder(context, videoContainer)
    .setMainVideoContainerSetting(videoSettings)
    .build()

Prerequisites: Default Calling or Direct Calling setup

This section guides you through customizing the main video container.

Implementation

Once you have decided to implement Default Calling or Direct Calling and followed the steps to implement them, a few additional methods will help you quickly customize the main video container.

Make sure your callSettings is configured accordingly for Default Calling or Direct Calling.

Main Video Container Setting

The MainVideoContainerSetting class is required when you want to customize the main video view. You need to pass the object of the MainVideoContainerSetting class in the setMainVideoContainerSetting() method of the CallSettingsBuilder.

Setting	Description
setMainVideoAspectRatio(String aspectRatio)	This method is used to set the aspect ratio of main video. The default value is CometChatCallsConstants.ASPECT_RATIO_CONTAIN Possible Values: 1. CometChatCallsConstants.ASPECT_RATIO_CONTAIN 2. CometChatCallsConstants.ASPECT_RATIO_COVER
setFullScreenButtonParams(String position, Boolean visibility)	This method is used to set the position & visibility parameter of the full screen button. By default the full screen button is visible in the CometChatCallsConstants.POSITION_BOTTOM_RIGHT position. Possible Values for position: 1. CometChatCallsConstants.POSITION_TOP_LEFT 2. CometChatCallsConstants.POSITION_TOP_RIGHT 3. CometChatCallsConstants.POSITION_BOTTOM_LEFT 4. CometChatCallsConstants.POSITION_BOTTOM_RIGHT Possible Values for visibility: 1. true 2. false
setNameLabelParams(String position, Boolean visibility, String backgroundColor)	This method is used to set the position, visibility & background color of the name label. By default the name label is visible in the CometChatCallsConstants.POSITION_BOTTOM_LEFT position with a background-color #333333 Possible Values for position: 1. CometChatCallsConstants.POSITION_TOP_LEFT 2. CometChatCallsConstants.POSITION_TOP_RIGHT 3. CometChatCallsConstants.POSITION_BOTTOM_LEFT 4. CometChatCallsConstants.POSITION_BOTTOM_RIGHT Possible Values for visibility: 1. true 2. false
setZoomButtonParams(String position, Boolean visibility)	This method is used to set the position, visibility of the zoom button. By default the zoom button is visible in the CometChatCallsConstants.POSITION_BOTTOM_RIGHT position. Possible Values for position: 1. CometChatCallsConstants.POSITION_TOP_LEFT 2. CometChatCallsConstants.POSITION_TOP_RIGHT 3. CometChatCallsConstants.POSITION_BOTTOM_LEFT 4. CometChatCallsConstants.POSITION_BOTTOM_RIGHT Possible Values for visibility: 1. true 2. false
setUserListButtonParams(String position, Boolean visibility)	This method is used to set the position, visibility of the user list button. By default the user list button is visible in the CometChatCallsConstants.POSITION_BOTTOM_RIGHT position. Possible Values for position: 1. CometChatCallsConstants.POSITION_TOP_LEFT 2. CometChatCallsConstants.POSITION_TOP_RIGHT 3. CometChatCallsConstants.POSITION_BOTTOM_LEFT 4. CometChatCallsConstants.POSITION_BOTTOM_RIGHT Possible Values for visibility: 1. true 2. false

Example:

Java

MainVideoContainerSetting videoSettings = new MainVideoContainerSetting();

videoSettings.setMainVideoAspectRatio(CometChatCallsConstants.ASPECT_RATIO_CONTAIN);
videoSettings.setFullScreenButtonParams(CometChatCallsConstants.POSITION_BOTTOM_RIGHT, true);
videoSettings.setNameLabelParams(CometChatCallsConstants.POSITION_BOTTOM_LEFT, true, "#333333");
videoSettings.setZoomButtonParams(CometChatCallsConstants.POSITION_BOTTOM_RIGHT, true);
videoSettings.setUserListButtonParams(CometChatCallsConstants.POSITION_BOTTOM_RIGHT, true);   

Kotlin

val videoSettings = MainVideoContainerSetting()

videoSettings.mainVideoAspectRatio = CometChatCallsConstants.ASPECT_RATIO_CONTAIN
videoSettings.setFullScreenButtonParams(CometChatCallsConstants.POSITION_BOTTOM_RIGHT, true)
videoSettings.setNameLabelParams(CometChatCallsConstants.POSITION_BOTTOM_LEFT, true, "#333333")
videoSettings.setZoomButtonParams(CometChatCallsConstants.POSITION_BOTTOM_RIGHT, true)
videoSettings.setUserListButtonParams(CometChatCallsConstants.POSITION_BOTTOM_RIGHT, true)   

---

Best Practices

Choose Appropriate Aspect Ratio

Use ASPECT_RATIO_CONTAIN to show the entire video without cropping (may have letterboxing). Use ASPECT_RATIO_COVER to fill the container completely (may crop edges). Choose based on your UI design requirements.

Position Controls Strategically

Place UI controls (full screen, zoom, user list buttons) in positions that don’t overlap with important content. Test on different screen sizes to ensure controls remain accessible.

Use Contrasting Background Colors

Choose name label background colors that contrast well with your video content. The default #333333 works well for most scenarios, but adjust based on your app’s theme.

Test on Multiple Devices

Test video view customizations on devices with different screen sizes and aspect ratios (phones, tablets, foldables) to ensure consistent appearance.

Troubleshooting

Video Appears Stretched or Cropped

Symptom: Video doesn’t display correctly, appearing stretched, squashed, or cropped unexpectedly.

Cause: Incorrect aspect ratio setting for your use case.

Solution: Switch between ASPECT_RATIO_CONTAIN (shows full video with possible letterboxing) and ASPECT_RATIO_COVER (fills container, may crop edges) to find the best fit for your layout.

UI Controls Not Visible

Symptom: Full screen, zoom, or user list buttons are not showing up.

Cause: Visibility is set to false or controls are positioned outside the visible area.

Solution: Verify the visibility parameter is set to true in the respective button params methods. Check that the video container has sufficient dimensions to display controls.

Name Label Text Not Readable

Symptom: Participant names are difficult to read on the video.

Cause: Background color doesn’t provide enough contrast with the text.

Solution: Adjust the background color in setNameLabelParams() to provide better contrast. Use darker colors (#000000 to #666666) for better text readability.

Next Steps

Default Calling

Implement one-on-one and group calling with default UI

Direct Calling

Initiate calls directly without user interaction

Presenter Mode

Create webinar-style calling experiences

Standalone Calling

Use Calls SDK without Chat SDK integration