Home > Back-end >  Bottom Sheet for multiple items inside RecyclerView
Bottom Sheet for multiple items inside RecyclerView

Time:05-17

I have a posts feed that looks like Twitter. Each item in that feed has a button that when clicked should open up a bottom sheet. The feed uses the RecyclerView layout and the paging library. My question is how do I go about implementing bottom sheet for each individual item dynamically so that when a user clicks on the button a menu is displayed that gives the option to report the user of that post, copy that post's link, etc. I'm not sure how to go about dynamically creating a bottom sheet for each individual item and giving dynamic data to each individual bottom sheet.

CodePudding user response:

Things you have to do to achieve this is pretty simple

  1. Pass a lambda function with an argument that accepts the data item which the RV holds to the constructor of your RecyclerView adapter.
  2. Inside onBindViewHolder you can set onClickListeners to your list items views
  3. Now wherever you initialize your recycler view you can define what has to be done when a user clicks via lambda functions.

Ref: https://stackoverflow.com/a/44831977/13049473

You can then retrieve whatever data you need from RV to your activity/fragment and then you can use it to display your bottomsheet

CodePudding user response:

You need to create a single bottomsheet for this to achieve, and you can pass the data for each of list items, on which you want to show this bottomsheet on.

Let our Post data class looks like this

data class Post (
    val userId: Int,
    val link: String
)

Create an interface to pass the Post data from our recyclerView to our fragment.

interface ItemClickListener {
    fun onItemClick(post: Post)
}

Implement this interface inside of the fragment

class TestFragment: Fragment(R.layout.test_fragment), ItemClickListener {
    override onItemClick(post: Post) {
         // will open bottomsheet from here
    }
}

Now pass the reference of ItemClickListener to the recyclerView's adapter and when the user clicks on the item, then call the onItemClick method of the listener and pass the Post of the clicked view. You can read a more detailed answer about it here

After we've received the post inside the fragment, we can now create our bottomsheet dialog and show it

private fun showBottomSheetDialog(
    post: Post
) {
    val bottomSheetDialog = BottomSheetDialog(requireActivity())
    val bottomSheetBinding = BottomSheetPostBinding.inflate(layoutInflater, binding.root, false)

    bottomSheetBinding.apply {
        tvShare.setOnClickListener {
            sharePostLink(post.link) // share your post link from here
        }
        
        tvReport.setOnClickListener {
            repostUser(post.userId) // report user
        }
    }

    bottomSheetDialog.setContentView(bottomSheetBinding.root) 
    bottomSheetDialog.show()
} 

From inside of overrided onItemClick method call this showBottomSheetDialog method.

override onItemClick(post: Post) {
    showBottomSheetDialog(post)
}

You can do the same if you are creating a BottomSheetDialogFragement instead of BottomSheetDialog.

  • Related