UI components customisation

Nabla Android Messaging UI components customisation

📘

This part is only about Messaging-specific theme attributes, make sure you followed the SDK theming guide for the theme setup.

Messaging specific theme overlay

You can override Messaging specific attributes by providing your own Nabla.ThemeOverlay.Messaging. Here's how it works:

<style name="Theme.Example.Blue" parent="Theme.Material3.Light.NoActionBar">
    <!-- Rest of your theme -->

    <item name="nablaMessagingThemeOverlay">@style/NablaOverlay.Example.Messaging</item>
</style>

<style name="NablaOverlay.Example.Messaging" parent="Nabla.ThemeOverlay.Messaging">
    <item name="nablaMessaging_sendMessageIconTint">@color/customColor</item>
</style>

Attributes list

Here are all the attributes you can customise:

Theme attributeDescriptionDefault value
nablaMessaging_conversationPreviewTitleAppearanceText Appearance for the title of a conversation in the list of conversations.?textAppearanceBodyLarge
nablaMessaging_conversationPreviewSubtitleAppearanceText Appearance for the subtitle of a conversation in the list of conversations.?textAppearanceBodyMedium
nablaMessaging_conversationPreviewTimeAppearanceText Appearance for the last message time in a conversation in the list of conversations.?textAppearanceLabelLarge
nablaMessaging_unreadMessagesIndicatorDrawableDrawable to be shown in the list of conversations if the conversation has unread messages. Can be an animated vector, expected to not exceed 8x8dp.@drawable/nabla_ic_unread_dot
nablaMessaging_conversationPreviewBackgroundDrawableDrawable to use as background of each item in the list of conversations. Default is a card filled with colorSurface.@drawable/nabla_conversation_preview_background
nablaMessaging_conversationPreviewBackgroundElevationElevation for nablaMessaging_conversationPreviewBackgroundDrawable.1dp
nablaMessaging_conversationHeaderTitleAppearanceText Appearance for the title in the conversation toolbar.?textAppearanceTitleMedium
nablaMessaging_conversationHeaderSubtitleAppearanceText Appearance for the subtitle in the conversation toolbar.?textAppearanceBodyMedium
nablaMessaging_conversationDateSeparatorAppearanceText Appearance for the date separator item in the conversation, e.g. "Today at 5:23".?textAppearanceLabelMedium
nablaMessaging_conversationPatientMessageAppearanceText Appearance for messages sent by the patient. Please note that the textColor used here will decide for the content color of all patient message types, e.g. color of the loader in an image message.@style/Nabla.TextAppearance.TextMessage.Patient
nablaMessaging_conversationProviderMessageAppearanceText Appearance for message sent by a provider. See nablaMessaging_conversationPatientMessageAppearance.@style/Nabla.TextAppearance.TextMessage.Provider
nablaMessaging_conversationOtherMessageAppearanceText Appearance for message sent by other types of users (other patients, system, etc). See nablaMessaging_conversationPatientMessageAppearance.@style/Nabla.TextAppearance.TextMessage.Other
nablaMessaging_conversationRepliedMessageAuthorAppearanceText Appearance for author of replied-to message preview. Any text color will be ignored in favor of patient/provider one.?textAppearanceTitleSmall
nablaMessaging_conversationRepliedMessageBodyAppearanceText Appearance for body of replied-to message preview. Any text color will be ignored in favor of patient/provider one.?textAppearanceBodyMedium
nablaMessaging_conversationDeletedMessageAppearanceText Appearance for deleted messages placeholder.?textAppearanceBodyLarge
nablaMessaging_conversationMessageAuthorAppearanceText Appearance for the author name shown on top of their messages.?textAppearanceBodyMedium
nablaMessaging_conversationMessageStatusAppearanceText Appearance for the status of a message, e.g. "Sending", shown below the concerned message.?textAppearanceBodyMedium
nablaMessaging_conversationActivityAppearanceText Appearance for the conversation activities, e.g. when a provider joins a conversation.?textAppearanceBodyMedium
nablaMessaging_patientMessageBackgroundColorBackground of the card containing a patient message. Should contrast with textColor of its corresponding Text Appearance.?colorPrimaryDark
nablaMessaging_providerMessageBackgroundColorBackground of the card containing a provider message. Should contrast with textColor of its corresponding Text Appearance.?colorSurface
nablaMessaging_otherMessageBackgroundColorBackground of the card containing a message from other types of users. Should contrast with textColor of its corresponding Text Appearance.?colorSurface
nablaMessaging_deletedMessageBackgroundColorBackground of the card used as placeholder for deleted messages. Should contrast with textColor of its corresponding Text Appearance.?colorSurface
nablaMessaging_sendMessageIconTintTint for the send button in the conversation's composer. Use a selector to handle different states: button is disabled if draft is blank.@color/nabla_conversation_send_message_selector
nablaMessaging_conversationComposerEditTextStyleStyle of the EditText used in a conversation's composer. Helpful to customize inputType, hint, maxHeight, textColor or textColorHint, etc.@style/Nabla.Widget.Messaging.ComposerEditTextStyle
nablaMessaging_conversationComposerBackgroundBackground drawable for the composer. Defaults to a colorSurface rectangle with rounded corners.@drawable/nabla_conversation_composer_background
nablaMessaging_sendMessageIconIcon drawable for the send message button. Drawable specified here will be tinted using nablaMessaging_sendMessageIconTint.@drawable/nabla_ic_send
nablaMessaging_addMediaIconIcon drawable for the button next the composer to add an attachment.@drawable/nabla_ic_add
nablaMessaging_recordVoiceMessageIconIcon drawable for the button next the composer to start recording a voice message.@drawable/nabla_ic_mic
nablaMessaging_cancelVoiceMessageIconIcon drawable for the button next the composer to stop recording a voice message.@drawable/nabla_ic_trash
nablaMessaging_mediaSourceCameraIconNew attachment popup: Icon drawable for taking a photo from the camera option. Colors will remain intact (no tinting).@drawable/nabla_ic_camera_photo
nablaMessaging_mediaSourceVideoIconNew attachment popup: Icon drawable for recording a video from the camera option. Colors will remain intact (no tinting).@drawable/nabla_ic_camera_video
nablaMessaging_mediaSourceGalleryIconNew attachment popup: Icon drawable for gallery option. Colors will remain intact (no tinting).@drawable/nabla_ic_photo
nablaMessaging_mediaSourceDocumentIconNew attachment popup: Icon drawable for document option. Colors will remain intact (no tinting).@drawable/nabla_ic_pick_file
nablaMessaging_mediaSourceDocumentScanIconNew attachment popup: Icon drawable for document scanning option. Colors will remain intact (no tinting).@drawable/nabla_ic_document_scan
nablaMessaging_conversationBackgroundColorBackground color for the timeline containing messages (all except the toolbar header).?android:colorBackground
nablaMessaging_conversationHeaderColorBackground color for the toolbar header of a conversation.?colorSurface
nablaMessaging_conversationListBackgroundColorBackground color for the list of conversations in InboxFragment.?android:colorBackground
nablaMessaging_conversationListHeaderStyleStyle of the toolbar header in InboxFragment.?toolbarSurfaceStyle
nablaMessaging_conversationListEmptyStateTextAppearanceText Appearance for the empty state of the conversation list.?textAppearanceBodyMedium
nablaMessaging_conversationMediaPickerTextAppearanceText Appearance for each option in the media picker (also called the new attachment popup).?textAppearanceBodyLarge
nablaMessaging_conversationMediaPickerIconBackgroundBackground drawable for icons of options in the media picker.@drawable/nabla_conversation_media_picker_icon_backgroun