Android ConstraintLayout is added in Android to overcome the issues of the existing layout. It provides a Flat view hierarchy, exactly no more nested views (inside RelativeLayout many layouts or LinearLayout, etc). Using ConstraintLayout will increase your android application performance. It’s similar to RelativeLayout where views are relatively positioned in UI.
Attributes of Android ConstraintLayout :
Here are some attributes of constraint layout to make your app UI awesome.
Relative positioning
ConstraintsLayout is allowing to position views relative to each other. You can give constrain Horizontal and vertical axis to a widget.
- Horizontal Axis: left, right, start and end sides
- Vertical Axis: top, bottom sides, and text baseline
Here is app:layout_constraintStart_toEndOf="@+id/button2" Button start after Button.
<?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">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="84dp"
android:layout_marginStart="84dp"
android:text="Button"
app:layout_constraintStart_toEndOf="@+id/button2"
tools:layout_editor_absoluteY="16dp"
tools:ignore="MissingConstraints" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="16dp"
tools:ignore="MissingConstraints" />
</android.support.constraint.ConstraintLayout>Margins
You can set a margin Between a widget or parent layout, same as other layouts. Margin can only be positive or equals to zero, and takes a Dimension.
Centering positioning and bias
Widget will be centered in the parent container if constraints pulling opposite the widget apart equally. See this example and apply similarly for vertical constraints.
<?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">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
</android.support.constraint.ConstraintLayout>Bias
The default when encountering such opposite constraints is to center the widget; but you can tweak the positioning to favor one side over another using the bias attributes:
layout_constraintHorizontal_biaslayout_constraintVertical_bias
For example the following will make the left side with a 30% bias instead of the default 50%, such that the left side will be shorter, with the Button leaning more toward the left side
<?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">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
</android.support.constraint.ConstraintLayout>Circular positioning (Added in 1.1)
You can constrain a widget center relative to another widget center, at an angle and a distance. This allows you to position a widget on a circle, the following attributes can be used:
layout_constraintCircle: references another widget idlayout_constraintCircleRadius: the distance to the other widget centerlayout_constraintCircleAngle: which angle the widget should be at (in degrees, from 0 to 360)
In this example Button 2 with circle angle 45 and Button 3 is with circle angle 135 , relatively to Button 1.
<?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">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="147dp"
tools:layout_editor_absoluteY="66dp" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2"
app:layout_constraintCircle="@+id/button1"
app:layout_constraintCircleRadius="100dp"
app:layout_constraintCircleAngle="45" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3"
app:layout_constraintCircle="@+id/button1"
app:layout_constraintCircleRadius="100dp"
app:layout_constraintCircleAngle="135" />
</android.support.constraint.ConstraintLayout>Ratio
You can also define one dimension of a widget as a ratio of the other one. In order to do that, you need to have at least one constrained dimension be set to 0dp, and set the attribute layout_constraintDimensionRatio to a given ratio.
To constrain one specific side based on the dimensions of another, you can pre append W,” or H, to constrain the width or height respectively.
<?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">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="Button 1"
app:layout_constraintDimensionRatio="h,1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>There is many more attribute and updating in google android doc , you can check this doc link: https://developer.android.com/reference/android/support/constraint/ConstraintLayout for more details.
Let’s Build a Complete Example of Android ConstraintLayout :
Step 1. Create new project “Build Your First Android App in Kotlin“
Step 2. Add the library as a dependency in the same build.gradle file:
Then see in the toolbar or sync notification, click Sync Project with Gradle Files.
dependencies {
implementation 'com.android.support.constraint:constraint-layout:1.1.2'
}Ensure you have the maven.google.com repository declared in your module-level build.gradle file:
repositories {
google()
}Step 3. Add String in res/values/strings.xml file
adding the email, password and login strings, its a recommend to define your string in resource values.
<resources>
<string name="app_name">Android ConstraintLayout</string>
<string name="email">Email</string>
<string name="password">Password</string>
<string name="login">Login</string>
</resources>Step 4. Add following code in activity_main.xml resource 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:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="@string/email"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="36dp"
android:text="@string/password"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />
<EditText
android:id="@+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="36dp"
android:layout_marginRight="8dp"
android:layout_marginStart="36dp"
android:ems="10"
android:hint="@string/email"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/textView"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="8dp"
android:layout_marginStart="12dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="@string/password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/textView2"
app:layout_constraintTop_toBottomOf="@+id/editText" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="@string/login"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/editText2" />
</android.support.constraint.ConstraintLayout>Step 5. Open “MainActivity.kt” and setContentView resource layout
package `in`.eyehunt.androidconstraintlayout
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
}
Step 4. Now Run the application, in emulator or On you android device
Output screenshot Android Constraint Layout example :
Download source code Android ConstraintLayout in kotlin
https://github.com/EyeHunts/AndroidConstraintLayout
Do comment if you have any doubt and suggestion on this tutorial.
Note: Android ConstraintLayout example (Project) is developed in Android Studio
3.1.3 . Tested on Android 9 ( Android-P), compile SDK version API 26: Android 8.0 (Oreo)MinSdkVersion=”15″
TargetSdkVersion=”27″
Coding in Kotlin
Bouns :
- Must read Constrain Layout Advantage
- Read most Hotest topic in 2018 – Differences between ConstraintLayout and RelativeLayout
Hi,
can you please explain the following statement “Its similar to RelativeLayout where views are relatively positioned in UI”.
It’s similar to RelativeLayout means – when we positioning any UI component in the layout we passing with ID and position. Similarly, ConstraintLayout looking at the position of it with other component using id.