Layout & UI

Control the call layout and UI elements during an active session. These methods allow you to change the call layout, enable Picture-in-Picture mode, and update UI badges.

Prerequisites

An active call session
Access to the CallSession instance

Get CallSession Instance

Layout and UI methods are called on the CallSession singleton:

Kotlin
Java

val callSession = CallSession.getInstance()

CallSession callSession = CallSession.getInstance();

Set Layout

Change the call layout during an active session.

Kotlin
Java

// Switch to tile layout (grid view)
callSession.setLayout(LayoutType.TILE)

// Switch to spotlight layout (active speaker focus)
callSession.setLayout(LayoutType.SPOTLIGHT)

// Switch to sidebar layout
callSession.setLayout(LayoutType.SIDEBAR)

// Switch to tile layout (grid view)
callSession.setLayout(LayoutType.TILE);

// Switch to spotlight layout (active speaker focus)
callSession.setLayout(LayoutType.SPOTLIGHT);

// Switch to sidebar layout
callSession.setLayout(LayoutType.SIDEBAR);

LayoutType Enum

Value	Description
`TILE`	Grid layout showing all participants equally sized
`SPOTLIGHT`	Focus on the active speaker with others in smaller tiles
`SIDEBAR`	Main speaker with participants in a sidebar

When the layout changes, the onCallLayoutChanged(LayoutType) callback is triggered on your LayoutListener.

Picture-in-Picture Mode

Enable Picture-in-Picture (PiP) mode to allow users to continue viewing the call while using other apps.

Enable PiP

Kotlin
Java

callSession.enablePictureInPictureLayout()

callSession.enablePictureInPictureLayout();

Disable PiP

Kotlin
Java

callSession.disablePictureInPictureLayout()

callSession.disablePictureInPictureLayout();

Android PiP Integration

To fully support PiP on Android, you need to handle the activity lifecycle:

Kotlin
Java

class CallActivity : AppCompatActivity() {
    private var isInPipMode = false

    override fun onPictureInPictureModeChanged(
        isInPictureInPictureMode: Boolean,
        newConfig: Configuration
    ) {
        super.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig)
        isInPipMode = isInPictureInPictureMode
        
        if (isInPictureInPictureMode) {
            CallSession.getInstance().enablePictureInPictureLayout()
        } else {
            CallSession.getInstance().disablePictureInPictureLayout()
        }
    }

    override fun onUserLeaveHint() {
        super.onUserLeaveHint()
        // Enter PiP when user presses home button
        if (CallSession.getInstance().isSessionActive()) {
            enterPictureInPictureMode(
                PictureInPictureParams.Builder()
                    .setAspectRatio(Rational(16, 9))
                    .build()
            )
        }
    }

    override fun onStop() {
        super.onStop()
        if (isInPipMode && !isChangingConfigurations) {
            // PiP window was closed, end the call
            CallSession.getInstance().leaveSession()
        }
    }
}

public class CallActivity extends AppCompatActivity {
    private boolean isInPipMode = false;

    @Override
    public void onPictureInPictureModeChanged(
            boolean isInPictureInPictureMode,
            Configuration newConfig) {
        super.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig);
        isInPipMode = isInPictureInPictureMode;
        
        if (isInPictureInPictureMode) {
            CallSession.getInstance().enablePictureInPictureLayout();
        } else {
            CallSession.getInstance().disablePictureInPictureLayout();
        }
    }

    @Override
    protected void onUserLeaveHint() {
        super.onUserLeaveHint();
        // Enter PiP when user presses home button
        if (CallSession.getInstance().isSessionActive()) {
            enterPictureInPictureMode(
                new PictureInPictureParams.Builder()
                    .setAspectRatio(new Rational(16, 9))
                    .build()
            );
        }
    }

    @Override
    protected void onStop() {
        super.onStop();
        if (isInPipMode && !isChangingConfigurations()) {
            // PiP window was closed, end the call
            CallSession.getInstance().leaveSession();
        }
    }
}

Don’t forget to add android:supportsPictureInPicture="true" to your activity in the AndroidManifest.xml.

Set Chat Button Unread Count

Update the badge count on the chat button to show unread messages.

Kotlin
Java

// Set unread count
callSession.setChatButtonUnreadCount(5)

// Clear unread count
callSession.setChatButtonUnreadCount(0)

// Set unread count
callSession.setChatButtonUnreadCount(5);

// Clear unread count
callSession.setChatButtonUnreadCount(0);

Parameter	Type	Description
`count`	int	Number of unread messages to display on the badge

The chat button must be visible (hideChatButton(false)) for the badge to appear.

Listen for Layout Events

Kotlin
Java

callSession.addLayoutListener(this, object : LayoutListener {
    override fun onCallLayoutChanged(layoutType: LayoutType) {
        Log.d(TAG, "Layout changed to: ${layoutType.value}")
    }

    override fun onParticipantListVisible() {
        Log.d(TAG, "Participant list is now visible")
    }

    override fun onParticipantListHidden() {
        Log.d(TAG, "Participant list is now hidden")
    }

    override fun onPictureInPictureLayoutEnabled() {
        Log.d(TAG, "PiP mode enabled")
    }

    override fun onPictureInPictureLayoutDisabled() {
        Log.d(TAG, "PiP mode disabled")
    }
})

callSession.addLayoutListener(this, new LayoutListener() {
    @Override
    public void onCallLayoutChanged(LayoutType layoutType) {
        Log.d(TAG, "Layout changed to: " + layoutType.getValue());
    }

    @Override
    public void onParticipantListVisible() {
        Log.d(TAG, "Participant list is now visible");
    }

    @Override
    public void onParticipantListHidden() {
        Log.d(TAG, "Participant list is now hidden");
    }

    @Override
    public void onPictureInPictureLayoutEnabled() {
        Log.d(TAG, "PiP mode enabled");
    }

    @Override
    public void onPictureInPictureLayoutDisabled() {
        Log.d(TAG, "PiP mode disabled");
    }
});

Initial Layout Settings

Configure the initial layout when joining a session:

Kotlin
Java

val sessionSettings = CometChatCalls.SessionSettingsBuilder()
    .setLayout(LayoutType.TILE)  // Start with tile layout
    .build()

SessionSettings sessionSettings = new CometChatCalls.SessionSettingsBuilder()
    .setLayout(LayoutType.TILE)  // Start with tile layout
    .build();

Hide UI Elements

Control the visibility of various UI elements:

Kotlin
Java

val sessionSettings = CometChatCalls.SessionSettingsBuilder()
    // Panels
    .hideControlPanel(false)         // Show bottom control bar
    .hideHeaderPanel(false)          // Show top header bar
    .hideSessionTimer(false)         // Show session duration timer
    
    // Buttons
    .hideChangeLayoutButton(false)   // Show layout toggle button
    .hideChatButton(false)           // Show chat button
    .hideParticipantListButton(false) // Show participant list button
    .build()

SessionSettings sessionSettings = new CometChatCalls.SessionSettingsBuilder()
    // Panels
    .hideControlPanel(false)         // Show bottom control bar
    .hideHeaderPanel(false)          // Show top header bar
    .hideSessionTimer(false)         // Show session duration timer
    
    // Buttons
    .hideChangeLayoutButton(false)   // Show layout toggle button
    .hideChatButton(false)           // Show chat button
    .hideParticipantListButton(false) // Show participant list button
    .build();

Button Click Listeners

Listen for UI button clicks to implement custom behavior:

Kotlin
Java

callSession.addButtonClickListener(this, object : ButtonClickListener {
    override fun onChangeLayoutButtonClicked() {
        Log.d(TAG, "Layout button clicked")
    }

    override fun onChatButtonClicked() {
        Log.d(TAG, "Chat button clicked")
        // Open your chat UI
    }

    override fun onParticipantListButtonClicked() {
        Log.d(TAG, "Participant list button clicked")
    }

    // Other callbacks...
    override fun onLeaveSessionButtonClicked() {}
    override fun onRaiseHandButtonClicked() {}
    override fun onShareInviteButtonClicked() {}
    override fun onToggleAudioButtonClicked() {}
    override fun onToggleVideoButtonClicked() {}
    override fun onSwitchCameraButtonClicked() {}
    override fun onRecordingToggleButtonClicked() {}
})

callSession.addButtonClickListener(this, new ButtonClickListener() {
    @Override
    public void onChangeLayoutButtonClicked() {
        Log.d(TAG, "Layout button clicked");
    }

    @Override
    public void onChatButtonClicked() {
        Log.d(TAG, "Chat button clicked");
        // Open your chat UI
    }

    @Override
    public void onParticipantListButtonClicked() {
        Log.d(TAG, "Participant list button clicked");
    }

    // Other callbacks...
    @Override
    public void onLeaveSessionButtonClicked() {}
    @Override
    public void onRaiseHandButtonClicked() {}
    @Override
    public void onShareInviteButtonClicked() {}
    @Override
    public void onToggleAudioButtonClicked() {}
    @Override
    public void onToggleVideoButtonClicked() {}
    @Override
    public void onSwitchCameraButtonClicked() {}
    @Override
    public void onRecordingToggleButtonClicked() {}
});

Overview

Getting Started

Call Session

Features

Advanced

Migration Guide

Resources

Prerequisites

Get CallSession Instance

Set Layout

LayoutType Enum

Picture-in-Picture Mode

Enable PiP

Disable PiP

Android PiP Integration

Set Chat Button Unread Count

Listen for Layout Events

Initial Layout Settings

Hide UI Elements

Button Click Listeners

Next Steps

Session Control

Layout Listener

​Prerequisites

​Get CallSession Instance

​Set Layout

​LayoutType Enum

​Picture-in-Picture Mode

​Enable PiP

​Disable PiP

​Android PiP Integration

​Set Chat Button Unread Count

​Listen for Layout Events

​Initial Layout Settings

​Hide UI Elements

​Button Click Listeners

​Next Steps

Session Control

Layout Listener

Prerequisites

Get CallSession Instance

Set Layout

LayoutType Enum

Picture-in-Picture Mode

Enable PiP

Disable PiP

Android PiP Integration

Set Chat Button Unread Count

Listen for Layout Events

Initial Layout Settings

Hide UI Elements

Button Click Listeners

Next Steps