# UI Customization

You can customize the UI by subclassing UI elements and then injecting them into the framework.

### Activity Customization

For example, to override the chat activity you would subclass the `ChatActivity` then use:

ChatSDK.ui().setChatActivity(YourCustomChatActivity.class);

There is a method available for each of the activities in the app.

### Tab Customization

Add a tab:

ChatSDK.ui().addTab(title, iconResourceId, fragment, index);

Remove a tab:

ChatSDK.ui().removeTab(index);

To modify a tab, first make a subclass for example, you could subclass the `PrivateThreadsFragment`. Then register it with the framework:

ChatSDK.ui().setPrivateThreadsFragment(new YourFragmentSubclass());

### Message Customization

To customize a message you will need to make two new classes:

`YourCustomMessageDisplayHandler extends AbstractMessageDisplayHandler`

`YourCustomMessageViewHolder extends BaseMessageViewHolder`

In your new display handler, override the following method:

@Override
public AbstractMessageViewHolder newViewHolder(boolean isReply, Activity activity, PublishSubject<List<MessageAction>> actionPublishSubject) {
    View row = row(isReply, activity);
    return new YourCustomMessageViewHolder(row, activity, actionPublishSubject);
}

Then register the display handler with the framework for a given message type:

ChatSDK.ui().setMessageHandler(new TestTextMessageDisplayHandler(), new MessageType(MessageType.Text));

When the framework needs to render a new message cell, it will ask the display handler to provide it with a view and a view holder. By overriding this method, you can specify a custom view holder and modify the message rending.

#### Specify custom message XML layout

To do this override the `row` function in the display handler:

protected View row (boolean isReply, Activity activity) {
    View row;
    LayoutInflater inflater = LayoutInflater.from(activity);
    if(isReply) {
        row = inflater.inflate(R.layout.view_message_reply, null);
    } else {
        row = inflater.inflate(R.layout.view_message_me, null);
    }
    return row;
}

You can return custom layout files here. Bear in mind that if you are extending the base view holder, some fields will be expected to be present.

#### Customize the name of the message type

Override the `displayName` method in the display handler:

@Override
public String displayName(Message message) {
    return message.getText();
}

#### Customize the message cell

You can do this by overriding the `setMessage` function in your custom view holder.

**Customize the message date**

@Override
public void setMessage(Message message) {
    super.setMessage(message);

    String time = String.valueOf(getTimeFormat(message).format(message.getDate().toDate()));
    timeTextView.setText(time);
}

Here you could also add the following calls to the `setMessage` function to customize the way the message is displayed:

**Show / Hide the icon view**

setIconHidden(true);

**Show / Hide the message bubble**

setBubbleHidden(false);

**Show / Hide change the message bubble color**

messageBubble.getBackground()
	.setColorFilter(Color.parseColor("#b0cfea"), PorterDuff.Mode.MULTIPLY);

etc...