ConstraintLayout Tutorial for Android: Complex Layouts

ConstraintLayout is a layout on Android that gives you adaptable and flexible ways to create views for your apps.

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 each other or to guidelines. This allows you to create large, complex, dynamic and responsive views in a flat hierarchy. It even supports animations!

In this tutorial, you’ll learn to use a multitude of ConstraintLayout‘s features by building an app for a space travel agency. In the process, you’ll learn how to:

• Convert from other types of layouts to ConstraintLayout.
• Dynamically position UI elements onscreen in relation to other elements.
• Animate your views.

Note: This tutorial assumes you are familiar with the basics of Android, Kotlin and ConstraintLayout. If you’re new to Android, check out our Beginning Android tutorial. If you know Android but are unfamiliar with Kotlin, take a look at Kotlin For Android: An Introduction. To catch up on ConstraintLayout, check out ConstraintLayout Tutorial for Android: Getting Started

Raze Galactic — An Intergalactic Travel Service

During this tutorial, you’ll build an interface for an intergalactic travel app which lets users book trips between planets, plan weekend space station getaways and make moon rover reservations to get around when they reach their destination.

Getting Started

Use the Download Materials button at the top or bottom of this tutorial to download the starter project.

Open the starter project in Android Studio. Build and run the app.

There are many elements in this app. You’ll learn how to display them properly using a complex ConstraintLayout in this tutorial.

To start, go to Android Studio and open the layout file for this app, activity_main.xml, in Design view. Notice the structure of the layout is a series of nested LinearLayouts and RelativeLayouts.

ConstraintLayout is not the best choice for simple layouts, but it’s great for complex layouts like the one in this tutorial.

Converting a Layout to ConstraintLayout

In the Component Tree in Design view, right-click on the top-level LinearLayout and select Convert LinearLayout to ConstraintLayout from the context menu:

Next, you should get a pop-up dialog with some options:

Accept the defaults after reading what they do and click on OK to dismiss the dialog and convert the layout. Android Studio will then attempt to remove all the nested layouts and convert your layout to ConstraintLayout.

At this point, you may need to give Android Studio a moment to do some processing as it tries to figure out the new layout. After a moment, your layout may look like this:

After another moment, all your views may just jump into the upper left corner of the layout. If this happens, don’t panic!

Note: Make sure to turn off Autoconnect for this tutorial. Find this option in the toolbar of the design editor when you have ConstraintLayout selected.

Removing Inferred Constraints

During the conversion process, Android Studio performs a number of steps. The last one may have been Infer Constraints, whose results might not quite be what you wanted. ;] If that’s the case, simply go to the Edit menu and choose Undo Infer Constraints:

Alternatively, you can simply press ⌘-Z on Mac or Control-Z on Windows.

In the Design view of Android Studio, your preview may now look like this:

It’s close, but not quite where the layout needs to be. You can drag the views around a bit until they look more like the original layout:

Note: This tutorial uses a Pixel 2 as the device in the preview. If you are using a different device, the views may look different than they do in the screenshots. You can change this setting in the toolbar.

Don’t spend a lot of time trying to get the layout exactly like it was before. At this point, you just want a very rough estimation to get yourself visually oriented. You’ll add all the constraints you need to make it look perfect throughout the rest of this tutorial.

When you are done, your layout may look something like this:

If Android Studio added any constraints automatically as you dragged the views around, just click the Clear All Constraints button to get rid of them.

One last thing before putting theses elements in their final places, change the ID of the root ConstraintLayout to be constraintLayout.

Resizing the Images

Next, fix the image sizes by clicking on each of the icons, spaceStationIcon, flightsIcon, and roverIcon, at the top. Then, in the Attributes panel, change the layout_width and layout_height properties from wrap_content to 30dp.

You’ll see a bunch of errors listed in the Component Tree. These appear because Android doesn’t have any information from constraints to tell it where to position the UI elements. You’ll start fixing that problem now.

Note: Android Studio offers various ConstraintLayout tools to save you time, but they don’t always do what you expect. It helps to visualize what the constraints should do before you start to add them. That way, if Android Studio’s tools misbehave, you can add individual constraints one at a time to achieve the effect you want.

Keep this in mind as you use the Align menu and other tools in the steps below: if Android Studio doesn’t do what you expect, go back and add the individual constraints yourself.