Simple view dodging with CoordinatorLayout

You may not know about such powerful useful feature of CoordinatorLayout as dodging. Snackbar or some animated view can overlap important content on the screen.

As we see here, FloatingActionButton is dodging Snackbar but sample view is not. It turns out that we don’t need to write custom animations or coordinator layout behaviours to fix it.

To find a solution let’s take a look on CoordinatorLayout documentation.

Children can specify insetEdge to describe how the view insets the CoordinatorLayout. Any child views which are set to dodge the same inset edges by dodgeInsetEdges will be moved appropriately so that the views do not overlap.

So let me explain this by example.

Prevent our view from being overlapped by Snackbar

It’s quite easy: `dodgeInsetEdges` are edges on which view expects overlapping to potentially occur. So, if we just add layout_dodgeInsetEdges=”bottom” attribute to view, it will dodge Snackbar and lift up like FloatingActionButton does.

But why FAB is dodging Snackbar without dodgeInsetEdges attribute?

Because FAB has a CoordinatorLayout behaviour. And it sets layout_dodgeInsetEdges=”bottom” by default. Which means that FAB will dodge any view that will try to overlap it from the bottom.

FloatingActionButton#Behavior#onAttachedToLayoutParams

if (lp.dodgeInsetEdges == Gravity.NO_GRAVITY) {
    // If the developer hasn't set dodgeInsetEdges, lets set it to BOTTOM so that
    // we dodge any Snackbars
    lp.dodgeInsetEdges = Gravity.BOTTOM;            
}

Let’s add some animated view on the bottom

Looks not very good. Our view is overlapped by the bottom sheet and the FAB is not reacting on this. Why do dodgeInsetEdges work with Snackbar but not with this view?

CoordinatorLayout doesn’t know which view can overlap other views. To let it know which view must be dodged we need to set insetEdge attribute on this view. So, let’s set layout_insetEdge=”bottom”.

Snackbar by default implements bottom insetEdge. That means that Snackbar and our bottom view will influence all views in CoordinatorLayout with dodgeInsetEdges bottom or all.

BaseTransientBottomBar#showView

// Also set the inset edge so that views can dodge the bar correctly                clp.insetEdge = Gravity.BOTTOM;

That’s all. Just set dodgeInsetEdges on view that must dodge and insetEdge on view that must be dodged.

Sample code here. If this post is useful, clap your hands.

Thanks @dimsuz for help.