The CoordinatorLayout view in Android lets you create views that change their positions relative to each other. You can attach Behaviors to the children of a CoordinatorLayout that control how one view should change its properties relative to others. For example, it is the basis of the BottomSheet implementation.
While most of the magic happens in Behaviors, CoordinatorLayout itself has some layout properties you can set directly in XML. One of these,
dodgeInsetEdges are quite useful but their documentation is really hard to understand. I could not get what they are for based on only the official description, only by trying them out. This short post shows you what
insetEdge can do via 3 simple screenshots.
Let’s start with our default setup, an ImageView residing in a CoordinatorLayout:
The corresponding XML code:
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/liberty" /> </androidx.coordinatorlayout.widget.CoordinatorLayout>
No surprises so far, this is just a single image. Let’s add another view at the bottom:
<TextView android:layout_width="match_parent" android:layout_height="200dp" android:text="Lower content!" android:textAlignment="center" android:gravity="center" android:layout_gravity="bottom" android:background="#EF5350"/>
Notice we set
layout_gravity to bottom to indicate to Android where it should be. And the result:
Notice how it blocks the bottom part of the image. Sometimes that’s not what we want to do, we would prefer the content to be pushed up. And this is what
insetEdge does. You specify which view should be at the bottom by setting
insetEdge to bottom. This tells CoordinatorLayout that the given view should reside at the bottom and push other views up. There is an extra step needed: you have to specify for each view whether it should be pushed by the bottom view or not. This let’s you leave some views at their original places, e.g. backgrounds. So add
dodgeInsetEdges to the proper views:
<ImageView ... app:layout_dodgeInsetEdges="bottom" /> <TextView ... app:layout_insetEdge="bottom" />
And the results:
You can see how the bottom TextView pushed the image up. Of course, this can be done with other sides of the screen as well, not only with the bottom one. Simply change
bottom everywhere to the edge you want to inset.