Snackbar Overlapping Floating Action Button Through Fragment Navigation

Question

I've having an strange issue of Snackbar overlapping a floating action button that I have in the main view of the application. For context, I will provide a short clip of the issue I'm experiencing. I initiate the snackbar from a separate fragment after completing an action (update or add) then return to the main view (list fragment), in which the snackbar will be shown, but the snackbar overlaps the floating action button rather than moving it up slightly even when the list fragment layout contains a coordinator layout. Any ideas to work around this issue?

Current Behavior:

https://i.stack.imgur.com/5tVC4.gif

Desired Behavior:

https://i.stack.imgur.com/W51A9.gif

Below is the code I call when navigating back to the main fragment (list fragment).

createSnackBar(requireView(),R.string.successfully_updated, Snackbar.LENGTH_SHORT)
findNavController().navigate(R.id.action_updateFragment_to_listFragment)

Implementation of createSnackBar function.

fun createSnackBar(view: View, @StringRes message: Int, duration: Int) {
    val resources = view.resources
    val snackBar = Snackbar.make(view, resources.getString(message), duration)
    snackBar.show()
}

whenever you navigate Instead of showing snackbar in update fragment (before navigation), show it in list fragment once you return — Shobhith, Jun 03 '21 at 01:48

score 2 · Answer 1 · answered Jun 03 '21 at 02:32

You need to set the fab button to the anchor view of the SnackBar using setAnchorView

fun createSnackBar(view: View, @StringRes message: Int, duration: Int) {
    val resources = view.resources
    val snackBar = Snackbar.make(view, resources.getString(message), duration)
    snackBar.setAnchorView(R.id.myFab) // replace myFab with your fab button id
    snackBar.show()
}

Snackbar Overlapping Floating Action Button Through Fragment Navigation

1 Answers1