logo
On this page

Set avatar for users

User avatars are generally stored in the server. Call Kit (ZegoUIKitPrebuiltCall) does not know the real profile picture of each user, so it uses the first letter of the username to draw the user avatars by default, as shown below:

When a user in silenceWhen a user speaks

To configure the custom user avatars, you can use the avatarViewProvider in ZegoUIKitPrebuiltCallConfigto set a custom view.

Warning

Please note that here you need to return different avatars for different users based on the user parameter in the callback parameters. If you hardcode a URL, then everyone's avatar will be the one you hardcoded.

Here is the reference code:

Basic call
Call with invitation
long appID = yourAppID;
String appSign = yourAppSign;
String userID = yourUserID;
String userName = yourUserName;
String callID = ;

ZegoUIKitPrebuiltCallConfig config = ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall();

config.avatarViewProvider = new ZegoAvatarViewProvider() {
    @Override
    public View onUserIDUpdated(ViewGroup parent, ZegoUIKitUser uiKitUser) {
        ImageView imageView = new ImageView(parent.getContext());
        // Please note that here you need to return different avatars for different users based on the user parameter in the callback parameters. 
        // If you hardcode a URL, then everyone's avatar will be the one you hardcoded.
        String avatarUrl = getAvatarByUserID(uiKitUser.userID);
        if (!TextUtils.isEmpty(avatarUrl)) {
            RequestOptions requestOptions = new RequestOptions().circleCrop();
            Glide.with(parent.getContext()).load(avatarUrl).apply(requestOptions).into(imageView);
        }
        return imageView;
    }
};

ZegoUIKitPrebuiltCallFragment fragment = ZegoUIKitPrebuiltCallFragment.newInstance(appID, appSign, userID,userName, callID, config);
getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, fragment).commitNow();
1
Copied!
long appID = yourAppID;
String appSign = yourAppSign;
String userID = yourUserID;
String userName = yourUserName;

ZegoUIKitPrebuiltCallInvitationConfig callInvitationConfig = new ZegoUIKitPrebuiltCallInvitationConfig();
callInvitationConfig.provider = new ZegoUIKitPrebuiltCallConfigProvider() {
    @Override
    public ZegoUIKitPrebuiltCallConfig requireConfig(ZegoCallInvitationData invitationData) {
        ZegoUIKitPrebuiltCallConfig config = ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall();
        config.avatarViewProvider = new ZegoAvatarViewProvider() {
            @Override
            public View onUserIDUpdated(ViewGroup parent, ZegoUIKitUser uiKitUser) {
                ImageView imageView = new ImageView(parent.getContext());
                // Please note that here you need to return different avatars for different users based on the user parameter in the callback parameters. 
                // If you hardcode a URL, then everyone's avatar will be the one you hardcoded.
                String avatarUrl = getAvatarByUserID(uiKitUser.userID);
                if (!TextUtils.isEmpty(avatarUrl)) {
                    RequestOptions requestOptions = new RequestOptions().circleCrop();
                    Glide.with(parent.getContext()).load(avatarUrl).apply(requestOptions).into(imageView);
                }
                return imageView;
            }
        };
        return config;
    }
};
ZegoUIKitPrebuiltCallService.init(getApplication(), appID, appSign, userID, userName,callInvitationConfig);
1
Copied!

When complete, the Call Kit (ZegoUIKitPrebuiltCall) displays the custom user avatar that you set.

Previous

Overview

Next

Add custom components

On this page

Back to top