Documentation
Call Kit
Customize the call
Configure layouts

Configure layouts

Last updated：2024-05-16 12:00

Call Kit (ZegoUIkitPrebuiltCall) currently supports picture-in-picture layout and gallery layout, each layout has its own configurations. To select and configure the layout you want, use the layout parameter in the ZegoUIkitPrebuiltCallConfig:

Picture-in-picture layout

The configurations supported by the picture-in-picture layout are:

switchLargeOrSmallViewByClick: Whether to allow users to click on the small view for switching between large view and small view. It’s allowed by default.

The effect is as follows:

Display my view when my camera is off	Hide my view when my camera is off	Dragging	Switching

Here is the reference code:

Basic call With call invitation

public class CallActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_call);

    long appID = YourAppID;
    String appSign = YourAppSign;
    String userID = "userID";
    String userName = "userName";
    String callID = "testCallID";

    // Modify your custom configurations here.
    ZegoUIKitPrebuiltCallConfig config = ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall();
    ZegoLayoutPictureInPictureConfig pipConfig = new ZegoLayoutPictureInPictureConfig();
    pipConfig.switchLargeOrSmallViewByClick = true;
    config.layout.mode = ZegoLayoutMode.PICTURE_IN_PICTURE;
    config.layout.config = pipConfig;

    ZegoUIKitPrebuiltCallFragment fragment = ZegoUIKitPrebuiltCallFragment
            .newInstance(appID, appSign, callID, userID, userName, config);

    getSupportFragmentManager()
            .beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow();
  }
}

public class MainActivity extends AppCompatActivity {
    long appID = YourAppID;
    String appSign = YourAppSign;
    String userID = "userID";
    String userName = "userName";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initCallInviteService();
    }

    public void initCallInviteService() {
        ZegoUIKitPrebuiltCallInvitationConfig callInvitationConfig = new ZegoUIKitPrebuiltCallInvitationConfig();
        callInvitationConfig.provider = new ZegoUIKitPrebuiltCallConfigProvider() {
                @Override
                public ZegoUIKitPrebuiltCallConfig requireConfig(ZegoCallInvitationData invitationData) {
                    ZegoUIKitPrebuiltCallConfig config;
                    boolean isVideoCall = invitationData.type == ZegoInvitationType.VIDEO_CALL.getValue();
                    boolean isGroupCall = invitationData.invitees.size() > 1;
                    if (isVideoCall && isGroupCall) {
                        config = ZegoUIKitPrebuiltCallConfig.groupVideoCall();
                    } else if (!isVideoCall && isGroupCall) {
                        config = ZegoUIKitPrebuiltCallConfig.groupVoiceCall();
                    } else if (!isVideoCall) {
                        config = ZegoUIKitPrebuiltCallConfig.oneOnOneVoiceCall();
                    } else {
                        config = ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall();
                    }
                    // Modify your custom calling configurations here.
                    if(isGroupCall){
                        ZegoLayoutGalleryConfig galleryConfig =  new ZegoLayoutGalleryConfig();
                        galleryConfig.addBorderRadiusAndSpacingBetweenView = false;                        
                        config.layout.mode = ZegoLayoutMode.GALLERY;
                        config.layout.config = galleryConfig;
                    }else{
                        ZegoLayoutPictureInPictureConfig pipConfig = new ZegoLayoutPictureInPictureConfig();
                        pipConfig.switchLargeOrSmallViewByClick = true;
                        config.layout.mode = ZegoLayoutMode.PICTURE_IN_PICTURE;
                        config.layout.config = pipConfig
                    }
                    return config;
                }
        );
        ZegoUIKitPrebuiltCallService.init(getApplication(), appID, appSign, userID, userName,
            callInvitationConfig);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        ZegoUIKitPrebuiltCallService.logout();
    }
}

Gallery layout

The configuration supported by the gallery layout is:

addBorderRadiusAndSpacingBetweenView: In gallery layout, this can be used to add border radius and spacing between speaker views. true: enabled (by default). false: disabled.

The effect is as follows:

Adding border radius and spacing	Without border radius and spacing

Basic call With call invitation

public class CallActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_call);

    long appID = YourAppID;
    String appSign = YourAppSign;
    String userID = "userID";
    String userName = "userName";
    String callID = "testCallID";

    // Modify your custom configurations here.
    ZegoUIKitPrebuiltCallConfig config = ZegoUIKitPrebuiltCallConfig.groupVideoCall();
    ZegoLayoutGalleryConfig galleryConfig =  new ZegoLayoutGalleryConfig();
    galleryConfig.addBorderRadiusAndSpacingBetweenView = false;
    config.layout.config = galleryConfig;

    ZegoUIKitPrebuiltCallFragment fragment = ZegoUIKitPrebuiltCallFragment
            .newInstance(appID, appSign, callID, userID, userName, config);

    getSupportFragmentManager()
            .beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow();
  }
}

public class MainActivity extends AppCompatActivity {
    long appID = YourAppID;
    String appSign = YourAppSign;
    String userID = "userID";
    String userName = "userName";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initCallInviteService();
    }

    public void initCallInviteService() {
        ZegoUIKitPrebuiltCallInvitationConfig callInvitationConfig = new ZegoUIKitPrebuiltCallInvitationConfig();
        callInvitationConfig.provider = new ZegoUIKitPrebuiltCallConfigProvider() {
                @Override
                public ZegoUIKitPrebuiltCallConfig requireConfig(ZegoCallInvitationData invitationData) {
                    ZegoUIKitPrebuiltCallConfig config;
                    boolean isVideoCall = invitationData.type == ZegoInvitationType.VIDEO_CALL.getValue();
                    boolean isGroupCall = invitationData.invitees.size() > 1;
                    if (isVideoCall && isGroupCall) {
                        config = ZegoUIKitPrebuiltCallConfig.groupVideoCall();
                    } else if (!isVideoCall && isGroupCall) {
                        config = ZegoUIKitPrebuiltCallConfig.groupVoiceCall();
                    } else if (!isVideoCall) {
                        config = ZegoUIKitPrebuiltCallConfig.oneOnOneVoiceCall();
                    } else {
                        config = ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall();
                    }
                    // Modify your custom calling configurations here.
                    if(isGroupCall){
                        ZegoLayoutGalleryConfig galleryConfig =  new ZegoLayoutGalleryConfig();
                        galleryConfig.addBorderRadiusAndSpacingBetweenView = false;
                        config.layout.config = galleryConfig;
                    }else{
                        ZegoLayoutPictureInPictureConfig pipConfig = new ZegoLayoutPictureInPictureConfig();
                        pipConfig.switchLargeOrSmallViewByClick = true;
                        config.layout.config = pipConfig;
                    }
                    return config;
                }
        );
        ZegoUIKitPrebuiltCallService.init(getApplication(), appID, appSign, userID, userName,
            callInvitationConfig);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        ZegoUIKitPrebuiltCallService.logout();
    }
}