Constraint Layout Android

15 / Jun / 2017 by Shivang Goel 0 comments

Constraint Layout allows the android developers to create large and complex User Interfaces without using nested view groups. It involves simple drag and drops view widgets from the Palette to the designer editor to create the user interface.

In an Android app development, it provides a level of flexibility that supports many features of the old layouts to be achieved with a single instance of the constraint layout. Before constraint layout, we used to nest multiple layout instances. The aim of this layout is to help reduce the number of nested views and improve the performance of layout files.

Getting Started

To start implementing Constraint Layout, you must have Android Studio 2.2 or above and dependency com.android.support.constraint:constraint-layout:1.0.2′ to be included in your Gradle file.

Add View to Constraint Layout:

To add View in the constraint layout, you just need to drag and drop the required view from the palette to the designer editor and put an anchor with respect to another view. There are some rules to add views in constraint layout:

  • Each view must have at least two constraints: horizontal and vertical.
  • You can create constraints only between a constraint handle and an anchor point that share the same plane.
  • Every constraint handle can be used for only one constraint, but you can create multiple constraints from different views to the same anchor point.

Guideline Constraint in Constraint Layout:

It’s an invisible vertical or horizontal dash-line that can be added to the layout. If it is added, then you can add a constraint to it. A user cannot see or feel these vertical or horizontal lines.

It can use percentage value for its positioning. A developer can add more than one guideline in a single layout file. To add a guideline, click on the icon in design view of the layout editor. The image below will guide you where you can find the option to add guideline.

In the picture above you can see a dropdown, select either vertical or horizontal option and it will be added to your layout. You can move the position of that guideline anywhere. Here is an example using a vertical guideline. The image below shows the blueprint.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

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

   <ImageView
       android:id="@+id/imageView"
       android:layout_width="174dp"
       android:layout_height="158dp"
       app:srcCompat="@mipmap/ic_launcher"
       android:layout_marginLeft="131dp"
       app:layout_constraintLeft_toLeftOf="@+id/guideline"
       app:layout_constraintTop_toTopOf="parent"
       android:layout_marginTop="138dp" />
</android.support.constraint.ConstraintLayout>

Create a user interface with Constraint Layout:

Let’s start with a small sample user interface:

To create a user interface, we just need to drag an image view from the palette to the designer editor and place the horizontal and vertical constraint to place image view. To give the whole width of image view, just set the width to 0dp. The image below shows the blueprint.

&lt;ImageView
   android:id="@+id/imageView"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:layout_marginLeft="8dp"
   android:layout_marginRight="8dp"
   android:layout_marginTop="8dp"
   android:scaleType="centerCrop"
   app:layout_constraintLeft_toLeftOf="parent"
   app:layout_constraintRight_toRightOf="parent"
   app:layout_constraintTop_toTopOf="parent"
   app:srcCompat="@drawable/images" /&gt;

Now, to insert location and edit text view, edit and drag the text view to the layout editor. First place the text view left constraint to the parent, then the right constraint of edit text to parent, and lastly the top constraint of edit text to below image view. Now align the baseline of text view and edit text.

The image below shows the blueprint.

<TextView
   android:id="@+id/textView_location"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Location"
   android:layout_marginLeft="8dp"
   app:layout_constraintLeft_toLeftOf="parent"
   app:layout_constraintBaseline_toBaselineOf="@+id/editText_location" />

<EditText
   android:id="@+id/editText_location"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:inputType="textPersonName"
   android:text="Noida, India"
   android:layout_marginRight="8dp"
   app:layout_constraintRight_toRightOf="parent"
   app:layout_constraintLeft_toRightOf="@+id/textView_location"
   android:layout_marginLeft="8dp"
   android:layout_marginTop="24dp"
   app:layout_constraintTop_toBottomOf="@+id/imageView" />

Similarly, to place a small image view, drag image view from the palette to the layout editor. Then, add the right constraint of image view to parent and bottom constraint to the top of location edit text. Here’s is the blueprint.

<ImageView
   android:id="@+id/imageView_small"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:srcCompat="@mipmap/ic_launcher_round"
   android:layout_marginRight="16dp"
   app:layout_constraintRight_toRightOf="parent"
   android:layout_marginBottom="8dp"
   app:layout_constraintBottom_toTopOf="@+id/editText_location" />

To place date text view and edit text view, drag them to the layout editor first. Add the edit text right constraint to the parent, top constraint to the bottom of location edit text, and the left constraint to the left anchor of location edit text. Now add the text view left constraint to the parent, right constraint to the left anchor of date edit text view and align the baseline with date edit text view. Have a look at the blueprint.

<TextView
   android:id="@+id/textView_date"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:text="Date"
   android:layout_marginLeft="8dp"
   app:layout_constraintLeft_toLeftOf="parent"
   app:layout_constraintBaseline_toBaselineOf="@+id/editText_date"
   app:layout_constraintRight_toLeftOf="@+id/editText_date"
   android:layout_marginRight="8dp"
   />

<EditText
   android:id="@+id/editText_date"
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:ems="10"
   android:inputType="textPersonName"
   android:text="April 12, 2017"
   android:layout_marginRight="8dp"
   app:layout_constraintRight_toRightOf="parent"
   android:layout_marginLeft="8dp"
   android:layout_marginTop="24dp"
   app:layout_constraintTop_toBottomOf="@+id/editText_location"
   app:layout_constraintLeft_toLeftOf="@+id/editText_location" />

Here’s the layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <ImageView
       android:id="@+id/imageView"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_marginLeft="8dp"
       android:layout_marginRight="8dp"
       android:layout_marginTop="8dp"
       android:scaleType="centerCrop"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       app:srcCompat="@drawable/images" />

   <TextView
       android:id="@+id/textView_location"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Location"
       android:layout_marginLeft="8dp"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintBaseline_toBaselineOf="@+id/editText_location" />

   <EditText
       android:id="@+id/editText_location"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:inputType="textPersonName"
       android:text="Noida, India"
       android:layout_marginRight="8dp"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintLeft_toRightOf="@+id/textView_location"
       android:layout_marginLeft="8dp"
       android:layout_marginTop="24dp"
       app:layout_constraintTop_toBottomOf="@+id/imageView" />

   <ImageView
       android:id="@+id/imageView_small"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       app:srcCompat="@mipmap/ic_launcher_round"
       android:layout_marginRight="16dp"
       app:layout_constraintRight_toRightOf="parent"
       android:layout_marginBottom="8dp"
       app:layout_constraintBottom_toTopOf="@+id/editText_location" />

   <TextView
       android:id="@+id/textView_date"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:text="Date"
       android:layout_marginLeft="8dp"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintBaseline_toBaselineOf="@+id/editText_date"
       app:layout_constraintRight_toLeftOf="@+id/editText_date"
       android:layout_marginRight="8dp"
       />

   <EditText
       android:id="@+id/editText_date"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:ems="10"
       android:inputType="textPersonName"
       android:text="April 12, 2017"
       android:layout_marginRight="8dp"
       app:layout_constraintRight_toRightOf="parent"
       android:layout_marginLeft="8dp"
       android:layout_marginTop="24dp"
       app:layout_constraintTop_toBottomOf="@+id/editText_location"
       app:layout_constraintLeft_toLeftOf="@+id/editText_location" />
</android.support.constraint.ConstraintLayout>

Constraint Layout can anchor any side of a view with any side of another view instead of placing a whole view to any side of another view like in the relative layout. For example, the attributes of a relative layout allow us to position a view using: layout_toRightOf, layout_toLeftOf, layout_toTopOf, layout_toBottomOf

However, the Constraint Layout has many more attributes like the following:

  • layout_constraintTop_toTopOf — Align the top of the view to the top of another.
  • layout_constraintTop_toBottomOf — Align the top of the view to the bottom of another.
  • layout_constraintBottom_toTopOf — Align the bottom of the view to the top of another.
  • layout_constraintBottom_toBottomOf — Align the bottom of the view below another.
  • layout_constraintLeft_toTopOf — Align the left of the view to the top of another.
  • layout_constraintLeft_toBottomOf — Align the left of the view to the bottom of another.
  • layout_constraintLeft_toLeftOf — Align the left of the view to the left of another.
  • layout_constraintLeft_toRightOf — Align the left of the view to the right of another.
  • layout_constraintRight_toTopOf — Align the right of the view to the top of another.
  • layout_constraintRight_toBottomOf — Align the right of the view to the bottom of another.
  • layout_constraintRight_toLeftOf — Align the right of the view to the left of another.
  • layout_constraintRight_toRightOf — Align the right of the view to the right of another.
  • Attributes supporting start and end are also available in place of left and right alignment.

I hope this blog will help you work with the Constraint Layout.

FOUND THIS USEFUL? SHARE IT

Leave a comment -