This blog is just a gist of how to deal or work with constraint layout, just as if it were a small drop in the ocean. I am not an expert with ConstraintLayout but it’s just what i learnt when using it.

We begin by creating an android studio application, and add the following to the app’s build.gradle file:

dependencies {
 compile 'com.android.support.constraint:constraint-layout:1.0.2'
 }

Android studio IDE allows us to drag and drop elements and adjust them such that they would suit our requirements, however, while doing this, the layout picks up some co-ordinates which you might not require (but it depends on what you want).

I will jump directly to the xml and you could experiment with it later.

<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:background="@color/colorWhite">

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/image_item"
        android:layout_width="0dp"
        android:layout_height="210dp"
        android:contentDescription="@string/app_name"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/iphone" />

    <View
        android:id="@+id/view_divider"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:background="@color/colorGrey"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/image_item" />

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt_description"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/seconds_remaining"
        android:textColor="@color/colorBlack"
        android:textSize="@dimen/text_mid_large"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view_divider"
        tools:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." />
</android.support.constraint.ConstraintLayout>

The meaning of the following:

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/view_divider"
parent -> Refers to the main window, which is the root view
app:layout_constraintBottom_toBottomOf="parent"

We align the bottom of the current view to the bottom of the parent, just the way we align bottoms in the relative view (for example)
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

As you might have understood by now, with these two lines we align the left and the right of the current view with the parent's corresponding left and right. And because of this attribute (since we are covering the width in nature, we set layout_width to 0dp such that the view exhibits a match_parent kind of behavior.
app:layout_constraintTop_toBottomOf="@+id/view_divider"

We align the top of the current view to the bottom of the view it is under, defining in other words where this view begins from (in the current example, right below the view above it (divider)).

If you will not set the layout_width and layout_height of the views inside the ConstraintLayout, please note, the ConstraintLayout will never be able to measure itself correctly and hence setting it to wrap_content will have effects you will not understand. And of course setting it to match_parent would never mean it will wrap itself.

Copying the xml above and adding missing attributes to your project you might have something as under:

Screen Shot 2560-07-24 at 4.47.25 PM

As you notice on the blue screen next to the design view, all the constraints are marked. More information on the different ways constraints are marked, please take time to read Adjust the view size

This layout is good when working with percentages too , and for that we use another layout inside the ConstraintLayout called the GuideLine that can take percent value too (in the form of decimal values)

I will cover this is another blog post.

Links that i found helpful while working with this layout:

  1. ConstraintLayout – Part 5
  2. ConstraintLayout in CardView adding white space
  3. Build a Responsive UI with ConstraintLayout

In case of doubts, feel free to ask here or to Google.

Have a good day!

Advertisements