Understanding Constraint Layout and its features

ConstraintLayout was introduced to reduce the nesting and complexity of views while creating a layout in android.Using ConstraintLayout you can define a lot of common layouts inside a single parent.ConstraintLayout saves us from the performance issues that accompany a RelativeLayout while also letting us position views with respect to each other.

You can use ConstraintLayout by adding the following line to your app's build.gradle :

implementation 'com.android.support.constraint:constraint-layout:1.1.2'

Here's a sample layout created using ConstraintLayout as its parent :

<android.support.constraint.ConstraintLayout
	  xmlns:android="http://schemas.android.com/apk/res/android"
    	  xmlns:app="http://schemas.android.com/apk/res-auto"	
          android:id="@+id/layout_profile_header"
          android:layout_width="match_parent"
          android:layout_height="@dimen/thirty_dp"
          android:layout_margin="@dimen/sixteen_dp">
          <TextView
              android:id="@+id/tv_personal_details"
              android:layout_width="0dp"
              android:layout_height="match_parent"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toLeftOf="@id/tv_kyc"
              android:background="@drawable/profile_tab_selector"
              android:textColor="@color/profile_tab_text_color"
              android:text="Personal Details"
              android:textSize="@dimen/textsize_twelve"
              android:gravity="center"
              android:layout_marginRight="@dimen/sixteen_dp" />
          <TextView
              android:id="@+id/tv_kyc"
              android:layout_width="0dp"
              android:layout_height="match_parent"
              android:text="@string/kyc"
              android:textSize="@dimen/textsize_twelve"
              android:gravity="center"
              android:textAllCaps="true"
              android:background="@drawable/profile_tab_selector"
              android:textColor="@color/profile_tab_text_color"
              app:layout_constraintLeft_toLeftOf="@id/tv_personal_details"
              app:layout_constraintRight_toLeftOf="@id/tv_bank_details"/>
          <TextView
              android:id="@+id/tv_bank_details"
              android:layout_width="0dp"
              android:layout_height="match_parent"
              android:layout_marginLeft="@dimen/sixteen_dp"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintLeft_toRightOf="@id/tv_kyc"
              android:gravity="center"
              android:background="@drawable/profile_tab_selector"
              android:textColor="@color/profile_tab_text_color"
              android:text="Bank Details"
              android:textSize="@dimen/textsize_twelve"/>
</android.support.constraint.ConstraintLayout>

The above layout allows a user to center two views equally without the use of weights,which otherwise would have created a performance overhead while rendering.

Some of the core features of a ConstraintLayout are :

• Barrier : A barrier is nothing but an invisible view which contains a reference to the views against whom we want to create a barrier.If the size of one of the views grows,the barrier adjusts its size against the largest height or width of the items referenced.A Barrier can be either horizontal or vertical and can be positioned at the left,right,top or bottom of the items referenced.The rest of the views can then constrain themselves to the barrier.
• Guidelines : Guidelines assist you in designing layouts.We can align views to a guideline which helps in simplifying layouts,primarily if the same margin values have to be used on a number of views.Guidelines can be provided in dpi from the start or end of the screen or can be specified as a percentage of the screen width.

  <android.support.constraint.Guideline
          android:id="@+id/guideline"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:orientation="vertical"
          app:layout_constraintGuide_begin="20dp" />
  

  Views in the layout can constrain themselves to the guideline.
• Chains : Chains allow us to manipulate the space between views and the way they use the space.In order to form a chain,choose views that you want to include in the chain and then select chain->Create Horizontal/Vertical Chain.You can then cycle through different chain modes.The XML for constructing a chain is different in the sense that all views have constraints defined on themselves.

  <Button
          android:id="@+id/button"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:layout_constraintEnd_toStartOf="@+id/button_two"
          app:layout_constraintHorizontal_chainStyle="packed"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/textView"
          tools:text="1" />