Skip to main content

Introduction to Screens in Android

The LikeMinds Feed Android SDK provides several core screens for implementing feed functionality. This document outlines the main screens, their purposes, and how to customize them using the SDK's customization mechanism; enabling developers to understand and leverage the SDK's customization capabilities effectively.

Prerequisites​

  • LikeMinds Feed Android SDK installed and default feed is running in your project. Using the Guide here.

Screens​

The LikeMinds Feed SDK comes with a suite of pre-built screens (provided as Fragments) covering common social feed functionality. You can use these out-of-the-box to implement a full feed experience, or navigate to specific ones based on user actions.

Each of these screens is built-in and ready to use. They are implemented as fragments that you can directly launch or navigate to. Under the hood, these screens utilize the LikeMinds Feed SDK’s UI components and data layer to provide a consistent experience.

Key Components​

Each screen comprises for certain key components to customize different parts and navigation of the screen.

View Style Classes​

  • Each screen comes with a corresponding ViewStyle class that encapsulates the stylistic properties of that screen’s UI components.
  • For instance, the Social Feed Screen has LMFeedSocialFeedFragmentViewStyle which contains style fields for the header, the "create post" FAB, empty-state layouts, etc.
info

All the default UI styling properties in respective ViewStyle classes are already defined in the LMFeedStyleTransformer class.

Customization Methods​

  • The SDK’s fragments provide override-able methods that act as hooks for you to inject custom UI or logic.
  • For example, Social Feed Screen has methods like customizeCreateNewPostButton(), customizeSocialFeedHeaderView(), customizeSocialFeedListView() etc.​

Interaction Callbacks​

  • Apart from UI appearance, you might want to customize behavior when users interact with the feed. The SDK provides callback methods for various user interactions on each screen.
  • These are typically methods you can override in a subclass to intercept events.
  • For example, in Social Feed Screen following functions are available to override
    • onPostContentClicked(...) when a post is tapped
    • onPostLikeClicked(...) when the like button is pressed
    • onPostShareClicked(...) when share is tapped

Custom Entry Point​

  • In Getting Started Guide's Step 4, we have shown the default way to navigate to Social Feed Screen, QnA Feed Screen, and Video Feed Screen but if you want to change the default navigation and navigate to a custom screen then you should pass the extras object with respective values while getting it's instance.
  • For example, to start the feed from Post Detail Screen, you can pass the postId in the LMFeedPostDetailExtras object and then pass the fragment instance in the LMFeedCore.showFeed() method.
val apiKey = "Your generated API key" // api key generated from the dashboard
val userName = "ENTER USER NAME" // name of the user
val userId = "ENTER USER ID" // id of the user
val context = this // instance of context

val successCallback = { response : UserResponse? ->
    val containerViewId = R.id.frame_layout

    // Create the extras for the Post Detail Screen
    val postDetailExtras =  LMFeedPostDetailExtras.Builder()
        .postId("<Enter postId>")
        .build()

    // Create the fragment instance
    val fragment = LMFeedPostDetailFragment.getInstance(postDetailExtras)

    // Replace the fragment in the container view
    val transaction = supportFragmentManager.beginTransaction()
    transaction.replace(containerViewId, fragment, containerViewId.toString())
    transaction.commit()
} // 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
)

How to Customize Screens​

To illustrate the customization process, let’s customize the Social Feed Screen as an example. Let's do the following changes

  • Change the title of the app bar
  • Change the background color of the "New Post" button and changes it text to "Create Post"
  • Handle the click on a post and show a toast with the message "Post Content Clicked"

Step 1: Create a Custom Screen extending the Social Feed Screen​

First, create a class extending LMFeedSocialFeedFragment in your project. In this subclass, override its delegate methods to tweak the UI components:

  • customizeSocialFeedHeaderView() gives us the fragment’s header view (LMFeedHeaderView) so we can modify it – we changed the title text in this example.
  • customizeCreateNewPostButton() provides the Floating Action Button (LMFeedFAB) used for creating a new post – we replaced its icon and color. (The LMFeedFAB is a custom view class for the FAB in the SDK.)
  • onPostContentClicked() is an example of intercepting an interaction. In this case, we’re currently calling super to retain default behavior (which likely opens the Post Detail screen), but you could replace that with a custom navigation (e.g., open a different activity or fragment).
class CustomSocialFeedFragment : LMFeedSocialFeedFragment(LMFeedType.UNIVERSAL_FEED) {

    override fun customizeSocialFeedHeaderView(headerViewSocial: LMFeedHeaderView) {
        super.customizeSocialFeedHeaderView(headerViewSocial)
        // Customize the feed header (app bar) - set a custom title
        headerViewSocial.setTitleText("My Community Feed")
    }

    override fun customizeCreateNewPostButton(fabNewPost: LMFeedFAB) {
        // Customize the create new post button - set a background color
        // Update the header view style
        val socialFeedFragmentViewStyle = LMFeedStyleTransformer.socialFeedFragmentViewStyle
        val createNewPostButtonStyle = socialFeedFragmentViewStyle.createNewPostButtonViewStyle
        val updatedCreateNewPostButtonStyle = createNewPostButtonStyle.toBuilder()
            .backgroundColor(R.color.white)
            .build()
        val updatedSocialFeedFragmentViewStyle = socialFeedFragmentViewStyle.toBuilder()
            .createNewPostButtonViewStyle(updatedCreateNewPostButtonStyle)
            .build()

        // Update the style transformer
        LMFeedStyleTransformer.socialFeedFragmentViewStyle = updatedSocialFeedFragmentViewStyle

        // Set the updated header view style
        super.customizeCreateNewPostButton(fabNewPost)

        // Customize the create new post button - set a custom title
        fabNewPost.text = "Create Post"
    }

    override fun onPostContentClicked(position: Int, postViewData: LMFeedPostViewData) {
        // Handle the post content click event
        Toast.makeText(requireContext(),"Post Content Clicked",Toast.LENGTH_SHORT).show()
        super.onPostContentClicked(position, postViewData)
    }
info

To customise screen or change it's view style, follow the order inside it's respective "customize" override method:

  • Get respective view style from LMFeedStyleTransformer and use builder pattern to set up a new view style then update the respective view style by updating LMFeedStyleTransformer.
  • Call super of the respective "customize" method inside the override method to display the updated view style.
  • For any content or data changes w.r.t the view object being passed as param inside override method, do it after calling super of the respective "customize" method.
info

Only override what you need, for any method you don’t override, the SDK’s default implementation will be used.

Step 2: Use the Custom Fragment​

The custom screen created can be used anywhere but for now, we will use the custom screen and change default navigation way:

val apiKey = "Your generated API key" // api key generated from the dashboard
val userName = "ENTER USER NAME" // name of the user
val userId = "ENTER USER ID" // id of the user
val context = this // instance of context

val successCallback = { response : UserResponse? ->
    //user session initiated successfully, write your logic here
    val containerViewId = R.id.frame_layout
    val fragment = CustomSocialFeedFragment()

    val transaction = supportFragmentManager.beginTransaction()
    transaction.replace(containerViewId, fragment, containerViewId.toString())
    transaction.commit()
} // 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
)

With everything set up, run your app and navigate to the feed. The Social Feed screen should now appear with your customizations in place as per our example:

  • The app bar (header) now shows "My Community Feed" as the title (our custom text).
  • The "New Post" FAB is styled to have a white background color and the text is changed to "Create Post".
  • The click on a post triggers a toast with the message "Post Content Clicked".
  • All other aspects of the feed remain default (since we didn’t override other parts or styles).

Conclusion​

By mixing and matching these approaches (theme configuration, subclassing with overrides, and callback handling), you can deeply customize the feed experience while still leveraging the robust pre-built functionality of the LikeMinds Feed SDK.