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

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

Posted by: admin April 23, 2020 Leave a comment

Questions:

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

How to&Answers:

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'

Answer:

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.

Answer:

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.

Answer:

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

using version 1.0.0-alpha2 of the constraint library which is obsolete

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’

Answer:

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

enter image description here

Answer:

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'

Answer:

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

Example view

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.

Codelab Project

Answer:

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.

Answer:

Change the dependencies in the file build.gradle.

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

Answer:

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