Chat UI

The chat UI refers to the messaging interface within an application, primarily consisting of two components: the message list and the input area. IMKit provides default chat UI implementations through both Activity-based (RongConversationActivity) and Fragment-based approaches.

• Activity-based: The IMKit SDK offers a default chat UI via RongConversationActivity, which includes a title bar, message list, and input area. When users tap a conversation in the conversation list, they're directed to this interface. Apps can either use RongConversationActivity directly or create custom Activities by extending it.
• Fragment-based: Developers can integrate IMKit's conversation Fragment into their own Activities.

Chat Interface Components

The chat interface typically comprises three sections:

1. Title Bar: Displays conversation details (e.g., group name or peer username in one-to-one chats). In private chats, it can also show typing status.
2. Message List: Chronologically displays all messages with distinct visual treatment for sent vs. received messages.
3. Input Area: Allows users to compose text, voice, images, videos, and other message types.

tip

IMKit's default RongConversationActivity includes a pre-built title bar. When using the Fragment approach, you'll need to implement your own title bar.

Title Bar Implementation

The title bar in RongConversationActivity features:

• Left button: Triggers finish() to exit the screen
• Right menu button: Hidden by default (can be shown via setRightVisible)
• Custom actions: Set click listeners via setOnRightIconClickListener

For Fragment implementations, reference TitleBar.java to build your own title bar.

Message List Customization

The message list component:

• Displays messages chronologically
• Differentiates between user-sent and received messages
• Supports customization through:
  • BaseMessageItemProvider (message templates)
  • MessageListAdapter (list item customization)

Input Area Control

The RongExtension class centrally manages the input area for all message types (text, files, media, etc.).

Implementation Methods

IMKit provides three approaches to create chat UIs:

1. Use default RongConversationActivity
2. Extend RongConversationActivity
3. Build custom Activities with ConversationFragment

Launching the Chat UI

Two primary launch methods exist:

Using RouteUtils

IMKit's built-in Activity router simplifies intent handling:

String targetId = "userId";
ConversationIdentifier conversationIdentifier = new ConversationIdentifier(Conversation.ConversationType.PRIVATE, targetId);

RouteUtils.routeToConversationActivity(context, conversationIdentifier, false, bundle)

Parameter	Type	Description
context	Context	Activity context
conversationIdentifier	ConversationIdentifier	Conversation type
disableSystemEmoji	Boolean	Whether to hide built-in emojis
bundle	Bundle	Additional parameters

tip

Register custom Activities with RouteUtils before using this method.

Direct Intent Navigation

Standard Android intent-based navigation:

Intent intent = new Intent(context, ConversationActivity.class);
intent.putExtra(RouteUtils.CONVERSATION_TYPE, type.getName().toLowerCase());
intent.putExtra(RouteUtils.TARGET_ID, targetId);
intent.putExtra(RouteUtils.DISABLE_SYSTEM_EMOJI, false);
intent.putExtras(bundle);
context.startActivity(intent);

Customizing via Activity Inheritance

Extend RongConversationActivity and register your custom class:

RouteUtils.registerActivity(RouteUtils.RongActivityType.ConversationActivity, MyConversationActivity.class)

Fragment-based Customization

Recommended approach for maximum flexibility:

1. Declare your Activity in AndroidManifest.xml
2. Implement layout (e.g., activity_conversation.xml)
3. Extend ConversationFragment:

class MyConversationActivity extends FragmentActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setContentView(R.layout.activity_conversation);

        ConversationFragment conversationFragment = new AppConversationFragment();
        FragmentManager manager = getSupportFragmentManager();
        FragmentTransaction transaction = manager.beginTransaction();
        transaction.replace(R.id.container, conversationFragment);
        transaction.commit();
    }
}

4. Register your custom Activity:

RouteUtils.registerActivity(RouteUtils.RongActivityType.ConversationActivity, MyConversationActivity.class)

Customization Options

Avatar Customization

Modify avatar display globally via IMKit configuration:

RongConfigCenter.featureConfig().setKitImageEngine(new GlideKitImageEngine() {
    @Override
    public void loadConversationPortrait(@NonNull Context context, @NonNull String url, @NonNull ImageView imageView, Message message) {
        Glide.with(context).load(url)
                .apply(RequestOptions.bitmapTransform(new CircleCrop()))
                .into(imageView);
    }
});

Nickname Visibility

Control nickname display in private chats:

RongConfigCenter.conversationConfig().setShowReceiverUserTitle(true);

Built-in Emoji Management

Disable default emojis (v5.2.3+):

// See Emoticon section for implementation

History Message Loading

Configure message fetch quantities (local and remote):

RongConfigCenter.conversationConfig().setConversationHistoryMessageCount(10);
RongConfigCenter.conversationConfig().setConversationRemoteMessageCount(10);

tip

Requires enabled Cloud Storage for One-to-One and Group Messages.

Message Deletion Behavior

Modify deletion logic based on SDK version:

• v5.6.3+: Sync local and remote deletion
• Earlier versions: Local-only deletion by default

RongConfigCenter.conversationConfig().setNeedDeleteRemoteMessage(true);

Multi-select Limits

Adjust maximum selectable messages (default: 100):

RongConfigCenter.conversationConfig().rc_max_message_selected_count = 150;

Or via XML:

<integer name="rc_max_message_selected_count">150</integer>

Connection Status Alerts

Toggle connection status notifications:

RongConfigCenter.conversationConfig().rc_is_show_warning_notification = false;

Notification Clearing

Enable automatic notification clearing:

RongConfigCenter.featureConfig().rc_wipe_out_notification_message = true;

Custom Layouts

Add header, footer, and empty views (v5.1.0+):

@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    addHeaderView(view);
    addFooterView(view);
    setEmptyView(view);
}

Further Customization

Explore additional customization options:

• Unread Message Counts
• Message Display Customization
• Emoticon Area
• Input Area
• Event Listeners

Reference implementations:

• RongConversationActivity.java
• ConversationFragment.java