Customizable views on Android

Customize the UI components in your app

Every Viafoura widget hands its individual subviews to your app before it draws them, so
you can restyle or hide any element listed here. This page is the complete list for
Android, generated from VFCustomViewType.

Set the callback on any widget's fragment, then check the type you care about. The callback
also receives the current VFTheme, so you can style light and dark mode differently.

fragment.setCustomUICallback(this);

@Override
public void customizeView(VFTheme theme, VFCustomViewType customViewType, View view) {
    if (customViewType == VFCustomViewType.commentCellUserText) {
        ((TextView) view).setAllCaps(true);
    }
}

The callback always hands you a plain View, so cast to TextView, ImageView or the
widget you expect for that entry.


Comments preview (Live Comments)

The comments widget embedded on an article — header, write prompt, comment list and footer.

VFCustomViewTypeDescription
previewEmptyCommentsViewEmpty state shown when the conversation has no comments yet.
previewTitleTextWidget title above the comment list.
previewCounterTextComment count shown next to the title.
previewSkeletonViewLoading skeleton shown before the comments arrive.
previewNewCommentViewContainer around the write-a-comment prompt row.
previewPoweredBy"Powered by Viafoura" badge.
previewAllCommentsContainer holding all rendered comment cells.
previewSortImageIcon of the sort control.
previewUserImageSigned-in reader's avatar photo in the write prompt.
previewUserAvatarInitials avatar used in the write prompt when the reader has no photo.
previewUserPromptTextInvitation text shown to logged-out readers.
previewLoginText"Log in" link in the logged-out invitation.
previewAuthOrTextSeparator word between the log in and sign up links.
previewSignupText"Sign up" link in the logged-out invitation.
previewSortTextCurrent sort name on the sort control.
previewCommentPromptTappable write-a-comment prompt card.
previewPrivacyTextPrivacy and terms line under the composer prompt.
previewBackgroundViewRoot background of the comments preview widget.
previewFollowViewFollow-conversation control in the header.
previewHeaderViewHeader row holding the title, sort control and bell.
previewNotificationBellViewNotification bell in the header.
previewNewCommentsViewContainer of the realtime new-comments pill.
previewNewCommentsViewTextLabel inside the realtime new-comments pill.
previewUserSomeoneWritingLabel"Someone is writing" typing indicator.
previewNewCommentsNotificationViewPill announcing comments that arrived in realtime.
previewSeeMoreCommentsButtonButton at the bottom that opens the full conversation.
previewCommentsBottomSeparatorSeparator under the last comment cell.

Comment cell

One comment row, used by the comments preview and the full conversation.

VFCustomViewTypeDescription
commentCellDislikeImageDislike icon.
commentCellDislikeTextDislike count.
commentCellLikeImageLike icon.
commentCellLikeTextLike count.
commentCellUserImageComment author's avatar photo.
commentCellUserAvatarInitials avatar used when the author has no photo.
commentCellDateTextRelative timestamp of the comment.
commentCellOptionsImageOverflow icon that opens the comment options sheet.
commentCellUserTextAuthor display name.
commentCellReplyImageReply icon.
commentCellFollowViewFollow-author control inside the cell.
commentCellCommentTextThe comment body text.
commentCellReplyTextReply action label.
commentCellCustomBadgeViewCustom badge configured for the user.
commentCellPinnedView"Pinned" marker.
commentCellEditorPickView"Editor's pick" marker.
commentCellTrustedView"Trusted" badge.
commentCellAuthorView"Author" badge for the article's author.
commentCellModeratorView"Moderator" badge.
commentCellUserIndicatorHolderContainer behind the avatar badge image.
commentCellUserIndicatorImageSmall badge image overlaid on the author avatar.
commentCellAwaitingModerationViewBanner shown while the comment awaits moderation.
commentCellUrlPreviewContainerLink preview card attached to the comment.
commentCellUrlPreviewTitleTitle inside the link preview card.
commentCellUrlPreviewDescriptionDescription inside the link preview card.
commentCellUrlPreviewSiteNameSite name inside the link preview card.
writeReplyUserAvatarInitials avatar in the inline reply row under a comment.
writeReplyUserImageReader's avatar photo in the inline reply row under a comment.
commentCellExpandRepliesLabel"Show replies" label under a comment.
commentCellExpandRepliesImageChevron next to the show-replies label.
commentCellExpandRepliesLoadingSpinner shown while replies load.

Comment composer

The new comment, reply and edit screen.

VFCustomViewTypeDescription
postButtonSubmit button that posts the comment.
postEditTextThe comment text input.
postBackgroundViewRoot background of the composer screen.
postHeaderDescriptionHeader line describing the action (comment, reply or edit).
postMetadataTitleArticle title in the composer's metadata card.
postMetadataImageArticle thumbnail in the composer's metadata card.
postReplyToUserAvatarInitials avatar of the user being replied to.
postReplyToUserImageAvatar photo of the user being replied to.
postUserAvatarInitials avatar in the composer when the reader has no photo.
postUserImageReader's avatar photo in the composer.
postMetadataDescriptionArticle description in the composer's metadata card.

Profile

The reader's own profile and other readers' profiles.

VFCustomViewTypeDescription
profileNameTextProfile display name.
profileCommunityTabText"Community" tab label.
profileCommunityTabViewCommunity tab container.
profileMainTabText"Profile" tab label.
profileFeedTabText"Feed" tab label.
profileLogoutTextLog out action.
profileLikesTextLikes counter.
profileFollowersTextFollowers counter.
profileActivityTextActivity counter.
profileCommentsTextComments counter.
profileUserImageProfile avatar photo.
profileUserAvatarInitials avatar when the user has no photo.
profileBackgroundViewRoot background of the profile screen.
profileFollowViewFollow control on another reader's profile.
profileMuteViewMute control on another reader's profile.
profileNotificationSettingsImageNotification settings icon in the profile header.

Activity feed and user lists

Rows inside the profile's feed tab and the followers/following lists.

VFCustomViewTypeDescription
userCommentDescLabelLine describing the activity in a profile feed row.
userCommentOriginalImageThumbnail of the article the feed row's comment belongs to.
userCommentOriginalTitleTitle of the article the feed row's comment belongs to.
userCommentContentLabelThe comment text in a profile feed row.
userCommentSeparatorDivider between profile feed rows.
userCommentDateLabelTimestamp of a profile feed row.
userCellImageAvatar photo in a followers or following row.
userCellAvatarViewInitials avatar in a followers or following row.
userCellNameLabelDisplay name in a user list row.
userCellActionDateLabelAction and date line in a user list row.
userCellBadgeLabelBadge text in a user list row.
userCellBadgeViewBadge container in a user list row.
userCellSeparatorDivider between user list rows.
userCellFollowViewFollow control in a user list row.
userCellMuteViewMute control in a user list row.

Engagement Starter

The engagement starter widget.

VFCustomViewTypeDescription
conversationStarterBackgroundViewRoot background of the engagement starter.
conversationStarterHeaderLabelSmall header line above the title.
conversationStarterTitleLabelTitle of the default variant.
conversationStarterDescriptionLabelDescription of the default variant.
conversationStarterFeaturedCommentLabelText of the featured comment in the editor's pick variant.
conversationStarterActionButtonCall-to-action button.

Live Chat

The live chat widget and its message rows.

VFCustomViewTypeDescription
chatPostButtonSend control next to the message input.
chatPostImageSend icon.
chatPostLoadingSpinner shown while a message is sending.
chatEditTextMessage input.
chatLoadingSpinner for the initial message load.
chatEmptyViewEmpty state shown when the chat has no messages.
chatCellContentLabelMessage text.
chatCellDateLabelMessage timestamp.
chatCellUserNameLabelMessage author name.

Live Questions

The live questions widget, its question rows, composer and hosts list.

VFCustomViewTypeDescription
liveQuestionCellUserAvatarInitials avatar of the question's author.
liveQuestionCellUserImageAvatar photo of the question's author.
liveQuestionCellUserNameLabelQuestion author's display name.
liveQuestionCellDateLabelQuestion timestamp.
liveQuestionCellContentLabelQuestion text.
liveQuestionCellLikeButtonLike control on a question.
liveQuestionCellLikeLabelLike count on a question.
liveQuestionCellDislikeButtonDislike control on a question.
liveQuestionCellDislikeLabelDislike count on a question.
liveQuestionCellReplyButtonReply control on a question.
liveQuestionCellOptionsButtonOverflow control on a question.
liveQuestionCellReplyingToLabel"Replying to" line shown on a reply.
liveQuestionCellPinnedViewPinned marker on a question.
liveQuestionCellHostPillView"Host" pill on questions and answers from a host.
liveQuestionCellSeparatorDivider between question rows.
liveQuestionCellAnnouncementLabelText of an announcement row.
liveQuestionCellAnnouncementIconIcon of an announcement row.
liveQuestionCellAnnouncementBackgroundBackground of an announcement row.
liveQuestionCellAnswerLabelText of a host's answer block.
liveQuestionCellAnswerIconIcon of a host's answer block.
liveQuestionCellAnswerBackgroundBackground of a host's answer block.
liveQuestionsHostCellNameLabelHost name in the hosts list.
liveQuestionsHostCellBadgeLabelHost badge text in the hosts list.
liveQuestionsHostCellContainerViewContainer of a hosts list row.
liveQuestionComposerUserAvatarReader's initials avatar in the ask-a-question pill.
liveQuestionComposerUserImageReader's avatar photo in the ask-a-question pill.
liveQuestionComposerHintLabelHint text inside the ask-a-question pill.
liveQuestionComposerPillViewTappable ask-a-question pill.
liveQuestionTitleLabelWidget title.
liveQuestionPoweredByView"Powered by Viafoura" badge.
liveQuestionBackgroundViewRoot background of the live questions widget.
liveQuestionStatusChipViewStatus chip showing whether the session is live or closed.
liveQuestionStatusDotViewDot inside the status chip.
liveQuestionStatusLabelText inside the status chip.

Trending

The vertical trending list and the trending carousel.

VFCustomViewTypeDescription
trendingCarouselTitleArticle title on a trending carousel card.
trendingCarouselImageArticle thumbnail on a trending carousel card.
trendingCarouselCountComment count on a trending carousel card.
trendingCarouselBackgroundBackground of a trending carousel card.
trendingVerticalBackgroundRoot background of the vertical trending list.
trendingVerticalTitleLabelSection title of the vertical trending list.
trendingVerticalFullImageArticle thumbnail in a full-size trending row.
trendingVerticalFullTitleArticle title in a full-size trending row.
trendingVerticalFullCountComment count in a full-size trending row.
trendingVerticalFullImageIconIcon overlaid on the full-size row's thumbnail.
trendingVerticalViewMoreButton"View more" button under the trending list.

Notifications

The notification bell and the notification list rows.

VFCustomViewTypeDescription
notificationBellIconBell icon of the standalone notification bell.
notificationBellTextUnread counter next to the bell.
notificationBellTextHolderContainer behind the unread counter.
notificationContentImageActor photo or content thumbnail in a notification row.
notificationAvatarViewActor's initials avatar in a notification row.
notificationRemoveImageDismiss control on a notification row.
notificationTrendingCountImageComment-count icon on a trending notification row.
notificationTrendingImageArticle thumbnail on a trending notification row.
notificationTrendingIconTrending icon on a trending notification row.
notificationTodayGroupTitleLabel"Today" notification group header.
notificationYesterdayGroupTitleLabel"Yesterday" notification group header.
notificationOlderGroupTitleLabel"Older" notification group header.
notificationActiveGroupTitleLabel"Active" notification group header.
notificationContentTextNotification text.
notificationDateTextNotification timestamp.

Report flow

The report-a-comment sheet, step by step.

VFCustomViewTypeDescription
reportBackgroundViewRoot background of the report sheet.
reportStartDescriptionLabelExplanation on the first report step.
reportStartButtonPrimary button on the first report step.
reportStartCancelLabelCancel action on the first report step.
reportPickReasonLabel"Pick a reason" heading on the reason list.
reportReasonOptionLabelEach selectable reason row.
reportChosenTitleLabelTitle shown after a reason is chosen.
reportChosenDescriptionLabelDescription shown after a reason is chosen.
reportChosenCancelLabelCancel action after a reason is chosen.
reportThanksLabelConfirmation message once the report is sent.
reportThanksButtonDismiss button on the confirmation step.

Bottom sheets

The sort picker and the comment options sheet.

VFCustomViewTypeDescription
bottomPickerViewBackground of the bottom sheet used for sort and options.
bottomPickerTitleLabelTitle of the bottom sheet.
bottomPickerLabelLabel of an option row in the bottom sheet.
bottomPickerIconIcon next to an option row in the bottom sheet.

What’s Next

Did this page help you?