Android CoordinatorLayout Using Kotlin

Filed Under: Android

In this tutorial, we’ll be discussing CoordinatorLayout in our Android Application using Kotlin.

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
      android-coordinator-layout-activity-main

      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

      android-coordinator-layout-content-main

      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.

      android-coordinator-layout-default-output

      layout_insetEdge and layout_dodgeInsetEdges

      Let’s add another button in our activity_main.xml CoordinatorLayout.

      
      <?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>
      

      android-coordinator-layout-no-insetEdges-output

      As you see the Button is hidden and the SnackBar is displayed over it.
      To overcome this issue change the button to:

      
      <Button
              android:layout_width="wrap_content"
              android:text="WATCH ME"
              android:layout_gravity="bottom|start"
              app:layout_dodgeInsetEdges="bottom"
              android:layout_height="wrap_content" />
      

      android-coordinator-layout-dodge-insetEdges-output

      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

      
      <?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>
      

      android-coordinator-layout-dodge-layout-anchor-output

      With this, we’ve covered all the major XML Attributes present in a CoordinatorLayout.

      The MainActivity.kt is unchanged and looks like the following:

      android-coordinator-layout-main-activity

      This brings an end to this tutorial. You can download the project from the link below:

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages