Widget: Post View
The PostView
is customizable and modular UI component that visually represents a post in the feed. It is composed of five key subviews as mentioned below
Post View Structure
The PostView
layout is split into the following key components:
1. Post Header View
- Shows the user's profile picture, name, and timestamp.
- Also contains an overflow menu for post-level actions.
2. Post ContentView
- Displays the post's title, description, or any textual content.
3. Post Media View
- Renders media like images, videos, or documents attached to the post.
- Supports media preview and video playback.
4. Post Action View
- Contains like, comment, and share buttons.
- Shows counts and states (liked, commented, etc.).
5. Post Top Response
- Contains the top comments of the post decided by the admin
Each of these views is implemented as a separate XML layout file and is designed to be modular and reusable.
View Style: LMFeedPostViewStyle
LMFeedPostViewStyle
defines the visual style and structure of Post View. The following fields are available for customization:
Field Name | Description | Type | |
---|---|---|---|
postHeaderViewStyle | Style for post header view, to customize post author view and time created. | LMFeedPostHeaderViewStyle | |
postContentTextStyle | Style for post content view, to customize post content view. | LMFeedPostContentViewStyle | |
postMediaViewStyle | Style for post media view, to customize post media view like image, video or document. | LMFeedPostMediaViewStyle | |
postActionViewStyle | Style for post action view, to customize post action view like like button, comment text or share icon. | LMFeedPostActionViewStyle | |
postTopResponseViewStyle | Style for post top response view, to customize post top response view. | LMFeedPostTopResponseViewStyle |
Customization
To customize the behavior or appearance of a PostView
, you need to extend one of the feed fragments depending on your use case:
- Social Feed Screen – for Social Feed Theme
- QnA Feed Screen – for QnA Feed Theme
- Video Feed Screen - for Video Feed Theme
Usage Example
In this example, we're customizing the following elements of the Post View inside Social Feed Screen.
- Change background color of the Action View
- Change click of like button
Steps to Customize
- Create
CustomSocialFeedFragment
Start by extendingLMFeedSocialFeedFragment
and create a custom class, sayCustomSocialFeedFragment
.
class CustomSocialFeedFragment : LMFeedSocialFeedFragment() {
// We will override methods in the next step
}
- Override and Customize Methods You can customize various aspects of the Social feed screen by overriding specific functions.
class CustomSocialFeedFragment : LMFeedSocialFeedFragment(LMFeedType.UNIVERSAL_FEED) {
override fun customizeSocialFeedListView(rvUniversal: LMFeedSocialFeedListView) {
val postViewStyle = LMFeedStyleTransformer.postViewStyle
val actionViewStyle = postViewStyle.postActionViewStyle
val updatedActionViewStyle = actionViewStyle.toBuilder()
.backgroundColor(R.color.lm_feed_azure)
.build()
val updatedPostViewStyle = postViewStyle.toBuilder()
.postActionViewStyle(updatedActionViewStyle)
.build()
LMFeedStyleTransformer.postViewStyle = updatedPostViewStyle
}
override fun onPostLikeClicked(position: Int, postViewData: LMFeedPostViewData) {
/* Add your logic here */
}
}
- Use
CustomSocialFeedFragment
You can now use the custom fragment to start Social Feed Fragment as explained in Getting Started.