How to render Custom Post UI?

Overview

The LikeMinds Feed SDK provides developers with the ability to render custom post UI. To use your own custom Post UI:

1. Create a custom xml layout as per your requirements

Create a new layout file as per your design requirements. While creating the layout file, make note of the following:

1. Wrap the whole layout within <layout> tags to enable dataBinding for the layout

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <!--    Rest of the layout-->

</layout>

2. Add <data> tags and add two variables as position and postViewData as below:

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">
    <data>

        <variable
            name="position"
            type="int" />

        <variable
            name="postViewData"
            type="com.likeminds.feed.android.core.socialfeed.model.LMFeedPostViewData" />
    </data>

    <!--    Rest of the layout-->

</layout>

VARIABLE	TYPE	DESCRIPTION	OPTIONAL
position	Int	Position of the current item view
postViewData	PostViewData	Instance of the post to be inflated in the item view.

2. Extend class PostViewDataBinder to create your own custom ViewDataBinder

After creating the xml layout, create a custom view data binder by extending PostViewDataBinder. While extending the same, pass the following:

1. Instance of LMFeedPostAdapterListener: for click listeners callbacks
2. Instance of binding: binding of the layout created in above step
3. Type of post through viewType

VIEW TYPE	POST TYPE
ITEM_POST_TEXT_ONLY	Post with text and no attachments
ITEM_POST_SINGLE_IMAGE	Post with text and a single image as attachment
ITEM_POST_SINGLE_VIDEO	Post with text and a single video as attachment
ITEM_POST_DOCUMENTS	Post with text and documents as attachment
ITEM_POST_LINK	Post with text and link as attachment
ITEM_POST_MULTIPLE_MEDIA	Post with text and multiple attachments
ITEM_POST_POLL	Post with text and poll as attachments
ITEM_POST_VIDEO_FEED	Post with text and reel as attachment
ITEM_POST_CUSTOM_WIDGET	Post with text and custom JSON object
ITEM_POST_VIDEO_FEED_CAUGHT_UP	View when all the reels are viewed

class CustomViewDataBinder(private val postAdapterListener: LMFeedPostAdapterListener) :
    PostItemViewDataBinder<CreatedCustomBinding>(postAdapterListener) {
    override val viewType: Int
        get() = //add the view type from above table

    override fun createBinder(parent: ViewGroup): CreatedCustomBinding {
        //return the instance of the binding and add click listeners
    }

    override fun bindData(
        binding: CreatedCustomBinding,
        data: LMFeedPostViewData,
        position: Int
    ) {
        //bind the data with the layout and data variables
        binding.position = position
        binding.postViewData = data

        //Rest of the logic
    }
}

3. Replace the default post view witth custom post view

After creation of the custom view data binder, replace the default view data binder with the custom view data binder created above by extending relevant predefined theme fragment and override the customize<Theme>ListView() function as per the predefined theme used. And calling replaceViewDataBinder() of the adapter provided, in this function pass the viewType which is used in above step and the instance of the CustomViewDataBinder.

class CustomFragment : ThemeFragment(), LMFeedPostAdapterListener  {

    override fun customize<Theme>ListView() {
        val customViewDataBinder = CustomViewDataBinder(this)
        <theme>Adapter.replaceViewDataBinder(viewType, customViewDataBinder)
    }
}

4. Inflate the Custom Fragment

Transact the custom fragment CustomFragment() created above in the successCallback of LMFeedCore.showFeed() which was used in the Getting Started

val successCallback = { response : UserResponse? ->
  // inflate universal feed fragment in your activity
  val containerViewId = R.id.frame_layout
  val fragment = CustomFragment() //custom fragment created

  val transaction = supportFragmentManager.beginTransaction()
  transaction.replace(containerViewId, fragment, containerViewId.toString())
  transaction.commit()
  Unit
} // callback triggered when the initiate user call is successful

val failureCallback = { errorMessage ->
  Log.e("Example", errorMessage)
  Unit
} // callback triggered when the initiate user call fails

LMFeedCore.showFeed(
    context = context,
    apiKey = apiKey,
    uuid = userId,
    userName = userName,
    success = successCallback,
    error = failureCallback
)

Example Implementation

For example implementations, continue on the next documents.