ConstraintLayout Tutorial for Android: Getting Started

A great Android app not only needs to have a beautiful UI, but also optimized performance. You need to control where and how views appear on your users’ screens.

Android provides various types of layouts which use different methods to contain child views and determine their positions. Layouts all descend from the ViewGroup class.

Some of the most common layouts to use when building your Android UI are FrameLayout, LinearLayout and RelativeLayout. They are easy to use, but they each have certain limitations and performance issues when the view hierarchy becomes complex:

• FrameLayout can only position child views by applying gravity relative to their parent.
• LinearLayout doesn’t allow views to overlap one another. Most of the time, you have to use multiple nested LinearLayouts.
• RelativeLayout is expensive because it always does two measure passes.

Nested LinearLayouts with layout_weight and nested RelativeLayouts increase the layout cost exponentially. That’s where ConstraintLayout comes to the rescue.

ConstraintLayout, which is now the default layout in Android Studio, gives you many ways to place objects. You can constrain them to their container, to one another or to guidelines. This allows you to create large, complex, dynamic and responsive views in flat hierarchy. It even supports animations!

Raze Galactic — An Intergalactic Travel Service

In this tutorial, you’ll learn the basic features of ConstraintLayout by building the UI of the login screen for an intergalactic travel app from scratch. You can use the app to book trips between planets, plan a weekend space station getaway and make moon rover reservations to get around once you arrive.

In the process, you’ll learn:

• How to add and remove constraints.
• How to dynamically position UI elements onscreen in relation to other elements.

Note: This tutorial assumes you are familiar with the basics of Android and Android Studio. If you are new to Android development, check out our Android Tutorial for Beginners series first.

Getting Started

Open Android Studio version 3.2.1 or greater and create a new Android Studio project by selecting Start a new Android Studio project from the startup screen.

On the next screen, enter Raze Galactic for the Application name.

For Company domain, you can enter anything you like; the example uses raywenderlich.com.

For Project location, choose a location on your computer that makes sense for you. Make sure that there are no spaces in the location path. You can press the ellipsis ... to the right of the project location field to choose a directory on your computer.

Finally, make sure you’ve checked Include Kotlin support and press the Next button.

On the next screen of the wizard, Target Android Devices, you’ll want to choose Phone and Tablet. Then select API 28: Android 9.0 (Pie) and press Next.

On the Add an Activity to Mobile screen, select Empty Activity. Later, you will add UI elements to this empty activity to learn about layout in Android.

Next — you guessed it — press Next!

On the final screen of the wizard, Configure Activity, leave all the default settings as they are. Just press Finish to complete the project setup.

Checking the ConstraintLayout Version

Before you start creating new layouts, you’ll want to check whether you need to update your project’s version of ConstraintLayout.

You can find this information in the build Gradle file for the app module. In Android Studio, open app ▸ build.gradle and have a look at the dependencies { … } section.

Among the various build dependancies you should find implementation 'com.android.support.constraint:constraint-layout:x' where ‘x’ is the version of ConstraintLayout that your project is using.

To complete this tutorial, you’ll need ConstraintLayout version 1.1.3 or later. To be sure you have the most recent version of the ConstraintLayout library, select Tools ▸ SDK Manager from the menu.

Click on the SDK Tools tab and look at ConstraintLayout for Android under Support Repository. If it says installed, you are using the most recent version.

Next, select the checkbox labeled Show Package Details to see which versions of the library you have. The version number in your Gradle file needs to match a version that you have installed in the SDK manager.

Setting up Android Studio for Efficient Constraint Development: Design Surfaces

Before you continue with the tutorial, set up your view of Android Studio to make it easier to add and view constraints and their related elements.

Start by opening activity_main.xml. Then click on the Select Design Surface icon in the tool bar and choose Design + Blueprint.

You will now see a blueprint view next to the design preview while you are working.

The blueprint view helps you see the constraints and guidelines more clearly without getting distracted by the content or background.

As you develop the app UI, you will switch back and forth between a code view (Text tab) and a design view (Design tab).

The code view allows you to see and edit the XML behind the layout, while the design view is useful for manipulating your UI elements visually. The design view also provides the Component Tree, which lets you see and select all the UI elements present in the view.

When you are in the code view, it’s useful to be able to see the visual preview and the blueprint. That way, when you select any element in the preview, it becomes highlighted in the XML code.

If you don’t see the preview in the code view, click on the Preview tab on the right.

Creating a New ConstraintLayout From Scratch

For your next step, open activity_main.xml and switch to the code view to see the source code for the file:

<?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="match_parent"
  tools:context=".MainActivity">

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Note that the default root element of this layout is android.support.constraint.ConstraintLayout. Also note the TextView element with the text “Hello World!” already has some constraint attributes, such as app:layout_constraintBottom_toBottomOf="parent", which constrains the bottom of this view to the bottom of its parent container.

The constraints at the top, bottom, left and right of its parent, “Hello World!”, position TextView at the center of the screen.

Switch to the design view and move your mouse cursor over the “Hello World!” TextView. You can now see four squiggly lines connecting the TextView to its parent container. These indicate constraints that you have applied to the TextView.

If the lines don’t appear, click on the TextView and they will. If you have checked the Show Constraints view option, you’ll see all constraints without hovering with the mouse cursor or selecting any views.