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 attribute | Description | Default value |
---|---|---|
nablaMessaging_conversationPreviewTitleAppearance | Text Appearance for the title of a conversation in the list of conversations. | ?textAppearanceBodyLarge |
nablaMessaging_conversationPreviewSubtitleAppearance | Text Appearance for the subtitle of a conversation in the list of conversations. | ?textAppearanceBodyMedium |
nablaMessaging_conversationPreviewTimeAppearance | Text Appearance for the last message time in a conversation in the list of conversations. | ?textAppearanceLabelLarge |
nablaMessaging_unreadMessagesIndicatorDrawable | Drawable 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_conversationPreviewBackgroundDrawable | Drawable 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_conversationPreviewBackgroundElevation | Elevation for nablaMessaging_conversationPreviewBackgroundDrawable . | 1dp |
nablaMessaging_conversationHeaderTitleAppearance | Text Appearance for the title in the conversation toolbar. | ?textAppearanceTitleMedium |
nablaMessaging_conversationHeaderSubtitleAppearance | Text Appearance for the subtitle in the conversation toolbar. | ?textAppearanceBodyMedium |
nablaMessaging_conversationDateSeparatorAppearance | Text Appearance for the date separator item in the conversation, e.g. "Today at 5:23". | ?textAppearanceLabelMedium |
nablaMessaging_conversationPatientMessageAppearance | Text 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_conversationProviderMessageAppearance | Text Appearance for message sent by a provider. See nablaMessaging_conversationPatientMessageAppearance . | @style/Nabla.TextAppearance.TextMessage.Provider |
nablaMessaging_conversationOtherMessageAppearance | Text Appearance for message sent by other types of users (other patients, system, etc). See nablaMessaging_conversationPatientMessageAppearance . | @style/Nabla.TextAppearance.TextMessage.Other |
nablaMessaging_conversationRepliedMessageAuthorAppearance | Text Appearance for author of replied-to message preview. Any text color will be ignored in favor of patient/provider one. | ?textAppearanceTitleSmall |
nablaMessaging_conversationRepliedMessageBodyAppearance | Text Appearance for body of replied-to message preview. Any text color will be ignored in favor of patient/provider one. | ?textAppearanceBodyMedium |
nablaMessaging_conversationDeletedMessageAppearance | Text Appearance for deleted messages placeholder. | ?textAppearanceBodyLarge |
nablaMessaging_conversationMessageAuthorAppearance | Text Appearance for the author name shown on top of their messages. | ?textAppearanceBodyMedium |
nablaMessaging_conversationMessageStatusAppearance | Text Appearance for the status of a message, e.g. "Sending", shown below the concerned message. | ?textAppearanceBodyMedium |
nablaMessaging_conversationActivityAppearance | Text Appearance for the conversation activities, e.g. when a provider joins a conversation. | ?textAppearanceBodyMedium |
nablaMessaging_patientMessageBackgroundColor | Background of the card containing a patient message. Should contrast with textColor of its corresponding Text Appearance. | ?colorPrimary |
nablaMessaging_providerMessageBackgroundColor | Background of the card containing a provider message. Should contrast with textColor of its corresponding Text Appearance. | ?colorSurfaceVariant |
nablaMessaging_otherMessageBackgroundColor | Background of the card containing a message from other types of users. Should contrast with textColor of its corresponding Text Appearance. | ?colorSurfaceVariant |
nablaMessaging_deletedMessageBackgroundColor | Background of the card used as placeholder for deleted messages. Should contrast with textColor of its corresponding Text Appearance. | ?colorSurfaceVariant |
nablaMessaging_sendMessageIconTint | Tint 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_conversationComposerEditTextStyle | Style 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_conversationComposerBackground | Background drawable for the composer. Defaults to a colorSurface rectangle with rounded corners. | @drawable/nabla_conversation_composer_background |
nablaMessaging_sendMessageIcon | Icon drawable for the send message button. Drawable specified here will be tinted using nablaMessaging_sendMessageIconTint . | @drawable/nabla_ic_send |
nablaMessaging_addMediaIcon | Icon drawable for the button next the composer to add an attachment. | @drawable/nabla_ic_add |
nablaMessaging_recordVoiceMessageIcon | Icon drawable for the button next the composer to start recording a voice message. | @drawable/nabla_ic_mic |
nablaMessaging_cancelVoiceMessageIcon | Icon drawable for the button next the composer to stop recording a voice message. | @drawable/nabla_ic_trash |
nablaMessaging_mediaSourceCameraIcon | New attachment popup: Icon drawable for taking a photo from the camera option. Colors will remain intact (no tinting). | @drawable/nabla_ic_camera_photo |
nablaMessaging_mediaSourceVideoIcon | New attachment popup: Icon drawable for recording a video from the camera option. Colors will remain intact (no tinting). | @drawable/nabla_ic_camera_video |
nablaMessaging_mediaSourceGalleryIcon | New attachment popup: Icon drawable for gallery option. Colors will remain intact (no tinting). | @drawable/nabla_ic_photo |
nablaMessaging_mediaSourceDocumentIcon | New attachment popup: Icon drawable for document option. Colors will remain intact (no tinting). | @drawable/nabla_ic_pick_file |
nablaMessaging_mediaSourceDocumentScanIcon | New attachment popup: Icon drawable for document scanning option. Colors will remain intact (no tinting). | @drawable/nabla_ic_document_scan |
nablaMessaging_conversationBackgroundColor | Background color for the timeline containing messages (all except the toolbar header). | ?android:colorBackground |
nablaMessaging_conversationHeaderColor | Background color for the toolbar header of a conversation. | ?colorSurface |
nablaMessaging_conversationListBackgroundColor | Background color for the list of conversations in InboxFragment . | ?android:colorBackground |
nablaMessaging_conversationListHeaderStyle | Style of the toolbar header in InboxFragment . | ?toolbarSurfaceStyle |
nablaMessaging_conversationListEmptyStateTextAppearance | Text Appearance for the empty state of the conversation list. | ?textAppearanceBodyMedium |
nablaMessaging_conversationMediaPickerTextAppearance | Text Appearance for each option in the media picker (also called the new attachment popup). | ?textAppearanceBodyLarge |
nablaMessaging_conversationMediaPickerIconBackground | Background drawable for icons of options in the media picker. | @drawable/nabla_conversation_media_picker_icon_backgroun |
Updated 7 months ago