> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Call Layouts

> CometChat Calling SDK v5 - Call Layouts for Android

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`:

<Tabs>
  <Tab title="Kotlin">
    ```kotlin theme={null}
    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}")
            }
        }
    )
    ```
  </Tab>

  <Tab title="Java">
    ```java theme={null}
    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());
            }
        }
    );
    ```
  </Tab>
</Tabs>

## Change Layout During Call

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

<Tabs>
  <Tab title="Kotlin">
    ```kotlin theme={null}
    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)
    ```
  </Tab>

  <Tab title="Java">
    ```java theme={null}
    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);
    ```
  </Tab>
</Tabs>

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

## Listen for Layout Changes

Monitor layout changes using `LayoutListener`:

<Tabs>
  <Tab title="Kotlin">
    ```kotlin theme={null}
    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() {}
    })
    ```
  </Tab>

  <Tab title="Java">
    ```java theme={null}
    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() {}
    });
    ```
  </Tab>
</Tabs>

## Hide Layout Toggle Button

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

<Tabs>
  <Tab title="Kotlin">
    ```kotlin theme={null}
    val sessionSettings = CometChatCalls.SessionSettingsBuilder()
        .setLayout(LayoutType.SPOTLIGHT) // Fixed layout
        .hideChangeLayoutButton(true)    // Hide toggle button
        .build()
    ```
  </Tab>

  <Tab title="Java">
    ```java theme={null}
    SessionSettings sessionSettings = new CometChatCalls.SessionSettingsBuilder()
        .setLayout(LayoutType.SPOTLIGHT) // Fixed layout
        .hideChangeLayoutButton(true)    // Hide toggle button
        .build();
    ```
  </Tab>
</Tabs>