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.
VFCustomViewType | Description |
|---|---|
previewEmptyCommentsView | Empty state shown when the conversation has no comments yet. |
previewTitleText | Widget title above the comment list. |
previewCounterText | Comment count shown next to the title. |
previewSkeletonView | Loading skeleton shown before the comments arrive. |
previewNewCommentView | Container around the write-a-comment prompt row. |
previewPoweredBy | "Powered by Viafoura" badge. |
previewAllComments | Container holding all rendered comment cells. |
previewSortImage | Icon of the sort control. |
previewUserImage | Signed-in reader's avatar photo in the write prompt. |
previewUserAvatar | Initials avatar used in the write prompt when the reader has no photo. |
previewUserPromptText | Invitation text shown to logged-out readers. |
previewLoginText | "Log in" link in the logged-out invitation. |
previewAuthOrText | Separator word between the log in and sign up links. |
previewSignupText | "Sign up" link in the logged-out invitation. |
previewSortText | Current sort name on the sort control. |
previewCommentPrompt | Tappable write-a-comment prompt card. |
previewPrivacyText | Privacy and terms line under the composer prompt. |
previewBackgroundView | Root background of the comments preview widget. |
previewFollowView | Follow-conversation control in the header. |
previewHeaderView | Header row holding the title, sort control and bell. |
previewNotificationBellView | Notification bell in the header. |
previewNewCommentsView | Container of the realtime new-comments pill. |
previewNewCommentsViewText | Label inside the realtime new-comments pill. |
previewUserSomeoneWritingLabel | "Someone is writing" typing indicator. |
previewNewCommentsNotificationView | Pill announcing comments that arrived in realtime. |
previewSeeMoreCommentsButton | Button at the bottom that opens the full conversation. |
previewCommentsBottomSeparator | Separator under the last comment cell. |
Comment cell
One comment row, used by the comments preview and the full conversation.
VFCustomViewType | Description |
|---|---|
commentCellDislikeImage | Dislike icon. |
commentCellDislikeText | Dislike count. |
commentCellLikeImage | Like icon. |
commentCellLikeText | Like count. |
commentCellUserImage | Comment author's avatar photo. |
commentCellUserAvatar | Initials avatar used when the author has no photo. |
commentCellDateText | Relative timestamp of the comment. |
commentCellOptionsImage | Overflow icon that opens the comment options sheet. |
commentCellUserText | Author display name. |
commentCellReplyImage | Reply icon. |
commentCellFollowView | Follow-author control inside the cell. |
commentCellCommentText | The comment body text. |
commentCellReplyText | Reply action label. |
commentCellCustomBadgeView | Custom 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. |
commentCellUserIndicatorHolder | Container behind the avatar badge image. |
commentCellUserIndicatorImage | Small badge image overlaid on the author avatar. |
commentCellAwaitingModerationView | Banner shown while the comment awaits moderation. |
commentCellUrlPreviewContainer | Link preview card attached to the comment. |
commentCellUrlPreviewTitle | Title inside the link preview card. |
commentCellUrlPreviewDescription | Description inside the link preview card. |
commentCellUrlPreviewSiteName | Site name inside the link preview card. |
writeReplyUserAvatar | Initials avatar in the inline reply row under a comment. |
writeReplyUserImage | Reader's avatar photo in the inline reply row under a comment. |
commentCellExpandRepliesLabel | "Show replies" label under a comment. |
commentCellExpandRepliesImage | Chevron next to the show-replies label. |
commentCellExpandRepliesLoading | Spinner shown while replies load. |
Comment composer
The new comment, reply and edit screen.
VFCustomViewType | Description |
|---|---|
postButton | Submit button that posts the comment. |
postEditText | The comment text input. |
postBackgroundView | Root background of the composer screen. |
postHeaderDescription | Header line describing the action (comment, reply or edit). |
postMetadataTitle | Article title in the composer's metadata card. |
postMetadataImage | Article thumbnail in the composer's metadata card. |
postReplyToUserAvatar | Initials avatar of the user being replied to. |
postReplyToUserImage | Avatar photo of the user being replied to. |
postUserAvatar | Initials avatar in the composer when the reader has no photo. |
postUserImage | Reader's avatar photo in the composer. |
postMetadataDescription | Article description in the composer's metadata card. |
Profile
The reader's own profile and other readers' profiles.
VFCustomViewType | Description |
|---|---|
profileNameText | Profile display name. |
profileCommunityTabText | "Community" tab label. |
profileCommunityTabView | Community tab container. |
profileMainTabText | "Profile" tab label. |
profileFeedTabText | "Feed" tab label. |
profileLogoutText | Log out action. |
profileLikesText | Likes counter. |
profileFollowersText | Followers counter. |
profileActivityText | Activity counter. |
profileCommentsText | Comments counter. |
profileUserImage | Profile avatar photo. |
profileUserAvatar | Initials avatar when the user has no photo. |
profileBackgroundView | Root background of the profile screen. |
profileFollowView | Follow control on another reader's profile. |
profileMuteView | Mute control on another reader's profile. |
profileNotificationSettingsImage | Notification settings icon in the profile header. |
Activity feed and user lists
Rows inside the profile's feed tab and the followers/following lists.
VFCustomViewType | Description |
|---|---|
userCommentDescLabel | Line describing the activity in a profile feed row. |
userCommentOriginalImage | Thumbnail of the article the feed row's comment belongs to. |
userCommentOriginalTitle | Title of the article the feed row's comment belongs to. |
userCommentContentLabel | The comment text in a profile feed row. |
userCommentSeparator | Divider between profile feed rows. |
userCommentDateLabel | Timestamp of a profile feed row. |
userCellImage | Avatar photo in a followers or following row. |
userCellAvatarView | Initials avatar in a followers or following row. |
userCellNameLabel | Display name in a user list row. |
userCellActionDateLabel | Action and date line in a user list row. |
userCellBadgeLabel | Badge text in a user list row. |
userCellBadgeView | Badge container in a user list row. |
userCellSeparator | Divider between user list rows. |
userCellFollowView | Follow control in a user list row. |
userCellMuteView | Mute control in a user list row. |
Engagement Starter
The engagement starter widget.
VFCustomViewType | Description |
|---|---|
conversationStarterBackgroundView | Root background of the engagement starter. |
conversationStarterHeaderLabel | Small header line above the title. |
conversationStarterTitleLabel | Title of the default variant. |
conversationStarterDescriptionLabel | Description of the default variant. |
conversationStarterFeaturedCommentLabel | Text of the featured comment in the editor's pick variant. |
conversationStarterActionButton | Call-to-action button. |
Live Chat
The live chat widget and its message rows.
VFCustomViewType | Description |
|---|---|
chatPostButton | Send control next to the message input. |
chatPostImage | Send icon. |
chatPostLoading | Spinner shown while a message is sending. |
chatEditText | Message input. |
chatLoading | Spinner for the initial message load. |
chatEmptyView | Empty state shown when the chat has no messages. |
chatCellContentLabel | Message text. |
chatCellDateLabel | Message timestamp. |
chatCellUserNameLabel | Message author name. |
Live Questions
The live questions widget, its question rows, composer and hosts list.
VFCustomViewType | Description |
|---|---|
liveQuestionCellUserAvatar | Initials avatar of the question's author. |
liveQuestionCellUserImage | Avatar photo of the question's author. |
liveQuestionCellUserNameLabel | Question author's display name. |
liveQuestionCellDateLabel | Question timestamp. |
liveQuestionCellContentLabel | Question text. |
liveQuestionCellLikeButton | Like control on a question. |
liveQuestionCellLikeLabel | Like count on a question. |
liveQuestionCellDislikeButton | Dislike control on a question. |
liveQuestionCellDislikeLabel | Dislike count on a question. |
liveQuestionCellReplyButton | Reply control on a question. |
liveQuestionCellOptionsButton | Overflow control on a question. |
liveQuestionCellReplyingToLabel | "Replying to" line shown on a reply. |
liveQuestionCellPinnedView | Pinned marker on a question. |
liveQuestionCellHostPillView | "Host" pill on questions and answers from a host. |
liveQuestionCellSeparator | Divider between question rows. |
liveQuestionCellAnnouncementLabel | Text of an announcement row. |
liveQuestionCellAnnouncementIcon | Icon of an announcement row. |
liveQuestionCellAnnouncementBackground | Background of an announcement row. |
liveQuestionCellAnswerLabel | Text of a host's answer block. |
liveQuestionCellAnswerIcon | Icon of a host's answer block. |
liveQuestionCellAnswerBackground | Background of a host's answer block. |
liveQuestionsHostCellNameLabel | Host name in the hosts list. |
liveQuestionsHostCellBadgeLabel | Host badge text in the hosts list. |
liveQuestionsHostCellContainerView | Container of a hosts list row. |
liveQuestionComposerUserAvatar | Reader's initials avatar in the ask-a-question pill. |
liveQuestionComposerUserImage | Reader's avatar photo in the ask-a-question pill. |
liveQuestionComposerHintLabel | Hint text inside the ask-a-question pill. |
liveQuestionComposerPillView | Tappable ask-a-question pill. |
liveQuestionTitleLabel | Widget title. |
liveQuestionPoweredByView | "Powered by Viafoura" badge. |
liveQuestionBackgroundView | Root background of the live questions widget. |
liveQuestionStatusChipView | Status chip showing whether the session is live or closed. |
liveQuestionStatusDotView | Dot inside the status chip. |
liveQuestionStatusLabel | Text inside the status chip. |
Trending
The vertical trending list and the trending carousel.
VFCustomViewType | Description |
|---|---|
trendingCarouselTitle | Article title on a trending carousel card. |
trendingCarouselImage | Article thumbnail on a trending carousel card. |
trendingCarouselCount | Comment count on a trending carousel card. |
trendingCarouselBackground | Background of a trending carousel card. |
trendingVerticalBackground | Root background of the vertical trending list. |
trendingVerticalTitleLabel | Section title of the vertical trending list. |
trendingVerticalFullImage | Article thumbnail in a full-size trending row. |
trendingVerticalFullTitle | Article title in a full-size trending row. |
trendingVerticalFullCount | Comment count in a full-size trending row. |
trendingVerticalFullImageIcon | Icon 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.
VFCustomViewType | Description |
|---|---|
notificationBellIcon | Bell icon of the standalone notification bell. |
notificationBellText | Unread counter next to the bell. |
notificationBellTextHolder | Container behind the unread counter. |
notificationContentImage | Actor photo or content thumbnail in a notification row. |
notificationAvatarView | Actor's initials avatar in a notification row. |
notificationRemoveImage | Dismiss control on a notification row. |
notificationTrendingCountImage | Comment-count icon on a trending notification row. |
notificationTrendingImage | Article thumbnail on a trending notification row. |
notificationTrendingIcon | Trending 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. |
notificationContentText | Notification text. |
notificationDateText | Notification timestamp. |
Report flow
The report-a-comment sheet, step by step.
VFCustomViewType | Description |
|---|---|
reportBackgroundView | Root background of the report sheet. |
reportStartDescriptionLabel | Explanation on the first report step. |
reportStartButton | Primary button on the first report step. |
reportStartCancelLabel | Cancel action on the first report step. |
reportPickReasonLabel | "Pick a reason" heading on the reason list. |
reportReasonOptionLabel | Each selectable reason row. |
reportChosenTitleLabel | Title shown after a reason is chosen. |
reportChosenDescriptionLabel | Description shown after a reason is chosen. |
reportChosenCancelLabel | Cancel action after a reason is chosen. |
reportThanksLabel | Confirmation message once the report is sent. |
reportThanksButton | Dismiss button on the confirmation step. |
Bottom sheets
The sort picker and the comment options sheet.
VFCustomViewType | Description |
|---|---|
bottomPickerView | Background of the bottom sheet used for sort and options. |
bottomPickerTitleLabel | Title of the bottom sheet. |
bottomPickerLabel | Label of an option row in the bottom sheet. |
bottomPickerIcon | Icon next to an option row in the bottom sheet. |
Updated 4 days ago
