CoordinatorLayout Basic

CoordinatorLayout in Action

CoordinatorLayout is a super-powered FrameLayout.

CoordinatorLayout is a general-purpose container that allows for coordinating interactive behaviorsbetween its children.CoordinatorLayout manages interactions between its children, and as such needs to contain all the Views that interact with each other. The two general cases supported by CoordinatorLayout are:

• As a top-level content layout (meaning CoordinatorLayout is at the root of all views within an activity or fragment).
• As a container for a specific interaction with one or more child views.

By specifying Behaviors for child views of a CoordinatorLayout you can provide many different interactions within a single parent and those views can also interact with one another.

Important XML Attributes

• android:layout_gravity: Specifies the gravity of the child relative to the parent. If you specify an Anchor using app:layout_anchor, then this attribute would be ignored. And you have to use app:layout_anchorGravity to position the child. Do not use both of these together in any view. It may cause of unexpected result.

FAB without android:layout_gravity

FAB with android:layout_gravity=”bottom|end”

• app:layout_anchor: This attribute can be set on children of the CoordinatorLayout to attach them to another view. The value would be the id of an anchor view that this view should position relative to. Note that, the anchor view can be any child View (a child of a child of a child of a CoordinatorLayout, for example).

FAB with just app:layout_anchor=”@id/appbar” but wihtout app:layout_anchorGravity

• app:layout_anchorGravity: Specifies how an object should position relative to an anchor, on both the X and Y axes, within its parent’s bounds.

FAB with app:layout_anchorGravity=”bottom|end”

• app:layout_insetEdge: Specifies how this view insets the CoordinatorLayout and make some other views dodge it. The child consumes the area of the screen it occupies and other children should not be placed in that area. Bottom is the default insetEdge of SnackBar
• app:layout_dodgeInsetEdges: Specifies which edges of the child should be offset by insets. Bottom is the default dodgeInsetEdges of FAB button. Learn More.

The button don’t have dodgeInsetEdge but the FAB button has

• app:layout_behavior: The class name of a Behavior class defining special runtime behavior for this child view. AppBarLayout and FAB button have default behavior attached to them. This is most important attributes of CoordinatorLayout . I have talked about this in another blog post.

In some tutorial on the internet you may see that CoordinatorLayout has android:fitsSystemWindows="true" attribute. You may wonder why should we use this attribute. You can find you answer here and here.

That’s all for the basic. I have planned to post series on Material Component. So follow me if you don’t wanna miss my future post.

If this post is helpful, please clap for me.