How to use the new Android Constraint Layout to reduce View hierarchy

Question

Do you have any idea on how to use the new Constraint Layout that was recently announced at this year's Google I/O?

score 29 · Accepted Answer · edited Feb 24 '17 at 07:59

29

You can go to an existing layout resource file, open the visual editor and right-click on a RelativeLayout (for example) and click the option to convert to a constraint layout.

You also have to add the Gradle dependency in build.gradle file:

compile 'com.android.support.constraint:constraint-layout:1.0.0'

edited Feb 24 '17 at 07:59

Jared Burrows

54,294
25
151
185

answered May 19 '16 at 08:16

Adrian Olar

2,883
4
35
63

4

If any one is viewing this answer on 8th November,2016 and onwards, please use 'com.android.support.constraint:constraint-layout:1.0.0-beta3' Infect, the best way to solve this problem is shown in this answer http://stackoverflow.com/a/39631045/1362418 – Khaled Saifullah Nov 08 '16 at 06:22
This new layout, should we still provide landscape mode xml for this? Or it will automatically re flow the components base on that rope line. – RoCkDevstack Apr 26 '17 at 16:43
1

From android studio 2.3 onwards, you can use `com.android.support.constraint:constraint-layout:1.0.2` . – MANISH PATHAK May 27 '17 at 21:08
It is mentioned here https://developer.android.com/training/constraint-layout/index.html#constraints-overview . – Tixeon Jun 09 '17 at 02:13

score 17 · Answer 2 · edited Feb 24 '17 at 08:00

From Docs

If you're updating an existing project, proceed as follows:

Ensure you have the latest Android Support Repository (version 32 or higher): // This was the part that was missing for me

Click Tools > Android > SDK Manager. Click the SDK Tools tab. Select Android Support Repository, then click OK.

Add the updated Constraint Layout library as a dependency in your build.gradle file:

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

In the toolbar or sync notification, click Sync Project with Gradle Files.

To add a new constraint layout to your project:

Right-click on your module's layout directory, then click New > XML > Layout XML. Enter a name for the layout and enter "android.support.constraint.ConstraintLayout" for the Root Tag. Click Finish.

To convert an existing layout to a constraint layout:

Open your existing layout in Android Studio and select the Design tab at the bottom of the editor window. In the Component Tree window, right-click the layout and click Convert to ConstraintLayout.

score 5 · Answer 3 · answered Jun 05 '16 at 12:09

Go though this link from Google CodeLabs. You will have basic idea of Constraint Layout and how to use different constraints like Manual Constraint, Auto Connect & Inference.

Also there is UI Builder & Inspector which will help us to build faster UI.

score 4 · Answer 4 · answered Sep 22 '16 at 05:38

4

I tried many version, but i couldn't solve the issue! Finally i let Android Studio to solve this issue.

In the XML file, Beside error message you can see this option! Click on that to import reccomonded version

or you can press alt+enter placing your cursor on error line

I got constraint-layout:1.0.0-alpha8, when i pressed alt+enter

compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha8'

answered Sep 22 '16 at 05:38

Darshn

1,512
1
23
31

I'm using the latest version of Android Studio and I don't get the Options icon next to the error message. – Johann Nov 08 '16 at 18:16

score 2 · Answer 5 · answered Nov 09 '16 at 08:33

add dependencies

compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha9'

And create new layout xml file --> goto design tab --> right click your root layout and select last option convert LinearLayout to ConstraintLayout

See Screenshot

score 1 · Answer 6 · answered Jul 02 '17 at 06:50

you should add google maven repository in module level gradle file(important part)

repositories {
    maven {
        url 'https://maven.google.com'
    }
}

then add this line in dependencies:

compile 'com.android.support.constraint:constraint-layout:1.0.2'
compile 'com.android.support.constraint:constraint-layout-solver:1.0.2'

score 1 · Answer 7 · answered Oct 31 '17 at 08:13

Understanding the performance benefits of ConstraintLayout describes the expense of a traditional layout hierarchy. It gives an example of this layout built with nested layouts

and claims that

ConstraintLayout performs about 40% better in the measure/layout phase than RelativeLayout

This Codelab project shows how to use the ConstaintLayout to reduce View hierarchy and flatten above-mentioned layout.

score 0 · Answer 8 · answered Sep 30 '16 at 09:31

1) To design a new layout using ConstraintLayout, include the dependency in the app.gradle file

compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha8'

Note: For each view in the layout, you have to include following attributes, else the views are shown at (0,0).

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    ....>

        <View
           android:id="@+id/top_view"
           .../>

        <View
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/top_view"
        app:layout_constraintBottom_toTopOf="@+id/bottom_view"
        ..../>

       <View
           android:id="@+id/bottom_view"
           .../>

</android.support.constraint.ConstraintLayout>

2) To convert an existing layout file to a constraint layout:

Open your existing layout in Android Studio and select the Design tab at the bottom of the editor window. In the Component Tree window, right-click the root layout and click Convert to ConstraintLayout. Then include the up defined attributes.

score 0 · Answer 9 · edited Oct 25 '16 at 13:28

0

Change the dependencies in the file build.gradle.

Use compile com.android.support.constraint:constraint-layout:1.0.0-beta1 instead.

edited Oct 25 '16 at 13:28

mtb

1,350
16
32

answered Oct 25 '16 at 12:33

HaiZhong chen

1

score 0 · Answer 10 · answered Feb 23 '17 at 12:53

0

Google released the official version 1.0 ConstraintLayout

now import the non beta version

compile 'com.android.support.constraint:constraint-layout:1.0.0'

Check here info http://tools.android.com/recent/constraintlayout10isnowavailable

answered Feb 23 '17 at 12:53

Noorul

3,386
3
32
54

How to use the new Android Constraint Layout to reduce View hierarchy

10 Answers10