tencent cloud

Feedback

Setting UI Styles

Last updated: 2022-02-16 16:05:27

    This document describes how to set the UI styles for Android.

    Setting the Conversation List UI Styles

    The conversation list UI consists of the title bar TitleBarLayout and list area ConversationListLayout. Each part provides UI styles and event registration APIs that can be modified.
    Conversation list

    Setting the title style

    The title bar itself has all the features of a view. In addition, it is divided into three parts: left group, middle group, and right group.

    TitleBarLayout

    To make custom modifications, see ITitleBarLayout.
    For example, the following code hides LeftGroup, sets the title in the middle, and hides the text and image buttons on the right in LeftGroup:
    (See the implementation in MainActivity.)

    mainTitleBar.setTitle(getResources().getString(R.string.conversation_title), ITitleBarLayout.Position.MIDDLE);
    mainTitleBar.getLeftGroup().setVisibility(View.GONE);
    mainTitleBar.getRightGroup().setVisibility(View.VISIBLE);
    mainTitleBar.setRightIcon(R.drawable.more_btn);
    

    The effect is shown below:
    Title bar effect
    You can also customize click events:

    Menu menu = new Menu(this, mainTitleBar);
    mainTitleBar.setOnRightClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
          if (menu == null) {
              return;
          }
          if (menu.isShowing()) {
              menu.hide();
          } else {
              menu.show();
          }
      }
    });
    

    Setting the conversation list style

    The custom conversation list layout is inherited from RecyclerView. After the user logs in, TUIKit reads the user's conversation list from the SDK.
    You can customize common features for the conversation list. For example, you can configure the background, font size, click event, click-and-hold event, and whether the profile photo has rounded corners. The following is a code sample:

    public static void customizeConversation(final ConversationLayout layout) {
      // Get the conversation list from ConversationLayout
      ConversationListLayout listLayout = layout.getConversationList();
      listLayout.setItemTopTextSize(16); // Set the font size of the top text of the item
      listLayout.setItemBottomTextSize(12); // Set the font size of the bottom text of the item
      listLayout.setItemDateTextSize(10); // Set the font size of the timeline text of the item
      listLayout.setItemAvatarRadius(5); // Set the size of the rounded corners of the item profile photo
      listLayout.disableItemUnreadDot(false); // Set whether to display an unread badge for the item. The badge is displayed by default.
      // Click and hold to pop up the menu
      listLayout.setOnItemLongClickListener(new ConversationListLayout.OnItemLongClickListener() {
          @Override
          public void OnItemLongClick(View view, int position, ConversationInfo conversationInfo) {
              startPopShow(view, position, conversationInfo);
          }
      });
    }
    

    For more information, see ConversationLayoutSetting.java.

    Setting the profile photo style

    The IM SDK does not store profile photos. Therefore, the integrator needs to have a profile photo storage API to get profile photo URLs. The following shows how to use TUIKit to set a profile photo by using a random profile photo API as an example.
    First, you need to upload a profile photo to your personal profile page and call the profile modification API.

    V2TIMUserFullInfo v2TIMUserFullInfo = new V2TIMUserFullInfo();
    // Profile photo
    if (!TextUtils.isEmpty(mIconUrl)) {
      v2TIMUserFullInfo.setFaceUrl(mIconUrl);
    }
    V2TIMManager.getInstance().setSelfInfo(v2TIMUserFullInfo, new V2TIMCallback() {
      @Override
      public void onError(int code, String desc) {
      }
       @Override
      public void onSuccess() {
      }
    });
    

    Conversation list profile photo, which is displayed in ConversationCommonHolder.java:

    conversationIconView.setConversation(conversation);
    

    Setting the Chat UI Styles

    The chat UI includes the tile bar TitleBarLayout, which is the same as that of the conversation list UI. The chat UI also includes the notice area NoticeLayout, message area MessageRecyclerView, and input area InputView, as shown in the following figure:
    Chat UI composition

    /**
    * Get the input area layout in the chat UI
    *
    * @return
    */
    InputView getInputLayout();
    /**
    * Get the message area layout in the chat UI
    *
    * @return
    */
    MessageRecyclerView getMessageLayout();
    /**
    * Get the notice area layout in the chat UI
    *
    * @return
    */
    NoticeLayout getNoticeLayout();
    

    For more information, see ChatLayoutSetting.java.

    Setting the notice area NoticeLayout style

    The notice area consists of two TextViews, as shown in the following figure:
    Notice area composition
    The effect is shown below:
    Notice area effect

    // Get NoticeLayout from ChatView
    NoticeLayout noticeLayout = layout.getNoticeLayout();
    // You can configure to always display the notice area
    noticeLayout.alwaysShow(true);
    // Set the notice title
    noticeLayout.getContent().setText("This is an ad");
    // Set notice text
    noticeLayout.getContentExtra().setText("Click to view your gift");
    // Set the click event of notice
    noticeLayout.setOnNoticeClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
          ToastUtil.toastShortMessage("You've received a bonus");
      }
    });
    

    Setting the message area MessageRecyclerView style

    MessageRecyclerView is inherited from RecyclerView. This document describes how to customize the chat background, bubbles, text, and nicknames. For more information, see IMessageProperties.java.

    Message area

    Setting the chat UI background color

    You can customize the settings of the chat background.
    Changing the chat background

    // Get MessageRecyclerView from ChatView
    MessageRecyclerView messageRecyclerView = layout.getMessageLayout();
    ////// Set the chat background //////
    messageRecyclerView.setBackground(new ColorDrawable(0xB0E2FF00));
    

    Setting the sender's profile photo style

    When displaying a user, TUIKit reads the URL of the user's profile photo from the user's profile and displays the profile photo.
    Changing the profile photo

    // Setting a profile photo for the chat UI
    if (!TextUtils.isEmpty(msg.getFaceUrl())) {
      List<Object> urllist = new ArrayList<>();
      urllist.add(msg.getFaceUrl());
      if (isForwardMode) {
          leftUserIcon.setIconUrls(urllist);
      } else {
          if (msg.isSelf()) {
              rightUserIcon.setIconUrls(urllist);
          } else {
              leftUserIcon.setIconUrls(urllist);
          }
      }
    } else {
      rightUserIcon.setIconUrls(null);
      leftUserIcon.setIconUrls(null);
    }
    

    If the user does not set a profile photo, the default profile photo is displayed. You can customize the default profile photo, whether the profile photo has rounded corners, and the profile photo size.

    // Get MessageRecyclerView from ChatView
    MessageRecyclerView messageRecyclerView = layout.getMessageLayout();
    ////// Set the chat background //////
    messageRecyclerView.setBackground(new ColorDrawable(0xFFEFE5D4));
    ////// Set the profile photo //////
    // Set the default profile photo. The recipient uses the same profile photo by default.
    messageRecyclerView.setAvatar(R.drawable.ic_more_file);
    // Set the rounded corners for the profile photo
    messageRecyclerView.setAvatarRadius(50);
    // Set the profile photo size
    messageRecyclerView.setAvatarSize(new int[]{48, 48});
    

    Setting bubble background colors

    The recipient's bubbles are on the left and your own bubbles are on the right. You can customize the bubble background for both parties.

    Changing bubbles

    // Get MessageRecyclerView from ChatView
    MessageRecyclerView messageRecyclerView = layout.getMessageLayout();
    // Set your own bubble background
    messageRecyclerView.setRightBubble(context.getResources().getDrawable(R.drawable.chat_opposite_bg));
    // Set the bubble background for the recipient
    messageRecyclerView.setLeftBubble(context.getResources().getDrawable(R.drawable.chat_self_bg));
    

    Setting the sender's nickname style

    You can customize the nickname style, including the font size and color. The nickname styles of both parties must be the same.

    Changing nicknames

    // Get MessageRecyclerView from ChatView
    MessageRecyclerView messageRecyclerView = layout.getMessageLayout();
    ////// Set the nickname style (the recipient uses the same style) //////
    messageRecyclerView.setNameFontSize(12);
    messageRecyclerView.setNameFontColor(0x8B5A2B00);
    

    Setting the chat content style

    You can customize the font size and color for both parties, but the sender and recipient must use the same font size.

    Changing the chat content style

    // Get MessageRecyclerView from ChatView
    MessageRecyclerView messageRecyclerView = layout.getMessageLayout();
    // Set the chat content font size. The sender and the recipient use the same font size.
    messageRecyclerView.setChatContextFontSize(15);
    // Set your own chat content font color
    messageRecyclerView.setRightChatContentFontColor(0xA9A9A900);
    // Set the chat content font color for the recipient
    messageRecyclerView.setLeftChatContentFontColor(0xA020F000);
    

    Setting the chat timeline style

    You can customize the background, font size, and font color of the chat timeline.

    Changing the timeline

    // Get MessageRecyclerView from ChatView
    MessageRecyclerView messageRecyclerView = layout.getMessageLayout();
    // Set the background of the chat timeline
    messageRecyclerView.setChatTimeBubble(new ColorDrawable(0x8B691400));
    // Set the font size of the chat timeline
    messageRecyclerView.setChatTimeFontSize(20);
    // Set the font color of the chat timeline
    messageRecyclerView.setChatTimeFontColor(0xEE00EE00);
    

    Setting the tips message style

    You can customize the background, font size, and font color of tips messages in chats.

    Changing the tips message style

    // Get MessageRecyclerView from ChatView
    MessageRecyclerView messageRecyclerView = layout.getMessageLayout();
    // Set the background of tips
    messageRecyclerView.setTipsMessageBubble(new ColorDrawable(0xA020F000));
    // Set the font size of tips
    messageRecyclerView.setTipsMessageFontSize(20);
    // Set the font color of tips
    messageRecyclerView.setTipsMessageFontColor(0x7CFC0000);
    

    Setting the input area InputView

    The input area InputView contains audio, text, emoji, and more (+) input options.

    InputLayout

    Hiding undesired features

    You can hide or show the image sharing, photo taking, video recording, and file sending features on the "+" panel.

    // Get InputLayout from ChatView
    InputView inputView = layout.getInputLayout();
    // Hide "take photo and send"
    inputView.disableCaptureAction(true);
    // Hide "send file"
    inputView.disableSendFileAction(true);
    // Hide "send image"
    inputView.disableSendPhotoAction(true);
    // Hide "record video and send"
    inputView.disableVideoRecordAction(true);
    

    Adding custom features

    You can customize and add action units to the "+" panel to provide more features.

    The following code shows how to hide the "send file" feature and add an action unit which sends a message:

    // Get InputView from ChatView
    InputView inputView = layout.getInputLayout();
    // Hide "send file"
    inputView.disableSendFileAction(true);
    // Define an action unit
    InputMoreActionUnit unit = new InputMoreActionUnit();
    unit.setIconResId(R.drawable.default_user_icon); // Set the unit icon
    unit.setTitleId(R.string.profile); // Set the text title of the unit
    unit.setOnClickListener(unit.new OnActionClickListener() { // Define the click event
      @Override
      public void onClick() {
          ToastUtil.toastShortMessage("Custom more features");
          MessageInfo info = MessageInfoUtil.buildTextMessage("Who am I");
          layout.sendMessage(info, false);
      }
    });
    // Add the action unit to the "+" panel
    inputView.addAction(unit);
    

    Replacing the "+" click event

    You can customize features to replace the action units on the "+" panel.

    Replacing an event

    // Get InputView from ChatView
    InputView inputView = layout.getInputLayout();
    // Replace the feature entry on the "+" panel with a custom event
    inputView.replaceMoreInput(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
          ToastUtil.toastShortMessage("Custom “+” button event");
          MessageInfo info = MessageInfoUtil.buildTextMessage("Custom message");
          layout.sendMessage(info, false);
      }
    });
    

    Replacing the panel displayed upon "+" clicking

    You can customize the style of the "+" panel, the action units, and their features.

    // Get InputView from ChatView
    InputView inputView = layout.getInputLayout();
    // Use a custom fragment to replace more features
    inputView.replaceMoreInput(new CustomInputFragment());
    

    The implementation of the new panel CustomInputFragment is the same as that of an ordinary Fragment. Inflate the view at onCreateView and set the event. The following sample code shows how to add two buttons and pop up a toast when clicked:

    public static class CustomInputFragment extends BaseInputFragment {
      @Nullable
      @Override
      public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
          View baseView = inflater.inflate(R.layout.test_chat_input_custom_fragment, container, false);
          Button btn1 = baseView.findViewById(R.id.test_send_message_btn1);
          btn1.setOnClickListener(new View.OnClickListener() {
              @Override
              public void onClick(View v) {
                  ToastUtil.toastShortMessage("Send a hyperlink message");
              }
          });
          Button btn2 = baseView.findViewById(R.id.test_send_message_btn2);
          btn2.setOnClickListener(new View.OnClickListener() {
              @Override
              public void onClick(View v) {
                  ToastUtil.toastShortMessage("Send a message containing video and text");
              }
          });
          return baseView;
      }
    }
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support