Skip to main content

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 NameDescriptionType
postHeaderViewStyleStyle for post header view, to customize post author view and time created.LMFeedPostHeaderViewStyle
postContentTextStyleStyle for post content view, to customize post content view.LMFeedPostContentViewStyle
postMediaViewStyleStyle for post media view, to customize post media view like image, video or document.LMFeedPostMediaViewStyle
postActionViewStyleStyle for post action view, to customize post action view like like button, comment text or share icon.LMFeedPostActionViewStyle
postTopResponseViewStyleStyle for post top response view, to customize post top response view.LMFeedPostTopResponseViewStyle

Github file link

Customization

To customize the behavior or appearance of a PostView, you need to extend one of the feed fragments depending on your use case:

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

  1. Create CustomSocialFeedFragment Start by extending LMFeedSocialFeedFragment and create a custom class, say CustomSocialFeedFragment.
class CustomSocialFeedFragment : LMFeedSocialFeedFragment() {
// We will override methods in the next step
}
  1. 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 */
}
}

  1. Use CustomSocialFeedFragment

You can now use the custom fragment to start Social Feed Fragment as explained in Getting Started.