Customize UI components

Many aspects of the UI components can be changed and customized. For example, it's possible to change:

  • Colors
  • Text appearances
  • Backgrounds of views
  • Icons

Use a Material3 theme

All Nabla UI components will inherit the theme you specify for their container, this is usually the Application or Activity’s theme.

📘

The theme should inherit from Theme.Material3.* by Material3 for Nabla UI components to behave correctly.

Customize colors, icons, backgrounds, and text appearances

Nabla UI components will, by default, use the provided Material3 theme attributes to give a coherent look with the rest of your app. Thus, you can rely on attributes like colorPrimary, colorSurface, colorError or textAppearanceBodyMedium to act as a central source of theming for both your app UI components and Nabla ones.

Yet, if you wish to override a specific color, icon, background drawable or text appearance you can use customization attributes. Override those you’re interested in within a style with Nabla.ThemeOverlay.Messaging as parent:


<style name="MyNablaOverlays" parent="Nabla.ThemeOverlay.Messaging">
    <item name="nablaMessaging_conversationPatientMessageAppearance">@style/MyTextAppearance</item>
    <item name="nablaMessaging_unreadMessagesIndicatorDrawable">@drawable/ic_my_custom_unread_indicator</item>
</style>

Then reference that style as nablaMessagingThemeOverlay in your Application/Activity theme:


<style name="MyAppTheme" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    ...

    <item name="nablaMessagingThemeOverlay">@style/MyNablaOverlays</item>
</style>

Here's the list of items you can customize:

Theme attributeDescriptionDefault value
nablaAvatarViewStyleStyle to customize how avatars are shown: rounded or rectangle shape, single or double letter placeholder.@style/Nabla.Widget.AvatarView
nablaRoundedCornersRadiusCorner radius used in many components like message's bubble shape or conversations list item background.12dp
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_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_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_conversationBackgroundColorBackground color to be used for the timeline containing messages (all except the toolbar header).?android:colorBackground
nablaMessaging_conversationHeaderColorBackground color for the toolbar header of a conversation.?colorSurface
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

Did this page help you?