Category
Categories
Sort By

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 the design view of the layout editor.

Select either a vertical or horizontal option from the dropdown menu, and it will be added to your layout. You can move the position of that guideline anywhere.

[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">

<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>
[/xml]

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.

[xml]
&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;
[/xml]

Now, to insert the location and edit the 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 the parent, and lastly, the top constraint of edit text. Now align the baseline of text view and edit text.

[xml]
<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" />
[/xml]

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.

[xml]
<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" />
[/xml]

To place the date text view and edit the text view, drag them to the layout editor first. Add the edit text right constraint to the parent, the top constraint to the bottom of the location edit text, and the left constraint to the left anchor of the 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.

[xml]
<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" />
[/xml]

Here’s the layout.xml:

[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>[/xml]

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

Tag -

Android Android app development android app development services AutoLayout Constraint Layout layout

Leave a Reply

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

YOU MAY ALSO LIKE

  1. Creating Android Application with Groovy
  2. Playing different Videos with Exo-Player in Android TV
  3. Simplistic Fullscreen Image Viewer: React Native
Glassdoor
Services