Rox.Chat Mobile Widget for Android

Rox.Chat Mobile Widget is a full-fledged component, containing a message list, input field, and additional elements such as chats. Chat is a multifunctional component that implements sending messages, photos, videos, files, and much more. Despite the huge number of functions, the chat is a common Android View component and can be easily integrated into the application both through XML layout and code. The chat is built on the principle that all default values are set, but everything can be redefined according to your needs.

It combines extreme ease of use with powerful functionality. Rox.Chat Mobile Widget is a good alternative to using Rox.Chat Mobile SDK as it comes with all UI elements and adapters and requires minimal effort to integrate.

1. Adding the Mobile Widget Component to Dependencies

// kotlin dsl
dependencies {
    implementation("yourpackage:chat:version")
}
// groovy
dependencies {
    implementation("yourpackage:chat:version")
}

2. Configuring the Mobile Widget

Mobile Widget is a normal view component that can be defined both programmatically through code and through XML layouts.

Using XML:

<chat.roxchat.chatview.ui.ChatView
    android:id="@+id/chatView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:chv_account_name="https://demo.rox.chat"
    app:chv_location_name="mobile" />

Parameters chv_account_name and chv_location_name define your Rox.Chat account and its location. These parameters can also be changed in code by specifying the Rox.Chat session.

Programmatically:

Chat under the hood itself works with Rox.Chat Mobile SDK. In order to set up the Mobile Widget, pass it the configured session you previously used with Rox.Chat Mobile SDK. You need to pass the Rox.Chat session to Mobile Widget through the method ChatView#setSession. Now the Mobile Widget will do all the work for you.

ChatView chatView = new ChatView(getContext());
chatView.setSession(session);
containerView.addView(chatView);

The session is set up like this:

RoxSession session = Rox.newSessionBuilder()
    .setContext(getContext())
    .setAccountName("https://demo.rox.chat")
    .setLocation("mobile")
    ...
    .build();

Next, the view is responsible for working with the session, starting, stopping, and destroying it.

The software configuration of the Mobile Widget provides flexible configuration. You can also combine these two approaches. Declare a ChatView in the markup, find the view in the code, and set up a session.

3. Customizing the Theme

You can also override the default colors for the Mobile Widget. You can create your own style by inheriting from ChatViewDefaultStyle.

<style name="MyChatTheme" parent="ChatViewDefaultStyle">
    <item name="chv_bar_background">@color/white</item>
    <item name="chv_message_border">@color/message_border</item>
    ...
</style>

In the layout, specify the style you created in the app:chv_chat_style field of ChatView. Here is an example:

<chat.rox.chatview.ui.ChatView
    android:id="@+id/chatView"
    app:chv_chat_style="@style/MyChatTheme"
    ...
    />

There is a list of colors and drawables that can be overridden. This list is shown below:

Style item	Type
chv_primary_color	integer or color
chv_secondary_color	integer or color
chv_accent_color	integer or color
chv_bar_background	integer or color
chv_message_border	integer or color
chv_text_light	integer or color
chv_text_strong	integer or color
chv_text_medium	integer or color
chv_text_hint	integer or color
chv_sent_bubble	integer or color
chv_sent_text	integer or color
chv_sent_link_text	integer or color
chv_sent_time_text	integer or color
chv_sent_edited_text	integer or color
chv_sent_selected	integer or color
chv_sent_divider	integer or color
chv_sent_file_data	integer or color
chv_received_bubble	integer or color
chv_received_text	integer or color
chv_received_link_text	integer or color
chv_received_time_text	integer or color
chv_received_edited_text	integer or color
chv_received_selected	integer or color
chv_received_divider	integer or color
chv_received_sender_name	integer or color
chv_system_bubble	integer or color
chv_system_text	integer or color
chv_system_link_text	integer or color
chv_system_time_text	integer or color
chv_buttons_background	integer or color
chv_buttons_pending	integer or color
chv_buttons_complete	integer or color
chv_buttons_canceled	integer or color
chv_message_replied	integer or color
chv_prompt_syncing	integer or color
chv_prompt_net_lost	integer or color
chv_prompt_net_losing	integer or color
chv_message_text_size	dimension
chv_message_corner_radius	dimension
chv_message_menu_background	integer or color
chv_chat_menu_background	integer or color