Call Layouts

Customize CometChat Calls SDK v5 call layouts on Android with tile, spotlight, sidebar views, layout changes, and layout events.

Choose how participants are displayed during a call. The SDK provides multiple layout options to suit different use cases like team meetings, presentations, or one-on-one calls.

Available Layouts

Layout	Description	Best For
TILE	Grid layout with equally-sized tiles for all participants	Team meetings, group discussions
SPOTLIGHT	Large view for the other participant, small tile for yourself	One-on-one calls, presentations, webinars
SIDEBAR	Main speaker with participants in a sidebar	Interviews, panel discussions

Set Initial Layout

Configure the layout when joining a session using SessionSettingsBuilder:

Kotlin

val sessionSettings = CometChatCalls.SessionSettingsBuilder()
    .setLayout(LayoutType.TILE)
    .build()

CometChatCalls.joinSession(sessionId, sessionSettings, callViewContainer,
    object : CometChatCalls.CallbackListener<CallSession>() {
        override fun onSuccess(callSession: CallSession) {
            Log.d(TAG, "Joined with TILE layout")
        }

        override fun onError(e: CometChatException) {
            Log.e(TAG, "Failed: ${e.message}")
        }
    }
)

Java

SessionSettings sessionSettings = new CometChatCalls.SessionSettingsBuilder()
    .setLayout(LayoutType.TILE)
    .build();

CometChatCalls.joinSession(sessionId, sessionSettings, callViewContainer,
    new CometChatCalls.CallbackListener<CallSession>() {
        @Override
        public void onSuccess(CallSession callSession) {
            Log.d(TAG, "Joined with TILE layout");
        }

        @Override
        public void onError(CometChatException e) {
            Log.e(TAG, "Failed: " + e.getMessage());
        }
    }
);

Change Layout During Call

Switch layouts dynamically during an active call using setLayout():

Kotlin

val callSession = CallSession.getInstance()

// Switch to Spotlight layout
callSession.setLayout(LayoutType.SPOTLIGHT)

// Switch to Tile layout
callSession.setLayout(LayoutType.TILE)

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

Java

CallSession callSession = CallSession.getInstance();

// Switch to Spotlight layout
callSession.setLayout(LayoutType.SPOTLIGHT);

// Switch to Tile layout
callSession.setLayout(LayoutType.TILE);

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

Each participant can choose their own layout independently. Changing your layout does not affect other participants.

Listen for Layout Changes

Monitor layout changes using LayoutListener:

Kotlin

val callSession = CallSession.getInstance()

callSession.addLayoutListener(this, object : LayoutListener() {
    override fun onCallLayoutChanged(layoutType: LayoutType) {
        when (layoutType) {
            LayoutType.TILE -> Log.d(TAG, "Switched to Tile layout")
            LayoutType.SPOTLIGHT -> Log.d(TAG, "Switched to Spotlight layout")
            LayoutType.SIDEBAR -> Log.d(TAG, "Switched to Sidebar layout")
        }
        // Update layout toggle button icon
        updateLayoutIcon(layoutType)
    }

    override fun onParticipantListVisible() {}
    override fun onParticipantListHidden() {}
    override fun onPictureInPictureLayoutEnabled() {}
    override fun onPictureInPictureLayoutDisabled() {}
})

Java

CallSession callSession = CallSession.getInstance();

callSession.addLayoutListener(this, new LayoutListener() {
    @Override
    public void onCallLayoutChanged(LayoutType layoutType) {
        switch (layoutType) {
            case TILE:
                Log.d(TAG, "Switched to Tile layout");
                break;
            case SPOTLIGHT:
                Log.d(TAG, "Switched to Spotlight layout");
                break;
            case SIDEBAR:
                Log.d(TAG, "Switched to Sidebar layout");
                break;
        }
        // Update layout toggle button icon
        updateLayoutIcon(layoutType);
    }

    @Override public void onParticipantListVisible() {}
    @Override public void onParticipantListHidden() {}
    @Override public void onPictureInPictureLayoutEnabled() {}
    @Override public void onPictureInPictureLayoutDisabled() {}
});

Hide Layout Toggle Button

To prevent users from changing the layout, hide the layout toggle button in the call UI:

Kotlin

val sessionSettings = CometChatCalls.SessionSettingsBuilder()
    .setLayout(LayoutType.SPOTLIGHT) // Fixed layout
    .hideChangeLayoutButton(true)    // Hide toggle button
    .build()

Java

SessionSettings sessionSettings = new CometChatCalls.SessionSettingsBuilder()
    .setLayout(LayoutType.SPOTLIGHT) // Fixed layout
    .hideChangeLayoutButton(true)    // Hide toggle button
    .build();