CooridinatorLayout
We have discussed FrameLayouts in the past.
CoordinatorLayout is super-powered FrameLayouts with more properties.
Properties such as:
-
- Setting certain behaviors on the layout based on actions performed on the views.
- Setting views dependent on one another based on certain actions. One view acts as the layout_anchor of the other. This way we can define how one view changes when another is changed.
- Basically, this is useful in animating views related to one another.
Create a fresh new android studio project and choose Basic Activity Type. Do not forget to enable Kotlin Support!
In your layout folder, you’ll have two files activity_main.xml and content_main.xml.
content_main.xml is a part of the activity_main.xml layout and is included using the <include> tag
Following is how each of these XML layouts look like:
activity_main.xml
The CoordinatorLayout by default consists of an AppBarLayout and a FloatingActionButton.
These are a part of the material design support library.
AppBarLayout
The AppBarLayout is used to hold the Toolbar. Those the Toolbar would animate the way the AppBarLayout would want it to.
AppBarLayout in itself is a vertical LinearLayout.
To provide it’s child views the desired scrolling behaviour, we need to set the app:layout_scrollFlags on the child view.
app:layout_scrollFlags can be set on the Toolbar. It can have the following properties,
-
-
-
- scroll: This flag is generally set for all views that need to scroll off-screen. Views that don’t use this flag remain static allowing the other scrollable views to slide behind it
- enterAlways: This flag ensures that any downward scroll will cause the view to become visible, enabling the quick return pattern
- enterAlwaysCollapsed: An additional flag for ‘enterAlways’ which modifies the returning view to only initially scroll back to it’s collapsed height.
- exitUntilCollapsed: This flag causes the view to be scrolled until it is collapsed (its minHeight is reached) before exiting
- snap: Upon a scroll ending, if the view is only partially visible then it will be snapped and scrolled to it’s the closest edge. Hence this avoids mid-animation states of a view
-
-
content_main.xml
Ignore the ConstraintLayout for now. We’ll discuss it in a later tutorial.
Notice the app:layout_behavior="@string/appbar_scrolling_view_behavior".
Its the standard scrolling behaviour that scrolls the content underneath the AppBarLayout.
Back to the activity_main.xml let’s look at some of the important XML Attributes
Important XML Attributes
android:layout_gravity : Specifies the gravity of the child view relative to the parent.
If app_layoutAnchorGravity is used then the layout_gravity attribute would set the gravity relative to the anchor view.
app:layout_anchor is used to set the anchor view on the current child. The view would be positioned relatively.
app:layout_insetEdge is used to set insets on the view. That locks the certain space for the view.
app:layout_dodgeInsetEdges is used to set whether the view is willing to move away from it’s one side when needed. We can pass start, end, top or bottom.
FloatingActionButton has a default layout behaviour where it shifts up to give space to the SnackBar when pressed.
layout_insetEdge and layout_dodgeInsetEdges
Let’s add another button in our activity_main.xml CoordinatorLayout.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_main" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin" app:srcCompat="@android:drawable/ic_dialog_email" /> <Button android:layout_width="wrap_content" android:text="WATCH ME" android:layout_gravity="bottom|start" android:layout_height="wrap_content" /> </android.support.design.widget.CoordinatorLayout> |
As you see the Button is hidden and the SnackBar is displayed over it.
To overcome this issue change the button to:
|
1 2 3 4 5 6 7 8 |
<Button android:layout_width="wrap_content" android:text="WATCH ME" android:layout_gravity="bottom|start" app:layout_dodgeInsetEdges="bottom" android:layout_height="wrap_content" /> |
So app:layout_dodgeInsetEdges is set to bottom which displaces the bottom side of the button from its position when the Snackbar is displayed.
Set layout_insetEdges to bottom on the Button and you’ll see that the FloatingActionButton is no longer visible in the same position. This is because the Button locks the bottom part of the layout.
layout_anchor and layout_anchorGravity
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="@dimen/fab_margin" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab1" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_anchor="@id/fab" app:layout_anchorGravity="left|top" android:layout_margin="@dimen/fab_margin" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab2" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_anchor="@id/fab1" app:layout_anchorGravity="end|top" android:layout_margin="@dimen/fab_margin" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab3" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_anchor="@id/fab2" android:layout_gravity="top" app:layout_anchorGravity="end|top" android:layout_margin="@dimen/fab_margin" /> </android.support.design.widget.CoordinatorLayout> |
With this, we’ve covered all the major XML Attributes present in a CoordinatorLayout.
The MainActivity.kt is unchanged and looks like the following:
This brings an end to this tutorial. You can download the project from the link below: