diff --git a/.gitignore b/.gitignore index 96adadbc8..fcf7bc15b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,10 @@ .DS_Store .kiro/ + +# IDE files +.idea/ + +# Python caches +__pycache__/ +*.pyc diff --git a/ui-kit/android/ai-assistant-chat-history.mdx b/ui-kit/android/ai-assistant-chat-history.mdx index d692600a1..ac3dfb71e 100644 --- a/ui-kit/android/ai-assistant-chat-history.mdx +++ b/ui-kit/android/ai-assistant-chat-history.mdx @@ -22,7 +22,7 @@ The following code snippet exemplifies how you can seamlessly integrate the Grou -```xml +```xml lines -```java +```java lines User user = new User(); user.setUid("userId"); @@ -50,7 +50,7 @@ binding.cometChatAiAssistantChatHistory.setUser(user); -```kotlin +```kotlin lines val user = User() user.uid = "userId" @@ -76,7 +76,7 @@ Function invoked when a chat history item is clicked, typically used to open an -```java YourActivity.java +```java YourActivity.java lines binding.cometchatAiAssistantChatHistory.setOnItemClickListener((view, position, message) -> { @@ -86,7 +86,7 @@ binding.cometchatAiAssistantChatHistory.setOnItemClickListener((view, position, -```kotlin YourActivity.kt +```kotlin YourActivity.kt lines binding.cometchatAiAssistantChatHistory.setOnItemClickListener { view, position, message -> } @@ -104,7 +104,7 @@ Function executed when a user item is long-pressed, allowing additional actions -```java YourActivity.java +```java YourActivity.java lines binding.cometchatAiAssistantChatHistory.setOnItemLongClickListener((view, position, message) -> { }); @@ -113,7 +113,7 @@ binding.cometchatAiAssistantChatHistory.setOnItemLongClickListener((view, positi -```kotlin YourActivity.kt +```kotlin YourActivity.kt lines binding.cometchatAiAssistantChatHistory.setOnItemLongClickListener { view, position, message -> } @@ -131,7 +131,7 @@ Function triggered when the new chat button is clicked, typically used to start -```java YourActivity.java +```java YourActivity.java lines binding.cometchatAiAssistantChatHistory.setOnNewChatClickListener(() -> { }); @@ -140,7 +140,7 @@ binding.cometchatAiAssistantChatHistory.setOnNewChatClickListener(() -> { -```kotlin YourActivity.kt +```kotlin YourActivity.kt lines binding.cometchatAiAssistantChatHistory.setOnNewChatClickListener { } @@ -158,7 +158,7 @@ Function activated when the close button is clicked, usually to exit the chat hi -```java YourActivity.java +```java YourActivity.java lines binding.cometchatAiAssistantChatHistory.setOnCloseClickListener(() -> { }); @@ -167,7 +167,7 @@ binding.cometchatAiAssistantChatHistory.setOnCloseClickListener(() -> { -```kotlin YourActivity.kt +```kotlin YourActivity.kt lines binding.cometchatAiAssistantChatHistory.setOnCloseClickListener { } @@ -189,7 +189,7 @@ Using Style you can customize the look and feel of the component in your app, Th -```xml themes.xml +```xml themes.xml lines ``` -To know more such attributes, visit the [theme attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_theme.xml). +- **What this does**: Replaces the UI Kit primary color with your custom value. + +- **Verify**: Buttons and highlights use the new primary color. + +### Apply your theme in the manifest +What you're changing: The theme applied to your app. + +- **Where to change it**: `AndroidManifest.xml`. + +- **Applies to**: All activities unless overridden. + +- **Default behavior**: The application theme is not set to your UI Kit theme. + +- **Override**: Set `android:theme` on the `` element. + +- **Code**: + +```xml AndroidManifest.xml lines + + +``` + +- **What this does**: Applies your theme to all app activities. + +- **Verify**: UI Kit screens use your updated theme colors. + +## Customization matrix +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Light mode palette | `app/src/main/res/values/color.xml` | `cometchat_color_primary` | `#6852D6` | +| Dark mode palette | `app/src/main/res/values-night/color.xml` | `cometchat_color_primary` | `#6852D6` | +| Primary color override | `app/src/main/res/values/themes.xml` | `cometchatPrimaryColor` | `#F76808` | +| Apply theme | `AndroidManifest.xml` | `android:theme` | `android:theme="@style/AppTheme"` | + +## Common pitfalls and fixes +- Colors do not change: Confirm your app theme extends `CometChatTheme.DayNight`. +- Dark mode colors not applied: Ensure `res/values-night/color.xml` exists. +- Custom primary color not showing: Verify `cometchatPrimaryColor` is set in your theme. +- UI Kit still uses defaults: Rebuild the app after resource changes. +- Theme not applied: Check `android:theme` in `AndroidManifest.xml`. + +## FAQ +**Q**: Can I edit the UI Kit color XML directly? +**A**: You can reference or override colors in your app resources; UI Kit will read them at runtime. + +**Q**: Do I need separate colors for dark mode? +**A**: Yes. Use `res/values-night/color.xml` for dark mode overrides. + +**Q**: Where can I see all default colors? +**A**: Use the [Light mode colors](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/color.xml) and [Dark mode colors](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values-night/color.xml). diff --git a/ui-kit/android/component-styling.mdx b/ui-kit/android/component-styling.mdx index 529c1fee9..3a7f701e1 100644 --- a/ui-kit/android/component-styling.mdx +++ b/ui-kit/android/component-styling.mdx @@ -1,23 +1,102 @@ --- title: "Component Styling" +description: "Style CometChat UI Kit components in Android using XML themes and drawable overrides." --- -## Overview +This page shows how to style CometChat UI Kit components in Android by overriding XML theme attributes. It is written for Android developers customizing UI Kit v5. -CometChat UIKit enables developers to seamlessly integrate customizable components into their applications. Each component is designed to ensure a consistent user experience while offering flexibility to adapt to your app’s design system. You can modify attributes such as colors, fonts, sizes, icons, and more using XML or programmatically. Below is a detailed guide for styling individual components within the UIKit. +## When to use this -## Components +- You want UI Kit screens (lists, headers, and message UI) to match your brand colors and typography. +- You need to customize calling and AI UI components without rebuilding UI from scratch. +- You prefer centralized styling through `res/values/themes.xml`. +- You want consistent iconography by supplying your own vector drawables. +- You need a repeatable pattern that an AI coding agent can apply across components. -### Conversations +## Prerequisites -The `CometChatConversations` Component provides a list of recent chats, showing participants, message previews, and timestamps. It supports default themes while offering deep customization for text appearance, icons, and overall layout. With this component, you can create an intuitive and visually appealing chat list that matches your app’s branding. +- CometChat Android UI Kit v5 installed in your app. +- Your app theme extends `CometChatTheme.DayNight`. +- You can edit `res/values/themes.xml` in your Android module. +- You can add drawable resources to `res/drawable/` when needed. +- You rebuild or sync Gradle after updating styles. + +## Quick start + +1. Open `res/values/themes.xml`. +2. Create a custom style that extends the component's parent style (for example, `CometChatConversationsStyle`). +3. Assign your custom style to `AppTheme` using the component's theme attribute (for example, `cometchatConversationsStyle`). +4. Sync Gradle and rebuild the app. +5. Navigate to the screen that uses the component and confirm the visual change. + +```xml res/values/themes.xml lines + + + + + + + +``` + +- **What this does**: applies a custom avatar style to the Conversations list through your app theme. + +- **Verify**: open the Conversations screen and confirm the avatar background and stroke radius changed. + +## Core concepts + +- `AppTheme` is the single place where UI Kit style hooks are wired. +- Each UI Kit component has a parent style (for example, `CometChatMessageListStyle`) and a theme attribute (for example, `cometchatMessageListStyle`). +- Custom styles must extend the correct parent style to inherit default behavior. +- Drawable overrides (for example, custom icons) live in `res/drawable/` and are referenced from styles. +- Fonts can be set once at the theme level and reused across components. + +```xml res/values/themes.xml lines + + + +``` + +- **What this does**: sets UI Kit typography once so you do not repeat font assignments in every component. + +## Implementation + +Use the following sections to style each component. Each section lists what changes, where to change it, the exact code to paste, and how to verify the result. + +### Chat lists and messaging UI + +#### Conversations + +The `CometChatConversations` component renders the recent chats list. -```html - +What you're changing: avatar and badge styling in the conversation list. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatConversations` + +- **Default behavior**: UI Kit default avatar and badge styles. + +- **Override**: set `cometchatConversationsStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + -``` -```html - + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_conversations.xml). +- **What this does**: applies custom avatar and badge styles to conversation list items. + +- **Verify**: the Conversations list shows updated avatar backgrounds and badge colors. -### Users +Attribute references: +- [Conversations attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_conversations.xml) +- [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_avatar.xml) +- [Badge attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_badge.xml) -The `CometChatUsers` Component displays a scrollable list of users. It is ideal for showcasing available contacts for messaging, calls, or group creation. Developers can style elements like user avatars, status indicators, and list backgrounds to align with their design guidelines. +#### Users + +The `CometChatUsers` component renders a list of users for selection or navigation. -```html +What you're changing: user list avatar and separator styling. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatUsers` + +- **Default behavior**: UI Kit default avatar and list styling. + +- **Override**: set `cometchatUsersStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + -``` -```html - + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_users.xml). +- **What this does**: applies avatar and separator color overrides to the user list. + +- **Verify**: the Users list shows updated avatar backgrounds and separator color. -### Groups +Attribute references: +- [Users attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_users.xml) +- [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_avatar.xml) -The `CometChatGroups` Component allows you to display and interact with chat groups. Each group item highlights key details like the group name, participant count, and last active time. Customization options include avatar styles, fonts, borders, and background colors, ensuring the component blends seamlessly with your app. +#### Groups + +The `CometChatGroups` component renders group items and their summary data. -```html +What you're changing: group list avatar and typography colors. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatGroups` + +- **Default behavior**: UI Kit default group item styling. + +- **Override**: set `cometchatGroupsStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + -``` -```html - + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_groups.xml). +- **What this does**: styles group avatars and separators in the Groups list. + +- **Verify**: the Groups list shows the updated avatar background and title color. -### Message Header +Attribute references: +- [Groups attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_groups.xml) +- [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_avatar.xml) -The `CometChatMessageHeader` Component provides essential information about the active chat, such as the recipient's name, avatar, and status (online/offline). It often includes options like back navigation, search, or menu buttons. Customization options allow you to style the header background, text appearance, and icons to match your app's overall design. +#### Message Header + +The `CometChatMessageHeader` component renders the title, avatar, and action icons for a chat. -```html +What you're changing: title text color, avatar styling, and call button icons. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatMessageHeader` + +- **Default behavior**: UI Kit default header typography and icons. + +- **Override**: set `cometchatMessageHeaderStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + -``` -```html - + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_header.xml). +- **What this does**: applies custom title color, avatar styling, and call button tints in the message header. -### Message List +- **Verify**: open a conversation and check the header text and call button icons. -The `CometChatMessageList` Component displays the sequence of messages in a conversation, supporting text, media, reactions, and more. It includes smooth scrolling, timestamps, and grouping for better readability. Developers can customize bubble colors, text appearance, timestamps, and alignment to provide a tailored chat experience. +Attribute references: +- [Message Header attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_header.xml) +- [Call Buttons attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_call_buttons.xml) + +#### Message List + +The `CometChatMessageList` component renders conversation messages and their bubble styles. -```xml themes.xml +What you're changing: message list background and outgoing bubble styling. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatMessageList` + +- **Default behavior**: UI Kit default message list background and bubble colors. + +- **Override**: set `cometchatMessageListStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + @@ -166,28 +299,41 @@ The `CometChatMessageList` Component displays the sequence of messages in a conv #FEEDE1 @style/CustomOutgoingMessageBubbleStyle -``` -```html + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_list.xml). +- **What this does**: changes the message list background and outgoing bubble color. + +- **Verify**: open a conversation and check outgoing message bubble colors. -### Message Composer +Attribute references: +- [Message List attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_list.xml) +- [Outgoing Message Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_outgoing_message_bubble.xml) -The `CometChatMessageComposer` Component enables users to compose and send messages, including text, attachments, and stickers. This highly interactive component supports customization of input box styles, button appearances, and interaction feedback, ensuring it blends seamlessly with your app’s chat UI. +#### Message Composer + +The `CometChatMessageComposer` component renders the input box and action buttons. -```xml drawable/active_send_button +What you're changing: send button icon and composer icon tints. + +- **Where to change it**: `res/drawable/active_send_button.xml` and `res/values/themes.xml` + +- **Applies to**: `CometChatMessageComposer` + +- **Default behavior**: UI Kit default composer icons and send button drawable. + +- **Override**: set `cometchatMessageComposerStyle` in `AppTheme` and reference a custom drawable. + +- **Code**: +```xml res/drawable/active_send_button.xml lines ``` -```xml themes.xml +- **What this does**: defines a custom circular send button drawable. +- **Code**: +```xml res/values/themes.xml lines + -``` -```xml themes.xml + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_composer.xml). +- **What this does**: applies custom icon tints and the active send button drawable to the composer. + +- **Verify**: the composer shows the custom send button and tinted icons. + +Attribute references: +- [Message Composer attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_composer.xml) -### Group Members +#### Group Members -The `CometChatGroupMembers` Component lists participants in a chat group with details like names, avatars, and roles (e.g., admin or member). It supports customizable styles for list items, fonts, and background colors, ensuring it integrates with your app's group management interface. +The `CometChatGroupMembers` component lists users inside a group. -```html - - @@ -251,33 +410,47 @@ The `CometChatGroupMembers` Component lists participants in a chat group with de #F76808 #F76808 -``` -```xml themes.xml - + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_group_members.xml). +- **What this does**: applies custom avatar and separator styling to the group members list. + +- **Verify**: the group members screen shows updated avatar and separator colors. + +Attribute references: +- [Group Members attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_group_members.xml) +- [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_avatar.xml) -### Thread Header +#### Thread Header -The `CometChatThreadHeader` is used in threaded message views, displaying information about the parent message and its context. It provides a seamless way to navigate between the thread and the main conversation while maintaining context. +The `CometChatThreadHeader` component renders the parent message preview in threaded views. -```xml theme.xml +What you're changing: thread header bubble colors and reply count styling. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatThreadHeader` + +- **Default behavior**: UI Kit default thread header styling. + +- **Override**: set `cometchatThreadHeaderStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + @@ -289,127 +462,420 @@ The `CometChatThreadHeader` is used in threaded message views, displaying inform #F76808 #FEEDE1 -``` -```xml themes.xml + +``` + +- **What this does**: customizes thread header bubble colors and reply count styling. + +- **Verify**: open a thread and confirm the header background and reply count colors. + +Attribute references: +- [Thread Header attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_thread_header.xml) +- [Outgoing Message Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_outgoing_message_bubble.xml) +- [Incoming Message Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_incoming_message_bubble.xml) + +#### Search + +The `CometChatSearch` component provides cross-conversation and message search UI. + + + + + +What you're changing: search background and typography styles. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatSearch` + +- **Default behavior**: UI Kit default search colors and text appearance. + +- **Override**: set `cometchatSearchStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + + + +``` + +- **What this does**: applies custom search colors and text styles across search UI sections. + +- **Verify**: open Search and check section headers, chips, and list items. + +Attribute references: +- [Search attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_search.xml) + +#### Message Information + +The `CometChatMessageInformation` component displays message metadata such as delivery and read status. + + + + + +What you're changing: message information styling for metadata views. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatMessageInformation` + +- **Default behavior**: UI Kit default metadata styling. + +- **Override**: set `cometchatMessageInformationStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + +``` + +- **What this does**: wires a custom Message Information style so you can override specific metadata attributes. + +- **Verify**: open Message Information and confirm your overrides apply. + +Attribute references: +- [Message Information attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_information.xml) + +#### Message Option Sheet + +The `CometChatMessageOptionSheet` component is the action menu for message-level actions. + + + + + +What you're changing: option sheet background and icon tint. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatMessageOptionSheet` + +- **Default behavior**: UI Kit default option sheet styling. + +- **Override**: set `cometchatMessageOptionSheetStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + +``` + +- **What this does**: updates message option sheet icon tint and background color. + +- **Verify**: long-press a message and confirm the option sheet styling. + +Attribute references: +- [Message Option Sheet attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_option_sheet.xml) + +#### Attachment Option Sheet + +The `CometChatAttachmentOptionSheet` component renders the attachment picker. + + + + + +What you're changing: attachment option sheet background and icon tint. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatAttachmentOptionSheet` + +- **Default behavior**: UI Kit default attachment sheet styling. + +- **Override**: set `cometchatAttachmentOptionSheetStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + +``` + +- **What this does**: applies custom colors to the attachment picker sheet. + +- **Verify**: open the attachment menu and confirm background and icons. + +Attribute references: +- [Attachment Option Sheet attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_attachment_option_sheet.xml) + +#### Mentions + +The `CometChatMentions` styling controls how user mentions appear inside messages. + + + + + +What you're changing: mention text and background styles for incoming and outgoing bubbles. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatMentions` + +- **Default behavior**: UI Kit default mention styling. + +- **Override**: set `cometchatMessageBubbleMentionsStyle` in both incoming and outgoing bubble styles. + +- **Code**: +```xml res/values/themes.xml lines + + + + + + + + + + + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_thread_header.xml). +- **What this does**: customizes mention colors for incoming and outgoing message bubbles. + +- **Verify**: send a mention in a chat and check the mention highlight colors. -### Call Logs +Attribute references: +- [Mentions attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_mentions.xml) +- [Incoming Message Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_incoming_message_bubble.xml) +- [Outgoing Message Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_outgoing_message_bubble.xml) -The `CometChatCallLogs` Component provides a list of recent calls (voice or video), showing details like call type, duration, participants, and timestamps. Developers can style text, icons, and background elements, making it easy to match the app’s design system. +### Calling UI + +#### Call Logs + +The `CometChatCallLogs` component renders recent call history. -```xml themes.xml +What you're changing: call log list separators and title colors. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatCallLogs` + +- **Default behavior**: UI Kit default call log styling. + +- **Override**: set `cometchatCallLogsStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + -``` -```xml themes.xml + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_call_logs.xml). +- **What this does**: applies custom avatar and text colors to the call logs list. + +- **Verify**: open Call Logs and confirm the separator and title colors. -### Incoming Call +Attribute references: +- [Call Logs attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_call_logs.xml) -The `CometChatIncomingCall` component displays a notification for an incoming call. It typically includes caller details like name, avatar, and call type (audio/video), along with buttons to accept or decline the call. +#### Incoming Call + +The `CometChatIncomingCall` component renders the incoming call UI. -```xml themes.xml - +What you're changing: incoming call background, buttons, and avatar styling. - -``` +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatIncomingCall` + +- **Default behavior**: UI Kit default incoming call layout and colors. + +- **Override**: set `cometchatIncomingCallStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + -```xml themes.xml + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_incoming_call.xml). +- **What this does**: customizes the incoming call screen background and action buttons. + +- **Verify**: trigger an incoming call and confirm the background and button colors. + +Attribute references: +- [Incoming Call attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_incoming_call.xml) +- [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_avatar.xml) -### Outgoing Call +#### Outgoing Call -The `CometChatOutgoingCall` component displays a status view for calls initiated by the user, showing the recipient's details, call type, and call status (e.g., ringing or connecting). +The `CometChatOutgoingCall` component renders the outgoing call UI. -```xml themes.xml +What you're changing: outgoing call avatar styling. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatOutgoingCall` + +- **Default behavior**: UI Kit default outgoing call styling. + +- **Override**: set `cometchatOutgoingCallStyle` in `AppTheme`. +- **Code**: +```xml res/values/themes.xml lines + + -``` - -```xml themes.xml + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_outgoing_call.xml). +- **What this does**: applies a custom avatar style to the outgoing call screen. + +- **Verify**: place a call and confirm the avatar styling. -### Call Button +Attribute references: +- [Outgoing Call attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_outgoing_call.xml) +- [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_avatar.xml) -The `CometChatCallButton` Component initiates voice or video calls with a single click. It supports various customization options for button color and icon styles, making it adaptable to different screen layouts and themes. These components further enhance the versatility of CometChat UIKit, ensuring that all aspects of messaging and calling functionality are cohesive, user-friendly, and fully customizable. +#### Call Buttons + +The `CometChatCallButton` component renders voice and video call buttons. -```xml themes.xml +What you're changing: button background, stroke, and icon tint. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatCallButtons` + +- **Default behavior**: UI Kit default call button styling. + +- **Override**: set `cometchatCallButtonsStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + -``` -```xml themes.xml - + + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_call_buttons.xml). +- **What this does**: customizes call button padding, background, and icon colors. + +- **Verify**: open a chat header and confirm button styling. + +Attribute references: +- [Call Buttons attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_call_buttons.xml) + +### AI UI -### AI Assistant Chat History +#### AI Assistant Chat History -The `CometChatAIAssistantChatHistory` component displays the history of interactions with an AI assistant. It provides a seamless way to view past conversations, ensuring users can easily reference previous AI responses. +The `CometChatAIAssistantChatHistory` component renders the AI conversation history view. -```xml themes.xml +What you're changing: background, header, and list typography. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatAIAssistantChatHistory` + +- **Default behavior**: UI Kit default AI history styling. + +- **Override**: set `cometChatAIAssistantChatHistoryStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + - + ``` -```xml themes.xml - +- **What this does**: applies custom colors and font styling to the AI Assistant history screen. + +- **Verify**: open AI Assistant history and confirm background and header styling. + +Attribute references: +- [AI Assistant Chat History attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_assistant_chat_history.xml) + +#### AI Option Sheet + +The `CometChatAIOptionSheet` component renders AI action options. + + + + + +What you're changing: AI option sheet background and icon tint. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatAIOptionSheet` + +- **Default behavior**: UI Kit default AI option sheet styling. + +- **Override**: set `cometchatAIOptionSheetStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_assistant_chat_history.xml). +- **What this does**: customizes AI option sheet colors. -### Search +- **Verify**: open AI actions and confirm the option sheet styling. -The `CometChatSearch` component allows users to search through conversations and messages. It provides a user-friendly interface for finding specific content quickly, with customizable styles for various elements such as background colors, text appearances, and section headers. +Attribute references: +- [AI Option Sheet attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_option_sheet.xml) + +#### Conversation Starter + +The `CometChatConversationStarter` component renders AI-powered conversation starters. - + -```xml themes.xml - - @style/textStyleTimesNewRoman + + +``` - + + + ``` -```xml themes.xml - +- **What this does**: applies a custom background color to conversation summary cards. + +- **Verify**: open a chat summary and confirm the background color. + +Attribute references: +- [AI Conversation Summary attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_conversation_summary.xml) + +#### Smart Replies + +The `CometChatSmartReplies` component renders AI-generated reply suggestions. + + + + + +What you're changing: smart reply background, item color, and stroke. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatSmartReplies` + +- **Default behavior**: UI Kit default smart replies styling. + +- **Override**: set `cometchatAISmartRepliesStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + ``` -*** +- **What this does**: customizes smart reply container and chip styling. + +- **Verify**: open a conversation with smart replies enabled and confirm chip styling. -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_search.xml). +Attribute references: +- [AI Smart Replies attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_smart_replies.xml) -## Base Component +### Base components -### Avatar +#### Avatar -The `CometChatAvatar` Component is used across the UIKit to represent users, groups, or placeholders visually. This highly reusable component supports various shapes (circle or square), sizes, borders, and fallback icons, allowing complete design consistency for profile or group images. +The `CometChatAvatar` component is used across lists and headers. -```xml themes.xml - -``` +What you're changing: avatar shape and background color. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatAvatar` + +- **Default behavior**: UI Kit default avatar styling. + +- **Override**: set `cometchatAvatarStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + -```xml themes.xml - + + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_avatar.xml). +- **What this does**: applies a consistent avatar style across UI Kit components. + +- **Verify**: open any list with avatars and confirm the style. + +Attribute references: +- [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_avatar.xml) -### Status indicator +#### Status Indicator -The `CometChatStatusIndicator` visually represents user presence (online, offline, or custom states). It can be styled for different shapes, sizes, and colors to reflect your app’s visual preferences while maintaining clarity in conveying status information. +The `CometChatStatusIndicator` component shows user presence status. -```xml drawable/online_indicator_drawable +What you're changing: status indicator icon shape and drawable. + +- **Where to change it**: `res/drawable/online_indicator_drawable.xml` and `res/values/themes.xml` + +- **Applies to**: `CometChatStatusIndicator` + +- **Default behavior**: UI Kit default presence icon. + +- **Override**: set `cometchatStatusIndicatorStyle` in `AppTheme` and reference a custom drawable. + +- **Code**: +```xml res/drawable/online_indicator_drawable.xml lines + android:strokeColor="#ffffff" /> ``` -```xml themes.xml - -``` +- **What this does**: defines a custom online indicator drawable. + +- **Code**: +```xml res/values/themes.xml lines + + -```xml themes.xml - + + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_status_indicator.xml). +- **What this does**: applies the custom status indicator drawable in UI Kit components. + +- **Verify**: check any user list to confirm the presence icon. + +Attribute references: +- [Status Indicator attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_status_indicator.xml) -### Badge +#### Badge -The `CometChatBadge` Component displays notifications or counts, such as unread messages. It can be styled for background colors, border radius, text size, and colors, allowing you to create visually distinct indicators for different notifications. +The `CometChatBadge` component shows unread or notification counts. -```xml themes.xml - -``` +What you're changing: badge background, text color, and corner radius. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatBadge` + +- **Default behavior**: UI Kit default badge styling. -```xml themes.xml - +- **Override**: set `cometchatBadgeStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_badge.xml). +- **What this does**: applies a custom badge appearance across UI Kit lists. + +- **Verify**: check any unread badge to confirm colors and radius. + +Attribute references: +- [Badge attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_badge.xml) -### Date +#### Date -The `CometChatDate` Component formats and displays timestamps in conversation lists and message threads. It ensures time-related information is clear and consistent. Developers can customize its text appearance, alignment, and colors to fit various contexts. +The `CometChatDate` component formats timestamps in lists and message threads. -```xml themes.xml - -``` +What you're changing: date text color. + +- **Where to change it**: `res/values/themes.xml` + +- **Applies to**: `CometChatDate` + +- **Default behavior**: UI Kit default date styling. -```xml themes.xml - +- **Override**: set `cometchatDateStyle` in `AppTheme`. + +- **Code**: +```xml res/values/themes.xml lines + + + + + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_date.xml). +- **What this does**: customizes date text color in UI Kit lists and headers. + +- **Verify**: check any timestamp and confirm the color. -### Receipts +Attribute references: +- [Date attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_date.xml) -The `CometChatReceipts` Component indicates message delivery and read statuses using intuitive icons. These can be styled for icon size, tint, and alignment, ensuring they remain clear and consistent with your app’s UI. +#### Receipts + +The `CometChatReceipts` component renders read and delivered status icons. -```xml drawable/read_receipts +What you're changing: read receipt icon drawable. + +- **Where to change it**: `res/drawable/read_receipts.xml` and `res/values/themes.xml` + +- **Applies to**: `CometChatReceipts` + +- **Default behavior**: UI Kit default receipt icons. + +- **Override**: set `cometchatMessageReceiptStyle` in `AppTheme` and reference a custom drawable. + +- **Code**: +```xml res/drawable/read_receipts.xml lines ``` -```xml themes.xml - -``` - -```xml themes.xml - -``` - -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_receipt.xml). - -### Media Recorder - -The `CometChatMediaRecorder` Component facilitates the recording of audio and video messages. It supports full customization of its recording controls, including button sizes, shapes, and colors, making it an integral part of your media-rich chat experience. - - - - +- **What this does**: defines a custom read receipt icon. -```xml themes.xml -] -``` +- **Code**: +```xml res/values/themes.xml lines + + -```xml themes.xml - + + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_media_recorder.xml). - -### Sticker Keyboard - -The `CometChatStickerKeyboard` simplifies the integration of sticker-based messaging. Customize the background, grid layout, and sticker display styles to align with your chat experience. This component provides a visually rich and interactive way to enhance conversations. +- **What this does**: applies the custom receipt icon to message status indicators. - - - - -```xml themes.xml - -``` - -```xml themes.xml - -``` +- **Verify**: send a message and check the receipt icon for read status. -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_sticker_keyboard.xml). +Attribute references: +- [Message Receipt attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_receipt.xml) -### Reaction list +#### Media Recorder -The `CometChatReactionList` Component provides a visual representation of emoji reactions on messages. It supports customization for reaction sizes, spacing, and colors, enabling you to build an engaging and personalized messaging environment. +The `CometChatMediaRecorder` component controls audio and video message recording. - + -```xml themes.xml - -``` +What you're changing: recorder icon sizes and recording button background color. -```xml themes.xml - -``` +- **Where to change it**: `res/values/themes.xml` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_reaction_list.xml). +- **Applies to**: `CometChatMediaRecorder` -### Conversation Starter +- **Default behavior**: UI Kit default media recorder styling. -The `CometChatConversationStarter` Component offers AI-based suggestions or reply options to initiate a chat. Developers can customize the background, text styles, and button appearances to ensure seamless integration with the app’s visual language. +- **Override**: set `cometchatMediaRecorderStyle` in `AppTheme`. - - - +- **Code**: +```xml res/values/themes.xml lines + + -```xml themes.xml - + + ``` -```xml themes.xml - -``` +- **What this does**: applies custom sizing and color to the media recorder UI. -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_conversation_starter.xml). +- **Verify**: open the recorder and check icon sizes and record button color. -### Conversation Summary +Attribute references: +- [Media Recorder attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_media_recorder.xml) -The `CometChatConversationSummary` Component highlights the essence of a conversation, including participant details, last message, and timestamp. Customize text sizes, colors, and spacing to create visually distinct summaries that improve readability and engagement. +#### Sticker Keyboard + +The `CometChatStickerKeyboard` component renders the sticker picker UI. - + -```xml themes.xml - -``` - -```xml themes.xml - -``` +What you're changing: sticker keyboard background color. -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_conversation_summary.xml). +- **Where to change it**: `res/values/themes.xml` -### Smart Replies +- **Applies to**: `CometChatStickerKeyboard` -The `CometChatSmartReplies` Component provides AI-driven suggestions for quick message replies. Fully customizable for button styles, padding, and colors, this component enables a streamlined and modern chat experience for users. +- **Default behavior**: UI Kit default sticker keyboard styling. - - - +- **Override**: set `cometchatStickerKeyboardStyle` in `AppTheme`. -```xml themes.xml - -``` +- **Code**: +```xml res/values/themes.xml lines + + -```xml themes.xml - + + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_smart_replies.xml). - -### Message Information +- **What this does**: applies a custom background color to the sticker keyboard. -The `CometChatMessageInformation` Component displays metadata for messages, such as delivery timestamps, sender details, and read receipts. Customization options include text styles, colors, and alignment, making it adaptable to various app layouts. +- **Verify**: open the sticker keyboard and confirm the background color. - - - - -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_information.xml). +Attribute references: +- [Sticker Keyboard attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_sticker_keyboard.xml) -### Message option sheet +#### Reaction List -The `CometChatMessageOptionSheet` Component is a context menu for performing actions on messages, such as replying, forwarding, or deleting. Developers can style its background, icons, and text to match the app’s menu system. +The `CometChatReactionList` component renders reactions on messages. - + -```xml themes.xml - -``` +What you're changing: active tab color in the reaction list. -```xml themes.xml - -``` +- **Where to change it**: `res/values/themes.xml` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_option_sheet.xml). +- **Applies to**: `CometChatReactionList` -### Attachment option sheet +- **Default behavior**: UI Kit default reaction list styling. -The `CometChatAttachmentOptionSheet` Component provides a sleek interface for users to attach media, documents, or other files. It supports icon and text customizations to create a cohesive attachment experience. +- **Override**: set `cometchatReactionListStyle` in `AppTheme`. - - - +- **Code**: +```xml res/values/themes.xml lines + + -```xml themes.xml - + + ``` -```xml themes.xml - -``` +- **What this does**: applies a custom active tab color in the reaction list. -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_attachment_option_sheet.xml). +- **Verify**: open reactions and confirm the active tab color. -### AIOption Sheet +Attribute references: +- [Reaction List attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_reaction_list.xml) -The `CometChatAIOptionSheet` Component offers AI-powered action options, like generating replies or initiating voice-to-text commands. It allows developers to style icons, colors, and interaction elements for a polished and user-friendly interface. +## Customization matrix - - - +| What you want to change | Where | Property or API | Example | +| --- | --- | --- | --- | +| Conversations avatar and badge | `res/values/themes.xml` | `cometchatConversationsStyle` | `cometchatConversationsBadgeStyle` | +| Users list separators | `res/values/themes.xml` | `cometchatUsersStyle` | `cometchatUsersSeparatorColor` | +| Group list titles | `res/values/themes.xml` | `cometchatGroupsStyle` | `cometchatGroupsTitleTextColor` | +| Header call icons | `res/values/themes.xml` | `cometchatMessageHeaderStyle` | `cometchatMessageHeaderCallButtonsStyle` | +| Message list background | `res/values/themes.xml` | `cometchatMessageListStyle` | `cometchatMessageListBackgroundColor` | +| Composer send button | `res/drawable/active_send_button.xml` | `cometchatMessageComposerActiveSendButtonDrawable` | `@drawable/active_send_button` | +| Search UI typography | `res/values/themes.xml` | `cometchatSearchStyle` | `cometchatSearchBarTextAppearance` | +| Call buttons styling | `res/values/themes.xml` | `cometchatCallButtonsStyle` | `cometchatCallButtonsVideoCallBackgroundColor` | +| AI smart replies chip style | `res/values/themes.xml` | `cometchatAISmartRepliesStyle` | `cometchatAISmartRepliesItemStrokeColor` | +| Mentions highlight colors | `res/values/themes.xml` | `cometchatMessageBubbleMentionsStyle` | `cometchatMentionTextColor` | -```xml themes.xml - -``` +## Common pitfalls and fixes -```xml themes.xml - -``` +- Issue: styles do not apply. Fix: confirm your activity theme is `AppTheme` and extends `CometChatTheme.DayNight`. +- Issue: only some screens update. Fix: the screen might use a different theme; verify the theme in your activity or fragment. +- Issue: drawable changes not visible. Fix: rebuild the app after adding a new drawable file. +- Issue: changes apply in light mode but not dark mode. Fix: update both `values/themes.xml` and `values-night/themes.xml` if you use night resources. +- Issue: attribute name not recognized. Fix: confirm the exact attribute name in the linked attribute reference file. +- Issue: style overridden unexpectedly. Fix: check for duplicate style names in other modules or flavors. +- Issue: colors look wrong on some devices. Fix: verify color hex values include alpha when needed. +- Issue: list items still show default fonts. Fix: set UI Kit fonts in `AppTheme` once as shown in Core concepts. -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_option_sheet.xml). +## FAQ -### Mentions +**Q**: Do I need to repeat font settings in every component style? +**A**: No. Set fonts once in `AppTheme` using `cometchatFontBold`, `cometchatFontMedium`, and `cometchatFontRegular`. -The `CometChatMentions` Component highlights referenced users or groups within messages. With customizable styles for text color and background, you can ensure mentions stand out clearly in chats while maintaining a cohesive visual theme. +**Q**: Where do I find all available attributes for a component? +**A**: Use the Attribute references links under each component section. - - - +**Q**: Why do my changes not appear in a specific screen? +**A**: Confirm the screen is using the same `AppTheme` and not overriding the theme locally. + +**Q**: Can I change icons without changing the component layout? +**A**: Yes. Provide a custom vector in `res/drawable/` and reference it from the component style. -```xml themes.xml - - - - - - - -``` - -```html - -``` - -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_mentions.xml). +**Q**: Do I need to enable anything in the CometChat Dashboard for styling? +**A**: No. Styling is local to your Android project and does not require dashboard changes. diff --git a/ui-kit/android/components-overview.mdx b/ui-kit/android/components-overview.mdx index 5b41f2aa8..f005ab3b1 100644 --- a/ui-kit/android/components-overview.mdx +++ b/ui-kit/android/components-overview.mdx @@ -1,43 +1,101 @@ --- title: "Overview" --- - -CometChat's **UI Kit** is a set of pre-built UI components that allows you to easily craft an in-app chat with all the essential messaging features. - -## Type of Components - -UI components based on the behaviour and functionality can be categorized into three types: Base Components and Components - -### Base Components - -Base Components form the building blocks of your app's user interface (UI). They focus solely on presenting visual elements based on input data, without handling any business logic. These components provide the foundational appearance and behavior for your UI. - -### Components - -Components build upon Base Components by incorporating business logic. They not only render UI elements but also manage data loading, execute specific actions, and respond to events. This combination of visual presentation and functional capabilities makes Components essential for creating dynamic and interactive UIs. - -## Actions - -Actions direct the operational behavior of a component. They are split into two categories: Predefined Actions and User-Defined Actions. - -### Predefined Actions - -These are actions that are inherently programmed into a UI component. They are ingrained in thecomponent itself by default, and they execute automatically in response to user interaction,without needing any additional user input. - -### User-Defined Actions - -These are actions that must be explicitly specified by the user. They are not innately part ofthe component like predefined actions. Instead, they must be developed based on the unique needsof the user or the application. User-defined actions provide adaptability and allow for thecreation of custom behaviors that align with the individual needs of the application. - -To customize the behavior of a component, actions must be overridden by the user. This provides the user with control over how the component responds to specific events or interactions. - -Both Components and Composite Components expose actions to the user, which means that users can interact with these types of components through predefined or user-defined actions. On the otherhand, Base Components do not expose actions to the user as they are the foundational buildingblocks mainly responsible for rendering the user interface and do not carry any business logic oractions. - -## Events - -Events allow for a decoupled, flexible architecture where different parts of the application can interact without having to directly reference each other. This makes it easier to create complex, interactive experiences, as well as to extend and customize the functionality provided by the CometChat UI Kit. - -Both Components and Composite Components have the ability to emit events. These events are dispatched in response to certain changes or user interactions within the component. By emitting events, these components allow other parts of the application to react to changes or interactions, thus enabling dynamic and interactive behavior within the application. - -## Configurations - -Configurations offer the ability to customize the properties of each individual component within a Composite Component. If a Composite Component includes multiple components, each of these components will have its own set of properties that can be configured. This means multiple sets of configurations are available, one for each constituent component. This allows for fine-tuned customization of the Composite Component, enabling you to tailor its behavior and appearance to match specific requirements in a granular manner. + +Understand the CometChat UI Kit component model so you can choose the right building blocks for your chat experience. + +## When to use this +- You need to decide between Base Components and Components. +- You want to understand how actions and events affect component behavior. +- You want to know how configurations apply within composite UI flows. +- You are planning a UI Kit implementation and need the conceptual model first. + +## Prerequisites +- No additional setup is required for this conceptual overview. + +## Quick start +1. Read the definitions of Base Components and Components. +2. Decide which component type fits your screen requirements. +3. Review Actions to understand built-in vs custom behavior. +4. Review Events to understand how components communicate. +5. Review Configurations to understand per-component customization in composite UIs. + +## Core concepts +- **Base Components**: Visual building blocks that render UI without business logic. +- **Components**: UI elements that include business logic such as data loading and user actions. +- **Actions**: Behavior hooks that drive how a component responds to events. +- **Events**: Emitted signals that allow other parts of the app to react. +- **Configurations**: Per-component settings within composite screens. + +## Implementation + +### Choose between Base Components and Components +What you're changing: The type of UI Kit building block you use for a screen. + +- **Where to change it**: Your screen design and component selection (no file change on this page). +- **Applies to**: Any UI Kit screen or flow you build. +- **Default behavior**: Base Components render UI only; Components include business logic and data handling. +- **Override**: Select the component type that matches your functional needs. +- **Code**: Not applicable for this overview. +- **Verify**: You can describe why a screen uses Base Components or Components. + +### Decide on action handling +What you're changing: How a component responds to user interaction. + +- **Where to change it**: Component action configuration in your implementation (not specified on this page). +- **Applies to**: Components and composite screens that expose actions. +- **Default behavior**: Predefined actions execute automatically in the component. +- **Override**: Implement user-defined actions when you need custom behavior. +- **Code**: Not applicable for this overview. +- **Verify**: You can identify which actions are predefined vs user-defined for your screen. + +### Use events for decoupled behavior +What you're changing: How UI Kit components communicate with the rest of your app. + +- **Where to change it**: Event handling in your implementation (not specified on this page). +- **Applies to**: Components and composite components that emit events. +- **Default behavior**: Events are emitted when user interaction or state changes occur. +- **Override**: Subscribe or react to events as needed for your flow. +- **Code**: Not applicable for this overview. +- **Verify**: You can map an event to the UI change it should trigger. + +### Plan component configurations in composite screens +What you're changing: Per-component configuration inside composite screens. + +- **Where to change it**: Component configuration in your composite screen setup (not specified on this page). +- **Applies to**: Composite screens that embed multiple UI Kit components. +- **Default behavior**: Each embedded component has its own configurable properties. +- **Override**: Adjust configurations to tailor each component's behavior and appearance. +- **Code**: Not applicable for this overview. +- **Verify**: You can list the components in a composite screen and the config each one needs. + +## Customization matrix +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Component type selection | Screen design and architecture | Not specified on this page | Not applicable for this overview | +| Predefined vs user-defined actions | Component action handling | Not specified on this page | Not applicable for this overview | +| Event handling strategy | Event listeners in your implementation | Not specified on this page | Not applicable for this overview | +| Per-component configuration in composites | Composite screen setup | Not specified on this page | Not applicable for this overview | + +## Common pitfalls and fixes +- Confusing Base Components with Components: Base Components render UI only; Components include business logic. +- Expecting Base Components to emit actions: Only Components and composite components expose actions. +- Ignoring events: Events are how components notify the rest of your app about state changes. +- Overlooking per-component configs in composites: Each embedded component has its own configuration. +- Treating configurations as global: Configurations are scoped to the component they belong to. + +## FAQ +**Q**: Are Base Components enough for a full chat experience? +**A**: No. Base Components are visual building blocks; Components add business logic and data handling. + +**Q**: Do all components expose actions? +**A**: Components and composite components do. Base Components do not. + +**Q**: How do components communicate with the rest of my app? +**A**: They emit events that other parts of the app can listen to and respond to. + +## Next steps +- [Conversations](/ui-kit/android/conversations) +- [Message list](/ui-kit/android/message-list) +- [Message composer](/ui-kit/android/message-composer) +- [Component styling](/ui-kit/android/component-styling) diff --git a/ui-kit/android/conversations.mdx b/ui-kit/android/conversations.mdx index ddf400633..2b89869ca 100644 --- a/ui-kit/android/conversations.mdx +++ b/ui-kit/android/conversations.mdx @@ -16,7 +16,7 @@ The Conversations is a [Component](/ui-kit/android/components-overview#component There are multiple ways in which you can use Conversations in your app. **Layout File**: To use Conversations in your \`layout\_activity.xml, use the following code snippet. -```xml layout_activity.xml +```xml layout_activity.xml lines -```java YourActivity.java +```java YourActivity.java lines @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); @@ -38,7 +38,7 @@ There are multiple ways in which you can use Conversations in your app. **Layout -```kotlin YourActivity.kt +```kotlin YourActivity.kt lines override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(CometChatConversations(this)) @@ -53,7 +53,7 @@ There are multiple ways in which you can use Conversations in your app. **Layout -```java YourFragment.java +```java YourFragment.java lines @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { @@ -64,7 +64,7 @@ There are multiple ways in which you can use Conversations in your app. **Layout -```kotlin YourFragment.kt +```kotlin YourFragment.kt lines override fun onCreateView(inflater: LayoutInflater,container: ViewGroup?,savedInstanceState: Bundle?): View { return CometChatConversations(requireContext()) } @@ -84,7 +84,7 @@ Function invoked when a conversation item is clicked, typically used to open a d -```java YourActivity.java +```java YourActivity.java lines cometchatConversations.setOnItemClick((view1, position, conversation) -> { }); @@ -93,7 +93,7 @@ cometchatConversations.setOnItemClick((view1, position, conversation) -> { -```kotlin YourActivity.kt +```kotlin YourActivity.kt lines cometchatConversations.onItemClick = OnItemClick { view, position, conversation -> } @@ -111,7 +111,7 @@ Function executed when a conversation item is long-pressed, allowing additional -```java YourActivity.java +```java YourActivity.java lines cometchatConversations.setOnItemLongClick((view1, position, conversation) -> { }); @@ -120,7 +120,7 @@ cometchatConversations.setOnItemLongClick((view1, position, conversation) -> { -```kotlin YourActivity.kt +```kotlin YourActivity.kt lines cometchatConversations.onItemLongClick = OnItemLongClick({ view, position, conversation -> }) @@ -138,7 +138,7 @@ cometchatConversations.onItemLongClick = OnItemLongClick({ view, position, conve -```java YourActivity.java +```java YourActivity.java lines cometchatConversations.setOnBackPressListener(() -> { }); @@ -147,7 +147,7 @@ cometchatConversations.setOnBackPressListener(() -> { -```kotlin YourActivity.kt +```kotlin YourActivity.kt lines cometchatConversations.onBackPressListener = OnBackPress { } @@ -165,7 +165,7 @@ cometchatConversations.onBackPressListener = OnBackPress { -```java YourActivity.java +```java YourActivity.java lines binding.cometchatConversations.setOnSearchClickListener(() -> { Log.i(TAG, "onViewCreated: Search Bar Clicked"); }); @@ -174,7 +174,7 @@ cometchatConversations.onBackPressListener = OnBackPress { -```kotlin YourActivity.kt +```kotlin YourActivity.kt lines binding.cometchatConversations.setOnSearchClickListener { Log.i(TAG, "onViewCreated: Search Bar Clicked") } @@ -192,7 +192,7 @@ Called when a item from the fetched list is selected, useful for multi-selection -```java YourActivity.java +```java YourActivity.java lines cometchatConversations.setOnSelect(t -> { }); @@ -201,7 +201,7 @@ cometchatConversations.setOnSelect(t -> { -```kotlin YourActivity.kt +```kotlin YourActivity.kt lines cometchatConversations.setOnSelect(object : OnSelection { override fun onSelection(t: MutableList?) { @@ -221,7 +221,7 @@ This action doesn't change the behavior of the component but rather listens for -```java YourActivity.java +```java YourActivity.java lines cometchatConversations.setOnError(cometchatException -> { }); @@ -230,7 +230,7 @@ cometchatConversations.setOnError(cometchatException -> { -```kotlin YourActivity.kt +```kotlin YourActivity.kt lines cometchatConversations.setOnError { } @@ -248,7 +248,7 @@ Invoked when the list is successfully fetched and loaded, helping track componen -```java YourActivity.java +```java YourActivity.java lines cometchatConversations.setOnLoad(list -> { }); @@ -257,7 +257,7 @@ cometchatConversations.setOnLoad(list -> { -```kotlin YourActivity.kt +```kotlin YourActivity.kt lines cometchatConversations.setOnLoad(object : OnLoad { override fun onLoad(list: MutableList?) { @@ -277,7 +277,7 @@ Called when the list is empty, enabling custom handling such as showing a placeh -```java YourActivity.java +```java YourActivity.java lines cometchatConversations.setOnEmpty(() -> { }); @@ -286,7 +286,7 @@ cometchatConversations.setOnEmpty(() -> { -```kotlin YourActivity.kt +```kotlin YourActivity.kt lines cometchatConversations.setOnEmpty{ } @@ -313,7 +313,7 @@ You can set filters using the following parameters. -```java YourActivity.java +```java YourActivity.java lines ConversationsRequest.ConversationsRequestBuilder builder = new ConversationsRequest.ConversationsRequestBuilder(); builder.setConversationType(CometChatConstants.CONVERSATION_TYPE_USER); builder.setLimit(50); @@ -324,7 +324,7 @@ cometChatConversations.setConversationsRequestBuilder(builder); -```kotlin +```kotlin lines val builder = ConversationsRequest.ConversationsRequestBuilder() builder.setConversationType(CometChatConstants.CONVERSATION_TYPE_USER) builder.setLimit(50) @@ -348,7 +348,7 @@ This event will be emitted when the user deletes a conversation -```ruby Add Listener +```ruby Add Listener lines CometChatConversationEvents.addListener("YOUR_LISTENER_TAG", new CometChatConversationEvents() { @Override public void ccConversationDeleted(Conversation conversation) { @@ -366,7 +366,7 @@ CometChatConversationEvents.removeListener("YOUR_LISTENER_TAG"); -```ruby Add Listener +```ruby Add Listener lines CometChatConversationEvents.addListener("LISTENER_TAG", object : CometChatConversationEvents() { override fun ccConversationDeleted(conversation: Conversation) { super.ccConversationDeleted(conversation) @@ -400,7 +400,7 @@ You can set the styling object to the `CometChatConversations` Component to cust -```xml themes.xml +```xml themes.xml lines -``` - -```html - - -``` -**Customizing Outgoing Message Bubble** - - - - - -```html - + -``` -```html - + ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_bubble.xml). +**Attribute references:** +- [Message bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_bubble.xml) +- [Incoming message bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_incoming_message_bubble.xml) +- [Outgoing message bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_outgoing_message_bubble.xml) -### Text Bubble -Text bubbles display plain text messages. These are the most common bubble type in a chat interface. +## Core Message Bubbles + +The following sections define how to style specific types of messages. Define the custom style, then link it to the central hubs (`CustomIncomingMessageBubbleStyle` or `CustomOutgoingMessageBubbleStyle`) established above. -**Default** +### Text Bubble +Text bubbles display plain text messages. These are the most common bubble type. +**Default & Customization** - -**Customization** - -**Customizing Incoming Bubble** - -```xml themes.xml - +```xml themes.xml lines + + -``` - -```xml themes.xml - -``` - -**Customizing Outgoing Bubble** - -```html - - + ``` +**Attribute reference:** +- [Text bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_text_bubble.xml) -```html - - -``` - -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_text_bubble.xml). ### Link Preview Bubble +Displays a preview of links shared in messages, enriching the experience with titles, descriptions, and images. -The Link Preview Bubble is designed to display a preview of links shared in messages. It enriches the messaging experience by showing details such as the page title, description, and an image from the linked content, making links more engaging and informative. - -**Default** - +**Default & Customization** - -**Customization** - -**Customizing Incoming Bubble** - -```html - +```xml themes.xml lines + - -``` - -```html - - -``` - -**Customizing Outgoing Bubble** - -```html - - - - -``` - -```html - - ``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_text_bubble.xml). ### Image Bubble - Image bubbles display images shared within a conversation. -**Default** - +**Default & Customization** - -**Customization** - -**Customizing Incoming Bubble** - -```html - +```xml themes.xml lines + @@ -221,19 +140,8 @@ Image bubbles display images shared within a conversation. -``` - -```html - - -``` - -**Customizing Outgoing Bubble** -```html - + @@ -242,32 +150,20 @@ Image bubbles display images shared within a conversation. @style/CustomOutgoingImageBubbleStyle ``` +**Attribute reference:** +- [Image bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_image_bubble.xml) -```html - - -``` - -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_image_bubble.xml). ### Video Bubble - Video bubbles display video messages or clips in a chat. -**Default** - **Customization** - -**Customizing Incoming Bubble** - -```html - +```xml themes.xml lines + -``` - -```html - - -``` - -**Customizing Outgoing Bubble** -```html - + ``` +**Attribute reference:** +- [Video bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_video_bubble.xml) -```html - - -``` - -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_video_bubble.xml). ### Audio Bubble - Audio bubbles represent audio messages or voice recordings. -**Default** - +**Default & Customization** - -**Customization** - -**Customizing Incoming Bubble** - -```html - +```xml themes.xml lines + -``` - -```html - - -``` - -**Customizing Outgoing Bubble** -```html - + ``` +**Attribute reference:** +- [Audio bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_audio_bubble.xml) -```html - - -``` - -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_audio_bubble.xml). ### File Bubble +Displays shared files, such as documents, PDFs, or spreadsheets. -File bubbles are used to display shared files, such as documents, PDFs, or spreadsheets. - -**Default** - +**Default & Customization** - -**Customization** - -**Customizing Incoming Bubble** - -```html - +```xml themes.xml lines + -``` - -```html - - -``` -**Customizing Outgoing Bubble** - -```html - + @@ -420,36 +257,23 @@ File bubbles are used to display shared files, such as documents, PDFs, or sprea @style/CustomOutgoingFileBubbleStyle ``` +**Attribute reference:** +- [File bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_file_bubble.xml) -```html - - -``` - -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_file_bubble.xml). ### Sticker Bubble +Displays visual stickers shared in a conversation. -Sticker bubbles display stickers shared in a conversation, enhancing visual expression. - -**Default** - +**Default & Customization** - -**Customization** - -**Customizing Incoming Bubble** - -```html - +```xml themes.xml lines + @@ -457,19 +281,8 @@ Sticker bubbles display stickers shared in a conversation, enhancing visual expr -``` - -```html - - -``` -**Customizing Outgoing Bubble** - -```html - + @@ -478,36 +291,23 @@ Sticker bubbles display stickers shared in a conversation, enhancing visual expr @style/CustomOutgoingStickerBubbleStyle ``` +**Attribute reference:** +- [Sticker bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_sticker_bubble.xml) -```html - - -``` - -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_sticker_bubble.xml). ### Poll Bubble +Displays polls, options, and live results. -Poll bubbles represent polls shared within the chat, showing options and results. - -**Default** - +**Default & Customization** - -**Customization** - -**Customizing Incoming Bubble** - -```html - +```xml themes.xml lines + @@ -515,19 +315,8 @@ Poll bubbles represent polls shared within the chat, showing options and results -``` - -```html - - -``` -**Customizing Outgoing Bubble** - -```html - + ``` +**Attribute reference:** +- [Poll bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_poll_bubble.xml) -```html - - -``` - -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_poll_bubble.xml). ### Collaborative Bubble +Displays collaborative content, such as shared documents or tasks. -Collaborative bubbles display collaborative content, such as shared documents or tasks. - -**Default** - +**Default & Customization** - -**Customization** - -**Customizing Incoming Bubble** - -```html - +```xml themes.xml lines + @@ -574,19 +350,8 @@ Collaborative bubbles display collaborative content, such as shared documents or -``` - -```html - - -``` -**Customizing Outgoing Bubble** - -```html - + ``` +**Attribute reference:** +- [Collaborative bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_collaborative_bubble.xml) -```html - - -``` - -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_collaborative_bubble.xml). ### Meet Call Bubble +Displays call-related actions and statuses in the chat interface. -Meet call bubbles display call-related actions and statuses in the chat interface. - -**Default** - +**Default & Customization** - -**Customization** - -**Customizing Incoming Bubble** - -```html - +```xml themes.xml lines + -``` -```html - - -``` - -**Customizing Outgoing Bubble** - -```html - + ``` +**Attribute reference:** +- [Meet call bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_meet_call_bubble.xml) -```html - - -``` - -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_meet_call_bubble.xml). ### Delete Bubble +Indicates a message that has been removed by the sender. -Delete bubbles are used to display messages that have been deleted by the sender. These indicate the message removal within the chat interface. - -**Default** - +**Default & Customization** - -**Customization** - -**Customizing Incoming Bubble** - -```html - +```xml themes.xml lines + @@ -694,57 +422,37 @@ Delete bubbles are used to display messages that have been deleted by the sender -``` -```html - - -``` - -**Customizing Outgoing Bubble** - -```html - + ``` +**Attribute reference:** +- [Delete bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_delete_bubble.xml) -```html - - -``` - -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_delete_bubble.xml). -### Call Action Bubble +## List-Level Bubbles & Special Features -Call action bubbles display call-related actions, such as missed calls, in the chat interface. +Unlike standard messages, **Call Action** and **Action** bubbles are tied to the **Message List Style**, not the Incoming/Outgoing Hubs. AI Assistants and Quoted Replies have specialized formatting. -**Default** +### Call Action Bubble +Displays call actions like missed calls within the message list. +**Default & Customization** - -**Customization** - -**Customizing Bubble** - -```html - +```xml themes.xml lines + + -``` -```html - + ``` +**Attribute references:** +- [Call action bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_call_action_bubble.xml) +- [Message list attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_list.xml) -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_call_action_bubble.xml). ### Action Bubble +Displays global group actions (e.g., "User joined the chat"). -Action bubbles provide a customizable interface for displaying a variety of actions, such as group actions, within a chat. - -**Default** - +**Default & Customization** - -**Customization** - -**Customizing Bubble** - -```html - +```xml themes.xml lines + + -``` -```html - + ``` +**Attribute reference:** +- [Action bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_action_bubble.xml) -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_action_bubble.xml). ### AI Assistant Bubble +Styles interactions generated by the AI assistant. These are anchored to the `IncomingMessageBubbleStyle`. -AI Assistant bubbles display messages and interactions from an AI assistant within the chat interface. - -**Default** - +**Default & Customization** - -**Customization** - -**Customizing Bubble** - -```html - - - - - - +```xml themes.xml lines + + - -``` + + -```html - - ``` +**Attribute reference:** +- [AI assistant bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_ai_assistant_bubble.xml) -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_action_bubble.xml). ### Quoted Reply +Styles the preview block when a user replies to a specific message. -```xml themes.xml - - - - - - - - - - - -``` +```xml themes.xml lines + + -```xml themes.xml - -``` -To know more such attributes, visit the [attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_preview.xml). \ No newline at end of file + + + + + + + + +``` +**Attribute reference:** +- [Message preview attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_message_preview.xml) diff --git a/ui-kit/android/message-composer.mdx b/ui-kit/android/message-composer.mdx index ca7e8ae2e..0aeaee021 100644 --- a/ui-kit/android/message-composer.mdx +++ b/ui-kit/android/message-composer.mdx @@ -18,7 +18,7 @@ Features such as **Live Reaction**, **Attachments**, and **Message Editing** are The following code snippet illustrates how you can directly incorporate the MessageComposer component into your `layout.xml` file. -```python +```python lines -```java +```java lines messageComposer.setOnSendButtonClick(new CometChatMessageComposer.SendButtonClick() { @Override public void onClick(Context context, BaseMessage baseMessage) { @@ -53,7 +53,7 @@ The `OnSendButtonClick` event gets activated when the send message button is cli -```kotlin +```kotlin lines messageComposer.setOnSendButtonClick(object : CometChatMessageComposer.SendButtonClick { override fun onClick(context: Context, baseMessage: BaseMessage) { Toast.makeText(context, "OnSendButtonClicked ..", Toast.LENGTH_SHORT).show() @@ -71,7 +71,7 @@ This action doesn't change the behavior of the component but rather listens for -```java YourActivity.java +```java YourActivity.java lines messageComposer.setOnError(new OnError() { @Override public void onError(Context context, CometChatException e) { @@ -83,7 +83,7 @@ messageComposer.setOnError(new OnError() { -```kotlin YourActivity.kt +```kotlin YourActivity.kt lines messageComposer.setOnError(object : OnError { override fun onError(context: Context, e: CometChatException) { // Your Exception Handling code. @@ -101,7 +101,7 @@ Function triggered whenever the message input's text value changes, enabling dyn -```java YourActivity.java +```java YourActivity.java lines messageComposer.setOnTextChangedListener(new CometChatTextWatcher() { @Override public void onTextChanged(CharSequence charSequence, int start, int before, int count) { @@ -123,7 +123,7 @@ messageComposer.setOnTextChangedListener(new CometChatTextWatcher() { -```kotlin YourActivity.kt +```kotlin YourActivity.kt lines messageComposer.setOnTextChangedListener(object : CometChatTextWatcher() { override fun onTextChanged(charSequence: CharSequence, start: Int, before: Int, count: Int) { } @@ -168,7 +168,7 @@ Using Style you can customize the look and feel of the component in your app, Th -```html +```html lines ``` -```html +```html lines @@ -368,14 +368,14 @@ Using Style you can customize the look and feel of the component in your app, Th -```java +```java lines cometChatMessageList.setStyle(R.style.CustomCometChatMessageListStyle); ``` -```kotlin +```kotlin lines cometChatMessageList.setStyle(R.style.CustomCometChatMessageListStyle); ``` @@ -391,7 +391,7 @@ These are a set of small functional customizations that allow you to fine-tune t -```java +```java lines CometChatMessageList cometChatMessageList = findViewById(R.id.message_list); cometChatMessageList.setUser(user); cometChatMessageList.hideError(true); @@ -401,7 +401,7 @@ cometChatMessageList.hideReceipt(true); -```kotlin +```kotlin lines val cometChatMessageList = findViewById(R.id.message_list) cometChatMessageList.setUser(user) cometChatMessageList.hideError(true) @@ -473,7 +473,7 @@ Sets custom localization for flag reasons in the flag message popup. -```java +```java lines HashMap localizationMap = new HashMap<>(); localizationMap.put("suicidal", R.string.suicidal); binding.messageList.setFlagReasonLocalization(localizationMap); @@ -482,7 +482,7 @@ Sets custom localization for flag reasons in the flag message popup. -```kotlin +```kotlin lines val localizationMap = HashMap() localizationMap["suicidal"] = R.string.suicidal binding.messageList.setFlagReasonLocalization(localizationMap) @@ -506,14 +506,14 @@ Use Cases: -```java +```java lines messageList.setDateFormat(new SimpleDateFormat("MMM dd, yyyy",Locale.getDefault())); ``` -```kotlin +```kotlin lines messageList.setDateFormat(SimpleDateFormat("MMM dd, yyyy",Locale.getDefault())) ``` @@ -547,7 +547,7 @@ Each method in the interface corresponds to a specific case: -```java +```java lines import java.text.SimpleDateFormat; import java.util.Date; import java.util.Locale; @@ -598,7 +598,7 @@ cometchatMessageList.setDateTimeFormatter(new DateTimeFormatterCallback() { -```kotlin +```kotlin lines import java.text.SimpleDateFormat import java.util.* @@ -655,14 +655,14 @@ Use Cases: -```java +```java lines messageList.setTimeFormat(new SimpleDateFormat("hh:mm a",Locale.getDefault())); ``` -```kotlin +```kotlin lines messageList.setTimeFormat(SimpleDateFormat("hh:mm a",Locale.getDefault())) ``` @@ -682,14 +682,14 @@ Use Cases: -```java +```java lines messageList.setNewMessageIndicatorView(customView); ``` -```kotlin +```kotlin lines messageList.setNewMessageIndicatorView(customView) ``` @@ -710,14 +710,14 @@ Use Cases: -```java +```java lines cometchatMessageList.setLoadingView(R.layout.your_loading_view); ``` -```kotlin +```kotlin lines cometchatMessageList.loadingView = R.layout.your_loading_view ``` @@ -737,14 +737,14 @@ Use Cases: -```java +```java lines cometchatMessageList.setEmptyView(R.layout.your_empty_view); ``` -```kotlin +```kotlin lines cometchatMessageList.emptyView = R.layout.your_empty_view ``` @@ -765,14 +765,14 @@ Use Cases: -```java +```java lines cometchatMessageList.setErrorView(R.layout.your_empty_view); ``` -```kotlin +```kotlin lines cometchatMessageList.errorView = R.layout.your_error_view ``` @@ -793,14 +793,14 @@ Use Cases: -```java +```java lines cometchatMessageList.setAIAssistantEmptyChatGreetingView(R.layout.ai_assistant_empty_view); ``` -```kotlin +```kotlin lines cometchatMessageList.setAIAssistantEmptyChatGreetingView(R.layout.ai_assistant_empty_view) ``` @@ -821,7 +821,7 @@ Use Cases: -```java +```java lines List aiSuggestedMessages = new ArrayList<>(); aiSuggestedMessages.add("How can I help you today?"); aiSuggestedMessages.add("Tell me more about your issue."); @@ -834,7 +834,7 @@ cometchatMessageList.setAIAssistantSuggestedMessages(aiSuggestedMessages); -```kotlin +```kotlin lines val aiSuggestedMessages = mutableListOf() aiSuggestedMessages.add("How can I help you today?") aiSuggestedMessages.add("Tell me more about your issue.") @@ -862,7 +862,7 @@ Use Cases: -```java +```java lines HashMap toolCallListenerMap = new HashMap<>(); toolCallListenerMap.put("toolName", new ToolCallListener() { @Override @@ -878,7 +878,7 @@ cometchatMessageList.setAiAssistantTools(toolCallListenerMap); -```kotlin +```kotlin lines val toolCallListenerMap = HashMap() toolCallListenerMap["toolName"] = ToolCallListener { args -> cometchatMessageList.setStyle(R.style.CustomCometChatMessageListStyle) @@ -905,14 +905,14 @@ Use Cases: -```java +```java lines cometchatMessageList.setStreamingSpeed(100); ``` -```kotlin +```kotlin lines cometchatMessageList.setStreamingSpeed(100) ``` @@ -930,7 +930,7 @@ Assigns the list of text formatters. If the provided list is not null, it sets t -```xml themes.xml +```xml themes.xml lines + +``` -Theming in CometChat allows you to create visually consistent and customizable user interfaces that align with your application's branding. With the `CometChatTheme.DayNight` style which is built on `Theme.MaterialComponents.DayNight.NoActionBar` and acts as a global theme applied across all components, you can seamlessly integrate light and dark modes, define custom colors, typography, and component-specific styles, and enhance user experience across all CometChat components. +- **What this does**: Creates an app theme that inherits all UI Kit styling. +- **Verify**: UI Kit screens render correctly after the theme is applied. -## Using Theming in Your Project +### Apply the theme to your application +What you're changing: The theme applied to the entire app. -Set the `CometChatTheme.DayNight` as the parent theme for your application in the `themes.xml` file. You can extend it with your custom theme as needed: +- **Where to change it**: `AndroidManifest.xml`. -```html - - -``` +- **Applies to**: All activities unless overridden. -In your AndroidManifest.xml file, set the theme for your application or activity: +- **Default behavior**: The application theme is not set to your UI Kit theme. -```html - +- **Override**: Set `android:theme` on the `` element. + +- **Code**: + +```xml AndroidManifest.xml lines - + android:name=".YourApplication" + android:theme="@style/AppTheme" + ...> + ``` -If you need to apply specific styles to a particular activity, override the theme as follows: +- **What this does**: Applies `AppTheme` to every activity by default. + +- **Verify**: Launch any UI Kit screen and confirm the theme is applied. + + + + + +### Apply a theme to a specific activity +What you're changing: The theme for a single activity. + +- **Where to change it**: `AndroidManifest.xml`. -```html - +- **Applies to**: Only the targeted activity. + +- **Default behavior**: Activities inherit the application theme. + +- **Override**: Set `android:theme` on the `` element. + +- **Code**: + +```xml AndroidManifest.xml lines - + android:theme="@style/AppTheme" + ...> - - + ``` - - - +- **What this does**: Applies `ChatTheme` only to `ChatActivity`. -## Customization +- **Verify**: Open `ChatActivity` and confirm the theme differs from the rest of the app. -To customize the primary color in your app, you can override the cometchatPrimaryColor attribute in your theme. Here's how: +### Change the primary color +What you're changing: The primary brand color used across UI Kit. -```html - - ``` -To know more such attributes, visit the [theme attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_theme.xml). +- **What this does**: Replaces the UI Kit primary color with your brand color. + +- **Verify**: Buttons and highlights use the new color. + +### Customize common theme attributes +What you're changing: Background, text, and stroke colors. + +- **Where to change it**: `app/src/main/res/values/themes.xml`. + +- **Applies to**: All UI Kit components that use these attributes. + +- **Default behavior**: UI Kit uses its default theme values. + +- **Override**: Define the attributes in your app theme. + +- **Code**: + +```xml themes.xml lines + +``` + +- **What this does**: Updates common UI Kit colors in one place. + +- **Verify**: Backgrounds, text, and dividers reflect the new values. + +### Add dark mode overrides +What you're changing: Theme values used in dark mode. + +- **Where to change it**: `app/src/main/res/values-night/themes.xml`. + +- **Applies to**: Dark mode only. + +- **Default behavior**: Dark mode uses the same values as light mode. + +- **Override**: Create `values-night/themes.xml` and override the attributes. + +- **Code**: + +```xml values-night/themes.xml lines + + + +``` + +- **What this does**: Applies dark mode colors when the system uses night mode. + +- **Verify**: Toggle dark mode on the device and confirm UI Kit colors update. + + +For a complete list of theme attributes, visit the [theme attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_theme.xml) on GitHub. + + +## Customization matrix +| What you want to change | Where | Property/API | Example | +| --- | --- | --- | --- | +| Base UI Kit theme | `app/src/main/res/values/themes.xml` | `parent="CometChatTheme.DayNight"` | `