Contacts
CometChatContacts is a versatile Android UI component specifically designed to facilitate the display and management of users and groups within chat applications. It streamlines the process of showcasing all app users and available chat groups in a user-friendly interface, making it easier for users to connect and communicate effectively.
Key Features:
- User List View: CometChatContacts presents a comprehensive list of all registered users within the application. This list allows users to quickly find and select specific individuals they wish to interact with.
- Group List View: The component also offers a dedicated view to showcase all the available chat groups. This simplifies the process of joining or creating new group conversations.
- Smart Search Functionality: Users can utilize the powerful search feature to quickly locate specific users or groups by typing names or keywords. This ensures seamless navigation, even in applications with a large user base.
- Selection Mode: CometChatContacts supports a selection mode, enabling users to pick multiple contacts or groups simultaneously. This feature proves useful for creating group chats or forwarding messages to multiple recipients.
- Customizable Tab Layout: Developers can easily customize the appearance of the tabs, including text colors, indicator color, and background, to match the app's branding and aesthetics.
- Selection Limit Control: Developers have the flexibility to set a selection limit, restricting the number of contacts or groups a user can select during the selection mode. This helps maintain messaging policies and optimize user experience.
- User-Friendly Close Button: The component provides a convenient close button feature, allowing users to exit the Contacts view and return to their previous screen or chat interface effortlessly.
How to integrate CometChatContacts
since CometChatContacts is a Widget, it can be added directly to the layout file as shown below.
- XML
<com.cometchat.chatuikit.contacts.CometChatContacts
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/contacts"/>
Methods
| Methods | Parameters | Description |
|---|---|---|
| setTitle(String title) | String | Sets the title that will be displayed at the top of the CometChatContacts view. This method allows you to customize the title to provide relevant information or context to the users. |
| setCloseButtonIcon(@DrawableRes int closeButtonIcon) | @DrawableRes int | Sets the icon that will be displayed as the close button in the CometChatContacts view. |
| setCloseButtonVisibility(boolean showBackButton) | boolean | Sets the visibility of the back button in the CometChatContacts view. If set to true, the back button will be displayed, allowing users to navigate back to the previous screen. If set to false, the back button will be hidden. |
| setSubmitIcon(@DrawableRes int submitIcon) | @DrawableRes int | Sets the icon that will be displayed as the submit icon in the CometChatContacts view. |
| setSubmitIconVisibility(int value) | int | Sets the visibility of the submit icon in the CometChatContacts view. If set to View.VISIBLE, the submit icon will be visible, allowing users to submit their selections. If set to View.GONE, the submit icon will be hidden. |
| setOnSubmitIconClick(OnSelection onSelection) | OnSelection | Sets the listener that will be triggered when the submit icon is clicked in the CometChatContacts view. The listener can be used to handle Contacts selection events, allowing users to perform actions based on the selected users and groups. |
| setStyle(ContactsStyle style) | ContactsStyle | Sets various style configurations for the CometChatContacts view, including title appearance, font, color, background, border, tab colors, and more. |
| setSelectionLimit(int limit) | int | Sets the selection limit for the CometChatContacts view. This method allows you to limit the number of users and groups that can be selected by the user in the Contacts view. Once the selection limit is reached, further selection of users and groups will be disabled. |
| setSelectionMode(UIKitConstants.SelectionMode selectionMode) | UIKitConstants.SelectionMode | selectionMode is used to set the selection mode for the CometChatUsers and CometChatGroups subviews embedded inside CometChatContacts. |
| setUsersTabTitle(String title) | String | Sets the title for the Users tab in the CometChatContacts view. This method allows you to customize the title displayed for the Users tab. |
| setGroupsTabTitle(String title) | String | Sets the title for the Groups tab in the CometChatContacts view. This method allows you to customize the title displayed for the Groups tab. |
| setOnItemClickListener(OnItemSelection selection) | OnItemSelection | Sets the listener to handle item selection events in the CometChatContacts view. This method allows you to register a callback to be notified when a user or group is selected by the user in the Contacts view. |
| setUsersConfiguration(UsersConfiguration configuration) | UsersConfiguration | Sets the configuration for the Users tab in the CometChatContacts view. This method allows you to customize various aspects of the Users tab, such as search functionality, appearance and more. By passing a valid UsersConfiguration object, you can control how the Users tab behaves and appears to the users. |
| setGroupsConfiguration(GroupsConfiguration configuration) | GroupsConfiguration | Sets the configuration for the Groups tab in the CometChatContacts view. This method allows you to customize various aspects of the Groups tab, such as search functionality, appearance and more. By passing a valid GroupsConfiguration object, you can control how the Groups tab behaves and appears to the users. |
ContactsStyle
This property is used to customize the appearance of the CometChatContacts component.
| Methods | Parameter | Description |
|---|---|---|
| setBackground(int background) | @ColorInt int | Sets the background color of the view. |
| setBackground(Drawable drawableBackground) | Drawable | Sets the drawable background of the view. |
| setCornerRadius(float cornerRadius) | float | Sets the corner radius of the view. |
| setBorderWidth(int borderWidth) | @ColorInt int | Sets the width of the view's border. |
| setBorderColor(int borderColor) | @ColorInt int | Sets the color of the view's border. |
| setTitleTextColor(int titleTextColor) | @ColorInt int | Sets the title text color for the contacts-related UI elements. |
| setBackIconTintColor(int backIconTintColor) | @ColorInt int | Sets the tint color for the back icon. |
| setSelectIconTint(int selectIconTint) | @ColorInt int | Sets the tint color for the select icon. |
| setTabSelectedTextColor(int tabSelectedTextColor) | @ColorInt int | Sets the text color for the selected tab. |
| setTabTextColor(int tabTextColor) | @ColorInt int | Sets the text color for the tabs. |
| setTabIndicatorColor(int tabIndicatorColor) | @ColorInt int | Sets the color for the tab indicator. |
| setTabBackgroundTint(int tabBackgroundTint) | @ColorInt int | Sets the tint color for the tab background. |
| setTabBackground(Drawable tabBackground) | Drawable | Sets the drawable resource for the tab background. |
| setTabBackgroundState(Drawable tabBackgroundState) | Drawable | Sets the drawable resource for the tab background state. |
| setTitleTextFont(String titleTextFont) | String | Sets the font for the title text. |
| setTitleTextAppearance(@StyleRes int titleTextAppearance) | @ColorInt int | Sets the text appearance for the title text. |
- Java
- Kotlin
// Create an instance of ContactsStyle
ContactsStyle contactsStyle = new ContactsStyle();
// Customize the appearance of UI elements
contactsStyle.setBackground(ContextCompat.getColor(context, R.color.contacts_background));
contactsStyle.setTitleTextColor(ContextCompat.getColor(context, R.color.contacts_title_text));
contactsStyle.setBackIconTintColor(ContextCompat.getColor(context, R.color.contacts_back_icon_tint));
contactsStyle.setSelectIconTint(ContextCompat.getColor(context, R.color.contacts_select_icon_tint));
contactsStyle.setTabSelectedTextColor(ContextCompat.getColor(context, R.color.contacts_tab_selected_text));
contactsStyle.setTabTextColor(ContextCompat.getColor(context, R.color.contacts_tab_text));
contactsStyle.setTabIndicatorColor(ContextCompat.getColor(context, R.color.contacts_tab_indicator));
contactsStyle.setTabBackgroundTint(ContextCompat.getColor(context, R.color.contacts_tab_background_tint));
contactsStyle.setTabBackground(ResourcesCompat.getDrawable(resources, R.drawable.contacts_tab_background, null));
contactsStyle.setTabBackgroundState(ResourcesCompat.getDrawable(resources, R.drawable.contacts_tab_background_state, null));
contactsStyle.setTitleTextFont("fonts/Roboto-Regular.ttf");
contactsStyle.setTitleTextAppearance(R.style.ContactsTitleTextAppearance);
// Now, you can use the contactsStyle object to customize the appearance of UI elements related to contacts in your chat application
CometChatContacts contacts=findViewById(R.id.contacts);
contacts.setStyle(contactsStyle);
// Inflate the layout for this fragment
// Create an instance of ContactsStyle
val contactsStyle = ContactsStyle()
// Customize the appearance of UI elements
contactsStyle.background = ContextCompat.getColor(requireContext(), R.color.contacts_background)
contactsStyle.titleTextColor =
ContextCompat.getColor(requireContext(), R.color.contacts_title_text)
contactsStyle.backIconTintColor =
ContextCompat.getColor(requireContext(), R.color.contacts_back_icon_tint)
contactsStyle.selectIconTint =
ContextCompat.getColor(requireContext(), R.color.contacts_select_icon_tint)
contactsStyle.tabSelectedTextColor =
ContextCompat.getColor(requireContext(), R.color.contacts_tab_selected_text)
contactsStyle.tabTextColor = ContextCompat.getColor(requireContext(), R.color.contacts_tab_text)
contactsStyle.tabIndicatorColor =
ContextCompat.getColor(requireContext(), R.color.contacts_tab_indicator)
contactsStyle.tabBackgroundTint =
ContextCompat.getColor(requireContext(), R.color.contacts_tab_background_tint)
contactsStyle.tabBackground =
ResourcesCompat.getDrawable(resources, R.drawable.contacts_tab_background, null)
contactsStyle.tabBackgroundState =
ResourcesCompat.getDrawable(resources, R.drawable.contacts_tab_background_state, null)
contactsStyle.titleTextFont = "fonts/Roboto-Regular.ttf"
contactsStyle.titleTextAppearance = R.style.ContactsTitleTextAppearance
// Now, you can use the contactsStyle object to customize the appearance of UI elements related to contacts in your chat application
val contacts: CometChatContacts = findViewById(R.id.contacts)
contacts.setStyle(contactsStyle)