Input Area

The input area in Global IM UIKit is created and controlled uniformly by the InputPanelComponent, supporting custom input modes, custom extension areas (plugins), and custom stickers.

The input area in the image below, from left to right, includes the plus extension button, content input box, sticker button, and voice recording button.

Modifying the Input Bar Combination Mode

The text input area of the input box cannot be modified; only the left and right buttons of the text input area can be added or removed.

1. You can override the InputPanelComponent#beforeCreateLeftInputActionView(@NonNull List<InputAction> leftInputActions) method to obtain the default left button and modify it.

2. You can override the InputPanelComponent#beforeCreateRightInputActionView(@NonNull List<InputAction> rightInputActions) method to obtain the default right button and modify it.

public class CustomInputPanelComponent extends InputPanelComponent{

    @NonNull
    @Override
    protected List<InputAction> beforeCreateLeftInputActionView(@NonNull List<InputAction> leftInputActions) {
        // Add
        leftInputActions.add(new InputAction() {
            @Override
            public Drawable obtainDrawable(@NonNull Context context) {
                return ResourcesCompat.getDrawable(context.getResources(), com.rongcloud.im.uikit.R.drawable.rc_icon_voice, null);
            }

            @Override
            public void onClick(@NonNull View view) {
                Toast.makeText(getContext(), "voice Clicked", Toast.LENGTH_SHORT).show();
            }
        });
        return super.beforeCreateLeftInputActionView(leftInputActions);
    }


    @NonNull
    @Override
    protected List<InputAction> beforeCreateRightInputActionView(@NonNull List<InputAction> rightInputActions) {
        // Add
        rightInputActions.add(new InputAction() {
            @Override
            public Drawable obtainDrawable(@NonNull Context context) {
                return ResourcesCompat.getDrawable(context.getResources(), com.rongcloud.im.uikit.R.drawable.rc_icon_camera, null);
            }

            @Override
            public void onClick(@NonNull View view) {
                Toast.makeText(getContext(), "camera Clicked", Toast.LENGTH_SHORT).show();
            }
        });
        return super.beforeCreateRightInputActionView(rightInputActions);
    }
}

Input Area Extension Panel

RC refers to the panel displayed when clicking the plus button in the input area as the extension panel, which can implement functions such as albums, cameras, and files.

You can add, remove, or modify extension functions by overriding the InputPanelComponent#beforeCreateInputMoreActionView(@NonNull List<InputMoreAction> chatActions) method.

public class CustomInputPanelComponent extends InputPanelComponent{

    @NonNull
    @Override
    protected List<InputMoreAction> beforeCreateInputMoreActionView(@NonNull List<InputMoreAction> inputMoreActions) {
        // Method 1. Remove the file button
        Iterator<InputMoreAction> iterator = inputMoreActions.iterator();
        while (iterator.hasNext()) {
            InputMoreAction inputMoreAction = iterator.next();
            if (inputMoreAction instanceof FileInputMoreAction) {
                iterator.remove();
            }
        }

        // Method 2. Add a custom InputMoreAction
        inputMoreActions.add(new InputMoreAction() {
            @Override
            public String obtainTitle(@NonNull Context context) {
                return "Position";
            }

            @Override
            public Drawable obtainDrawable(@NonNull Context context) {
                return ResourcesCompat.getDrawable(context.getResources(), com.rongcloud.im.uikit.R.drawable.rc_icon_camera, null);
            }

            @Override
            public void onClick(@NonNull View view) {
                Toast.makeText(getContext(), "Position Clicked", Toast.LENGTH_SHORT).show();
            }
        });
        return super.beforeCreateInputMoreActionView(inputMoreActions);
    }

}

The default menu options can be distinguished by class, as follows:

Function	Class
Album	AlbumInputMoreAction
Camera	CameraInputMoreAction
File	FileInputMoreAction

Sticker Panel

Global IM UIKit only provides the sticker button (as shown below) and the sticker display panel by default. The sticker resources need to be provided by the application to Global IM UIKit.

For details on how to add custom stickers, see Sticker Message.