> ## 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 iOS

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="Swift">
    ```swift theme={null}
    let sessionSettings = CometChatCalls.sessionSettingsBuilder
        .setLayout(.tile)
        .build()

    CometChatCalls.joinSession(
        sessionID: sessionId,
        callSetting: sessionSettings,
        container: callViewContainer,
        onSuccess: { message in
            print("Joined with TILE layout")
        },
        onError: { error in
            print("Failed: \(error?.errorDescription ?? "")")
        }
    )
    ```
  </Tab>

  <Tab title="Objective-C">
    ```objectivec theme={null}
    SessionSettings *sessionSettings = [[[CometChatCalls sessionSettingsBuilder]
        setLayout:LayoutTypeTile]
        build];

    [CometChatCalls joinSessionWithSessionID:sessionId
                                 callSetting:sessionSettings
                                   container:self.callViewContainer
                                   onSuccess:^(NSString * message) {
        NSLog(@"Joined with TILE layout");
    } onError:^(CometChatCallException * error) {
        NSLog(@"Failed: %@", error.errorDescription);
    }];
    ```
  </Tab>
</Tabs>

## Change Layout During Call

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

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // Switch to Spotlight layout
    CallSession.shared.setLayout("SPOTLIGHT")

    // Switch to Tile layout
    CallSession.shared.setLayout("TILE")

    // Switch to Sidebar layout
    CallSession.shared.setLayout("SIDEBAR")
    ```
  </Tab>

  <Tab title="Objective-C">
    ```objectivec theme={null}
    // Switch to Spotlight layout
    [[CallSession shared] setLayout:@"SPOTLIGHT"];

    // Switch to Tile layout
    [[CallSession shared] setLayout:@"TILE"];

    // Switch to Sidebar layout
    [[CallSession shared] setLayout:@"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="Swift">
    ```swift theme={null}
    class CallViewController: UIViewController, LayoutListener {
        
        override func viewDidLoad() {
            super.viewDidLoad()
            CallSession.shared.addLayoutListener(self)
        }
        
        deinit {
            CallSession.shared.removeLayoutListener(self)
        }
        
        func onCallLayoutChanged(layoutType: LayoutType) {
            switch layoutType {
            case .tile:
                print("Switched to Tile layout")
            case .spotlight:
                print("Switched to Spotlight layout")
            case .sidebar:
                print("Switched to Sidebar layout")
            default:
                break
            }
            // Update layout toggle button icon
            updateLayoutIcon(layoutType)
        }

        func onParticipantListVisible() {}
        func onParticipantListHidden() {}
        func onPictureInPictureLayoutEnabled() {}
        func onPictureInPictureLayoutDisabled() {}
    }
    ```
  </Tab>

  <Tab title="Objective-C">
    ```objectivec theme={null}
    @interface CallViewController () <LayoutListener>
    @end

    @implementation CallViewController

    - (void)viewDidLoad {
        [super viewDidLoad];
        [[CallSession shared] addLayoutListener:self];
    }

    - (void)dealloc {
        [[CallSession shared] removeLayoutListener:self];
    }

    - (void)onCallLayoutChangedWithLayoutType:(LayoutType)layoutType {
        // Update layout toggle button icon
        [self updateLayoutIcon:layoutType];
    }

    - (void)onParticipantListVisible {}
    - (void)onParticipantListHidden {}
    - (void)onPictureInPictureLayoutEnabled {}
    - (void)onPictureInPictureLayoutDisabled {}

    @end
    ```
  </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="Swift">
    ```swift theme={null}
    let sessionSettings = CometChatCalls.sessionSettingsBuilder
        .setLayout(.spotlight)           // Fixed layout
        .hideChangeLayoutButton(true)    // Hide toggle button
        .build()
    ```
  </Tab>

  <Tab title="Objective-C">
    ```objectivec theme={null}
    SessionSettings *sessionSettings = [[[[CometChatCalls sessionSettingsBuilder]
        setLayout:LayoutTypeSpotlight]
        hideChangeLayoutButton:YES]
        build];
    ```
  </Tab>
</Tabs>