What to implement: ConstraintLayout
or CoordinatorLayout
for proper material design in android ?
The Coordinator Layout is described as a “a super-powered FrameLayout” according to the docs. It is used to facilitate how views within your layout interact with each other. This is done by creating or assigning specific Behaviors to these views.
ConstraintLayout is similar to that of other View Groups which we have seen in Android such as RelativeLayout, LinearLayout, and many more.
Following are the differences/advantages: Constraint Layout has dual power of both Relative Layout as well as Linear layout: Set relative positions of views ( like Relative layout ) and also set weights for dynamic UI (which was only possible in Linear Layout).
Does the ConstraintLayout have better performance then a nested Layout? Yes, ConstraintLayout is being designed with performance in mind, trying to eliminate as many pass scenarios as possible and by trying to eliminate the need for deeply-nested view hierarchies.
CoordinatorLayout is a super-powered FrameLayout.
CoordinatorLayout
CoordinatorLayout
is intended for two primary use cases:
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:
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.
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
.
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.
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
.
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With