How To Use ConstraintLayout In Android Studio

In 2016, Google released a new container class, ConstraintLayout, that it hopes will become popular among Android developers as an alternative to LinearLayout and RelativeLayout.

ConstraintLayout is useful, but it is not required for Android app development, any more than LinearLayout and RelativeLayout are.

ConstraintLayout is a library, it adds “100KB” to the size of your Android app. Whether it is worth that extra space is for you to decide.

why did Google bother creating ConstraintLayout ?

  • Drag-and-Drop GUI Builders

Google would want everyone to use Android Studio, and in particular for everyone to use Android Studio’s drag-and-drop GUI builder.

How well a drag-and-drop GUI builder works depends a lot on how the rules for laying out a UI get defined.

With drag-and-drop gestures, the developer is only providing you with A/B coordinates of a widget.

Releases the mouse button and completes the drop. It is up to the GUI builder to determine what that really means in terms of layout rules.
With LinearLayout, adding a widget is fairly easy:

  • If the developer drops the widget between two existing children of a LinearLayout, put the new widget in between the existing ones.
  • Otherwise, add the widget to the end of the LinearLayout where the developer dropped it.

RelativeLayout, was difficult for a GUI builder to handle. Often, the Android Studio GUI builder would misinterpret the developers wishes. Sometimes, the rules the developer wanted to express were simply unavailable through pure drag-and-drop operations. As a result, developers had to dive into the XML to get anything done.

However, forcing developers to write the XML defeated the purpose of the GUI builder.

ConstraintLayout was created with GUI building in mind, to make it a bit easier to infer the right rules based upon where the developer happens to drop a widget.

  • Getting ConstraintLayout
To use ConstraintLayout in your project, proceed as follows:

  1. Ensure you have the maven.google.com repository declared in your module-level build.gradle file:
    repositories {
        google()
    }
  2. Add the library as a dependency in the same build.gradle file, as shown in the example below. Note that the latest version might be different than what is shown in the example:
    dependencies {
        implementation 'com.android.support.constraint:constraint-layout:1.1.2'
         }
  3. In the toolbar or sync notification, click Sync Project with Gradle Files.

Now you’re ready to build your layout with ConstraintLayout.

  • The XML File

The ConstraintLayout approach resembles that of the RelativeLayout implementation.

<?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
android:layout_width=”match_parent
android:layout_height=”match_parent“>
…Widgets…
</android.support.constraint.ConstraintLayout>

  • app: is because ConstraintLayout comes from a library, not the Android framework itself.
  • Graphical Layout Editor

Drag a widget into the ConstraintLayout and drop it in an arbitrary spot, what you get at design time will be different than what you get when you run the app.

In the graphical layout editor, the Button shows up where you drop it:

If you click on a widget that you dragged into the ConstraintLayout, the blueprint view will show squares on the corners and circles centered on the edges, plus a couple of bubbles beneath it:

  • You would use this resizing approach if you wanted a fixed size for the widget.

The circles are more important, as they allow you to define the constraints, by dragging a circle to some anchor point:

For More Informations about Constraint-layout Go To official android website.

Android Dev

Android Developer.

Leave a Reply

Your email address will not be published. Required fields are marked *