ConstraintLayout vs Coordinator layout?

Question

What to implement: ConstraintLayout or CoordinatorLayout for proper material design in android ?

Ramey

Answer 1

CoordinatorLayout is a super-powered FrameLayout.

CoordinatorLayout

CoordinatorLayout is intended for two primary use cases:

• As a top-level application decor or chrome layout
• As a container for a specific interaction with one or more child views

By default, if you add multiple children to a FrameLayout, they would overlap each other. A FrameLayout should be used most often to hold a single child view. The main appeal of the CoordinatorLayout is its ability to coordinate the animations and transitions of the views within it. 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. View classes can specify a default behavior when used as a child of a CoordinatorLayout using the CoordinatorLayout.DefaultBehavior annotation.

Behaviors may be used to implement a variety of interactions and additional layout modifications ranging from sliding drawers and panels to swipe-dismissable elements and buttons that stick to other elements as they move and animate.

ConstraintLayout is a super-powered ViewGroup similar to a RelativeLayout, but more flexible than RelativeLayout.

ConstraintLayout

ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It's similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use with Android Studio's Layout Editor.

• ConstraintLayout can be used anywhere, you don't need any other ViewGroup like RelativeLayout, LinearLayout or FrameLayout once you start using ConstraintLayout.

There are currently various types of constraints that you can use:

• Relative positioning
• Margins
• Centering positioning
• Circular positioning
• Visibility behavior
• Dimension constraints
• Chains
• Virtual Helpers objects
• Optimizer

What to implement: ConstraintLayout or CoordinatorLayout for proper material design in android ?

You may need to use both ConstraintLayout and CoordinatorLayout to build efficient UI and material animations.

A common example which uses both CoordinatorLayout and ConstraintLayout is given below for your reference.

• Use Coordinatorlayout as the top-level application decor. It will usually used to layout AppBarLayout , FloatingActionButton, and the main body of your screen, say NestedScrollView. Inside the NestedScrollView use ConstraintLayout to describe the rest of the layout as a flat hierarchy.

  <androidx.coordinatorlayout.widget.CoordinatorLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
  
        <androidx.core.widget.NestedScrollView
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
  
            <!-- Your scrolling content -->
            <androidx.constraintlayout.widget.ConstraintLayout
                ...>
  
                <!-- body of constraint layout -->
  
                <Button android:id="@+id/button" ...
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent/>
  
  
            </androidx.constraintlayout.widget.ConstraintLayout>
       </androidx.core.widget.NestedScrollView>
  
       <com.google.android.material.appbar.AppBarLayout
           android:layout_height="wrap_content"
           android:layout_width="match_parent">
        <androidx.appcompat.widget.Toolbar
               ...
               app:layout_scrollFlags="scroll|enterAlways"/>
        <com.google.android.material.tabs.TabLayout
               ...
               app:layout_scrollFlags="scroll|enterAlways"/>
        </com.google.android.material.appbar.AppBarLayout>
   </androidx.coordinatorlayout.widget.CoordinatorLayout>
  

What do the above snippet? here you go.

• We have placed the androidx.coordinatorlayout.widget.CoordinatorLayout as the root layout. And we put androidx.core.widget.NestedScrollView and com.google.android.material.appbar.AppBarLayout as direct children.

• We defined app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" attribute for androidx.core.widget.NestedScrollView. This is the key point. We defined a behavior for the NestedScrollView. That is we are telling the Coordinator layout that the NestedScrollView depends on the AppBarLayout.

  • Of course, Behaviors don’t do anything on their own, but CoordinatorLayout does. It act accordingly and helps to intercept touch events, window insets, measurement, layout, and nested scrolling. So here, it places the NestedScrollView below the AppBarLayout as we instructed. Cool right?

• We placed the ConstraintLayout inside the NestedScrollView to make it scrollable. As we already discussed, the ConstraintLayout is used to align child views with in the bounds of the ConstraintLayout.

Can I add ConstraintLayout inside another ConstraintLayout?

Of course yes, You can use any combination to align views as per your design requirements.

Can I add CoordinatorLayout inside another CoordinatorLayout ?

That is not a usual practice. the most common use case of CoordinatorLayout is as a the top-level application decor to coordinate between other direct children. But yes, if you really want to nest the CoordinatorLayout, you can do so by creating a custom CoordinatorLayout which extends the CoordinatorLayout and implements NestedScrollingChild to pass the scroll events to the parent CoordinatorLayout.

---

Bonus point

You can use the powerful MotionLayout which is a subclass of ConstraintLayout for building animations. You may check this for a detailed example for custom animation using MotionLayout.

Schistosome

Kudos for this, one of the best answer's I've ever read on SO – Concertina

Answer 2

CoordinatorLayout is intended to be the top-level layout for activity to manage the Behaviors e.g. interactions and animations.

ConstraintLayout's main goal is to provide a convenient way to create a flat layout with multiple children (much more powerful RelativeLayout).

So the CoordinatorLayout is to manage the complex behavior (especially animations) of your activity's components, and ConstraintLayout for components proper placement (especially list items).

Anglo

Answer 3

It seems like you (almost) always use a CoordinatorLayout, and sometimes use a ConstraintLayout inside. See the following resources

• The codelab at https://codelabs.developers.google.com/codelabs/material-design-style/index.html#3 only uses a CoordinatorLayout

• The example android-sunflower app ("illustrating Android development best practices") uses neither for the top-level activity, but uses both inside its fragment_plant_detail.xml, with the ConstraintLayout being inside the CoordinatorLayout:

  <layout ...>
  <data .../>
  <android.support.design.widget.CoordinatorLayout ...>
      <android.support.design.widget.AppBarLayout ...>
          <android.support.design.widget.CollapsingToolbarLayout ...>
              <ImageView... />
              <android.support.v7.widget.Toolbar... />
          </android.support.design.widget.CollapsingToolbarLayout>
      </android.support.design.widget.AppBarLayout>
      <android.support.v4.widget.NestedScrollView ...>
          <android.support.constraint.ConstraintLayout ...>
              <TextView.../>
              <TextView... />
          </android.support.constraint.ConstraintLayout>
      </android.support.v4.widget.NestedScrollView>
      <android.support.design.widget.FloatingActionButton ... />
  </android.support.design.widget.CoordinatorLayout>
  </layout>
  

Borgia

This is a good example. <layout> for data binding; <data> for viewmodel params; <CoordinatorLayout> to coordinate and animate toolbar, FAB, etc; <ConstraintLayout> uses to hold views. – Spikelet

Answer 4

@Darish has a great, comprehensive answer to this one. I second everything he said and wanted to just add a little info. In my experience, a Constraint layout as the parent view is good enough most of the time. When you need to bring in the Coordinator Layout is when you have specific behaviors that you want to manage (for example Bottom Sheets). Coordinator Layout is more trouble than it's worth if you won't be using the behavior capabilities of it or if you are trying to mess with multiple views as CoordinatorLayout acts as a "super-powered FrameLayout".

I wrote a blog post a while ago with illustrations about the differences and usages of Coordinator vs. Constraint layout. Check it out here if you are interested.

I would also second the plug for MotionLayout as a great comprehensive way to add animations to your layouts without too much additional code! This Google Developers series with examples is a great way to get started with MotionLayout.

Tanguay